FormantaSass

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

Size: 46KB (gzip ~9.5KB) - or only 27.5B 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 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
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle Tweets
1 Mark Otto @mdo 12
2 Jacob Thornton @fat 56
3 Larry the Bird @twitter 150

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.

More

Title Panel

Lorem ipsum dolor sit amet consectutor adispisci.

More

Title Panel

Lorem ipsum dolor sit amet consectutor adispisci.

More

Title Panel

Lorem ipsum dolor sit amet consectutor adispisci.

More

Dense Panels

Title Panel Dense

Lorem ipsum dolor sit amet consectutor adispisci.

More

Title Panel Dense

Lorem ipsum dolor sit amet consectutor adispisci.

More

Title Panel Dense

Lorem ipsum dolor sit amet consectutor adispisci.

More

Title Panel Dense

Lorem ipsum dolor sit amet consectutor adispisci.

More

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

Modal Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto culpa expedita totam aperiam, aliquid, consectetur!

Modal Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto culpa expedita totam aperiam, aliquid, consectetur!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto culpa expedita totam aperiam, aliquid, consectetur!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto culpa expedita totam aperiam, aliquid, consectetur!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto culpa expedita totam aperiam, aliquid, consectetur!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto culpa expedita totam aperiam, aliquid, consectetur!

List in Modal

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
  • List Item 5
  • List Item 6
  • List Item 7
  • List Item 8
  • List Item 9
  • List Item 10
  • List Item 11
  • List Item 12
  • List Item 13
  • List Item 14
  • List Item 15

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto culpa expedita totam aperiam, aliquid, consectetur!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto culpa expedita totam aperiam, aliquid, consectetur!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto culpa expedita totam aperiam, aliquid, consectetur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto culpa expedita totam aperiam, aliquid, consectetur!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto culpa expedita totam aperiam, aliquid, consectetur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto culpa expedita totam aperiam, aliquid, consectetur!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto culpa expedita totam aperiam, aliquid, consectetur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto culpa expedita totam aperiam, aliquid, consectetur! Architecto culpa expedita totam aperiam, aliquid, consectetur! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto culpa expedita totam aperiam, aliquid, consectetur!

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