DOCUMENT

Status: Beta, Document update at 05.01.2018, still working...

GMPK.US is a light weight web-page builder, it's free and no need to register. You can create a greeting card or a single-page website whatever as you wish. You can make your design and share with others, it makes even more fun.

Icon

You can use all icons from Fontawesome. Just type in the icon name, then select the name, on editing bar choose  icon, now you see your icon.

Block Visibility

g-hidden@s
g-hidden@m
g-hidden@l
g-hidden@xl

g-visible@s
g-visible@m
g-visible@l
g-visible@xl

Block Animation

g-animate
Add this class to active animation

g-animate-slide-top
g-animate-slide-bottom
g-animate-slide-left
g-animate-slide-right
g-animate-scale-up
g-animate-scale-down

g-animate-repeat-(true, false)

g-animate-delay-0


g-animate-slide-top

g-animate-slide-bottom

g-animate-slide-right


g-animate-slide-left

g-animate-scale-up

g-animate-scale-down

Animation.CSS

Full width block

It's easy to set full width block with little css. Put following code in custom css field:

.full-width {
  position: relative;
  max-width: 100vw;
  margin-left: -50vw;
  left: 50%;
}

@media screen and (min-width:640px) { .full-width { padding-left: 30px; padding-right: 30px } }

@media screen and (min-width:960px) { .full-width { padding-left: 40px; padding-right: 40px } }

@media screen and (min-width:1200px) { .full-width { padding-left: calc((100vw - 1200px)/2); padding-right: calc((100vw - 1200px)/2) } }

Now you can use class name 'full-width' in your block class field.

Smooth Scroll

g-scroll-offset-60

g-scroll-duration-1000

g-scroll-off

Sticky Element

g-sticky
add this class to block to keep it stick on the top of window, like menu on the right

g-sticky-top-0
position the element below the viewport edge, change the last number

g-sitcky-offset-0
use this class to set sticky offset to top in pixel, change the last number

g-sticky-showonup-true
show sticky only on scroll up

g-sticky-media-123
Condition for the active status - a width as integer (e.g. 640) or a breakpoint (e.g. @s, @m, @l, @xl)

g-sticky-active
when sticky actived, .g-block will have this class

Parallax Background


If you want to use parallax background, just add class name 'c-parallax' to your block. and set background image for the block with css.

g-parallax
use this class to add parallax effect to the block.

g-parallax-bgy-200
add this class to set the background animate distance in pixel, you can change the number at the end.

Share your template

We all like to share. You can share your design with others. Create and save your page, in page edit mode, select 'Share Template', after page reload you can see your share code, send it to anybody, they can then use it to import page design just like yours. It helps user to quickly build awesome pages with your help. And share can be undo at anytime. When unshared, old share code will not work anymore, but you can generate new code at anytime.