FormantaSass

Mini CSS Framework with modular Sass files, configuration by Sass variables, compatible with AMP.

Size: 46KB (gzip ~9.5KB) - or only 27.5KB without responsive spacings!

npm i --save-dev @formanta/sass

Checkout the GitHub repository for quick start, issues and source code.

Documentation

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

Example Colors:

standard theme contrast theme dark theme dark contrast theme

example with CSS Vars

demo styles source folder

Contents

Typography

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5
Headline 6

Subtitle 1

Subtitle 2

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

Colored Text .color-primary

Colored Text .color-secondary

Colored Text .color-success

Colored Text .color-info

Colored Text .color-warning

Colored Text .color-danger

Colored Text .color-light

Colored Text .color-strong

Form

Toggled Inputs
Toggled Inputs

Please enter a valid value.

Buttons

standard size, normal vs. elevations:

Click   Click   Click   Click   Click   Click  
Click   Click   Click   Click   Click   Click  

small size, normal vs. elevations:

Click   Click   Click   Click   Click   Click  
Click   Click   Click   Click   Click   Click  

works also with a tags:

Click   Click   Click   Click   Click   Click   Click   Click   Click  

filled with .btn-<semantic>:

                 

outlined colors with .btn-<semantic>-o:

                 

only text with .btn-text / .btn-<semantic>-text:

                    

sizes .btn-sm, .btn, .btn-lg, normal vs. .btn-round:

Click   Click   Click   Click   Click   Click  
Click   Click   Click   Click   Click   Click  

icons with .btn.btn-ic, supporting all semantics:

button groups with .btn-group on the parent:

button reset .btn-raw for easy custom buttons:

Content

Lorem ipsum dolores umbridge.
Lorem ipsum dolores umbridge.

- Jon Doe

Content Code

Use the $color-primary variable to change the accent color.

.some {
    height: 100vh
}

Tables

Product DetailsQuantityCost

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

#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
#FirstLastHandleTweets
1MarkOtto@mdo12
2JacobThornton@fat56
3Larrythe Bird@twitter150

Elevation

Elevation 0

Lorem ipsum dolor sit amet consectutor adispisci.

More

Elevation 1

Lorem ipsum dolor sit amet consectutor adispisci.

More

Elevation 2

Lorem ipsum dolor sit amet consectutor adispisci.

More

Elevation 3

Lorem ipsum dolor sit amet consectutor adispisci.

More

Elevation 4

Lorem ipsum dolor sit amet consectutor adispisci.

More

Outlined

Outlined

Lorem ipsum dolor sit amet consectutor adispisci.

More

Outlined Rect

Lorem ipsum dolor sit amet consectutor adispisci.

More

Outlined Round

Lorem ipsum dolor sit amet consectutor adispisci.

More

Outlined Divider

Lorem ipsum dolor sit amet consectutor adispisci.

More

Outlined Divider Rect

Lorem ipsum dolor sit amet consectutor adispisci.

More

Outlined Divider Round

Lorem ipsum dolor sit amet consectutor adispisci.

More

Outlined Primary

Lorem ipsum dolor sit amet consectutor adispisci.

More

Outlined Primary Rect

Lorem ipsum dolor sit amet consectutor adispisci.

More

Outlined Primary Round

Lorem ipsum dolor sit amet consectutor adispisci.

More

Outlined secondary

Lorem ipsum dolor sit amet consectutor adispisci.

More

Outlined secondary Rect

Lorem ipsum dolor sit amet consectutor adispisci.

More

Outlined secondary Round

Lorem ipsum dolor sit amet consectutor adispisci.

More

Panels

Title Panel

Lorem ipsum dolor sit amet consectutor adispisci.

Title Panel

Lorem ipsum dolor sit amet consectutor adispisci.

Title Panel

Lorem ipsum dolor sit amet consectutor adispisci.

Title Panel

Lorem ipsum dolor sit amet consectutor adispisci.

Dense Panels

Title Panel Dense

Lorem ipsum dolor sit amet consectutor adispisci.

Title Panel Dense

Lorem ipsum dolor sit amet consectutor adispisci.

Title Panel Dense

Lorem ipsum dolor sit amet consectutor adispisci.

Title Panel Dense

Lorem ipsum dolor sit amet consectutor adispisci.

Interactive Panels

working with .panel and either a tags or any tag with the attribute tabindex=* (but not on tabindex="-1"):

Title Panel

Lorem ipsum dolor sit amet consectutor adispisci.

Lorem ipsum dolor sit amet consectutor adispisci.

Title Panel

Lorem ipsum dolor sit amet consectutor adispisci.

Lorem ipsum dolor sit amet consectutor adispisci.

Title Panel

Lorem ipsum dolor sit amet consectutor adispisci.

Lorem ipsum dolor sit amet consectutor adispisci.

Title Panel

Lorem ipsum dolor sit amet consectutor adispisci.

Lorem ipsum dolor sit amet consectutor adispisci.

Title Panel tabindex -1

Lorem ipsum dolor sit amet consectutor adispisci.

Lorem ipsum dolor sit amet consectutor adispisci.

Alert / Info Box

Info

Success Message

Lorem ipsum dolor sit amet.

Info

Info Message

Lorem ipsum dolor sit amet.

Info

Warning Message

Lorem ipsum dolor sit amet.

Info

Danger Message

Lorem ipsum dolor sit amet.

Info

Success Message

Lorem ipsum dolor sit amet.

Info

Info Message

Lorem ipsum dolor sit amet.

Info

Warning Message

Lorem ipsum dolor sit amet.

Info

Danger Message

Lorem ipsum dolor sit amet.

Modal

Collapse

Requires some JS to work, not included in the formanta/sass package, see this GitHub Gist.

Tabs

Example combines .btn-group, .tabs-toggle-group with an HTML structure which combined those buttons with an content area.

Requires some JS to work, not included in the formanta/sass package, see this GitHub Gist.

Tab A

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

more

Tab B

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
  • List Item 5

Lorem ipsum dolor sit amet.

more

Tab C

Lorem ipsum dolor sit amet.

discover now

Tab D

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

more

Tab A

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

more

Tab B

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
  • List Item 5

Lorem ipsum dolor sit amet.

more

Tab C

Lorem ipsum dolor sit amet.

discover now

Tab D

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

more

Tab A

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

more

Tab B

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
  • List Item 5

Lorem ipsum dolor sit amet.

more

Tab C

Lorem ipsum dolor sit amet.

discover now

Tab D

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

more

Tab A

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

more

Tab B

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
  • List Item 5

Lorem ipsum dolor sit amet.

more

Tab C

Lorem ipsum dolor sit amet.

discover now

Tab D

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

more

Tooltip

Hover for more infoawesome!

Hover on this partawesome! for more info!

Loading

Loading
Loading

Container

xl
lg
md
sm

Grid

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

  • flex flex-wrap classes for the wrapper
  • col-1, col-2, col-3 till 12 (or otherwise configured) for column sizing
  • col-sm-1, col-md-1, col-lg-1, col-xl-1 for responsive column classes in bootstrap naming style
  • sm-col-1, md-col-1, lg-col-1, xl-col-1 for responsive column classes in Basscss naming style

Nested Grid / Grid with Spacings

Nested grids have the spacings integrated, they currently use $spacing-def: 1, 0.5, 2 and 3. 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
  • flex flex-wrap grid-s3

Grid Offset

Spacings

m* for margin, p* for padding, support of responsive gutters with e.g. -sm, -md, ... and multiple affected sides.

  • mx*, px* = margins and paddings on x-axis
  • my*, py* = margins and paddings on y-axis
  • mt*, pt* = margins and paddings on top side
  • mr*, pr* = margins and paddings on right side
  • mb*, pb* = margins and paddings on bottom side
  • ml*, pl* = margins and paddings on left side
  • mxa, mla, mra = margin auto on different sides
  • ml0, ml05, ml1, ml2, ml3, ml4, ml5 = margin-left for all configured $spacings-def sizes
  • ml1, ml1-sm, ml1-md, ml1-lg and for responsive spacings

only compact overview.

mxa
mra
mla
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
px2 py1 px3-md px4-lg px5-lg py3-md py4-lg py5-xl