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, using no native CSS selectors.
Simply import this variable set for no-native css selectors:
@import '~@formanta/sass/selector-no-native';Inspect ignores custom example-page selectors: background blue, grey(s) and title.
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 are classes for the wrappercol-1, col-2,
col-3 till 12 (or otherwise configured) are column classes
col-sm-1, col-md-1, col-lg-1,
col-xl-1, are for responsive column classes in bootstrap naming style
sm-col-1, md-col-1, lg-col-1,
xl-col-1, are for responsive column classes in Basscss naming style
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-s05flex flex-wrap grid-s1flex flex-wrap grid-s2Lorem 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 NonePlease enter a valid value.
Lorem ipsum dolores umbridge.
Lorem ipsum dolores umbridge.
Use the $brand-color variable for changing the accent color.
.some {
height: 100vh
}Lorem ipsum dolor sit amet consectutor adispisci.
| 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. |
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. |
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. |
1 |
$18.00 |
|
|
Grand Total |
4 |
$76.00 |
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |