Formanta GitHub

Mini CSS Framework with modular Sass files, configuration by Sass or (some) CSS variables and especially made for AMP!

Size: 41KB (gzip ~8KB) - or only 24KB without responsive spacings!

Checkout the quick start, features and issues of the current version.

npm i --save-dev @formanta/sass

You find examples for all styles on this page.

Documentation No-Native Selectors

Inspect ignores custom example-page selectors: background blue, grey(s) and title.

Grid

Normal flexbox grids have no spacings integrated, the spacing must exist at the child, here this is faked for the grey background.

Nested Grid / Grid with Spacings

Nested grids have the spacings integrated, they currently use $spacing-def: 1, 0.5 and 2. The spacing is applied to direct children which have a class that begins with col-. Blue background cells are second level, grey first level.

Classes for wrapper:

  • flex flex-wrap grid-s05
  • flex flex-wrap grid-s1
  • flex flex-wrap grid-s2

Grid Offset

Container

Buttons & Elevation

Click   Click   Click   Click   Click   Click  

with a.btn:

Click   Click   Click   Click   Click   Click   Click  

with button.btn:

                    
                    
                    
Click   Click   Click   Click   Click   Click  

Typography

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5
Headline 6

Lorem 1 ipsum dolor sit amet.

Lorem 2 ipsum dolor sit amet.

Bold

Regular

Italic

Caps

Left align

Center

Right align

Justify Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.

No wrap

Underline

Truncate

Font Family Inherit

Font Size Inherit

Text Decoration None

Spacings

mxa
mt0
mt05
mt1
mt2
mt3
mt4
mt5

Spacings Negative

mln0
mln05
mln1
mln2
mln3
mln4
mln5

Spacings Padding

p0
p05
p1
p2
p3
p4
p5
px4 py2

Form

Toggled Inputs

Please enter a valid value.

Content

Lorem ipsum dolores umbridge.
Lorem ipsum dolores umbridge.

- Jon Doe

Content Code

Use the $brand-color variable for changing the accent color.

.some {
    height: 100vh
}

Loading

Modal

Panels

Title Panel

Lorem ipsum dolor sit amet consectutor adispisci.

Steppers

Tooltip

Hover for more infoawesome!

Tables

Product Details Quantity Cost

Product #1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur necessitatibus facilis facere eaque. Molestias, quaerat. Tempore accusantium esse, cum sunt totam quibusdam mollitia vel aliquid.

view details | add to wishlist

1

$10.00

Product #2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur necessitatibus facilis facere eaque. Molestias, quaerat. Tempore accusantium esse, cum sunt totam quibusdam mollitia vel aliquid.

view details | add to wishlist

2

$24.00

Product #3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur necessitatibus facilis facere eaque. Molestias, quaerat. Tempore accusantium esse, cum sunt totam quibusdam mollitia vel aliquid.

view details | add to wishlist

1

$18.00

Grand Total

4

$76.00

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter