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/sassCheckout the repository for quick start, issues and source code.
Inspect ignores custom example-page selectors: background blue, grey(s) and title.
Example Colors:
standard theme contrast theme dark theme dark contrast themedemo styles source folder
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 NoneColored 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
Please enter a valid value.
Lorem ipsum dolores umbridge.
Lorem ipsum dolores umbridge.
Use the $color-primary variable to change the accent color.
.some {
height: 100vh
}| 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 |
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
| # | First | Last | Handle | Tweets |
|---|---|---|---|---|
| 1 | Mark | Otto | @mdo | 12 |
| 2 | Jacob | Thornton | @fat | 56 |
| 3 | Larry | the Bird | 150 |
Lorem ipsum dolor sit amet consectutor adispisci.
Lorem ipsum dolor sit amet consectutor adispisci.
Lorem ipsum dolor sit amet consectutor adispisci.
Lorem ipsum dolor sit amet consectutor adispisci.
Lorem ipsum dolor sit amet consectutor adispisci.
Lorem ipsum dolor sit amet consectutor adispisci.
Lorem ipsum dolor sit amet consectutor adispisci.
Lorem ipsum dolor sit amet consectutor adispisci.
working with .panel and either a tags or any tag with the attribute tabindex=* (but not on tabindex="-1"):
Lorem ipsum dolor sit amet consectutor adispisci.
Lorem ipsum dolor sit amet consectutor adispisci.
Lorem ipsum dolor sit amet consectutor adispisci.
Lorem ipsum dolor sit amet consectutor adispisci.
Lorem ipsum dolor sit amet consectutor adispisci.
Lorem ipsum dolor sit amet consectutor adispisci.
Lorem ipsum dolor sit amet consectutor adispisci.
Lorem ipsum dolor sit amet consectutor adispisci.
Lorem ipsum dolor sit amet consectutor adispisci.
Lorem ipsum dolor sit amet consectutor adispisci.
Success Message
Lorem ipsum dolor sit amet.
Info Message
Lorem ipsum dolor sit amet.
Warning Message
Lorem ipsum dolor sit amet.
Danger Message
Lorem ipsum dolor sit amet.
Success Message
Lorem ipsum dolor sit amet.
Info Message
Lorem ipsum dolor sit amet.
Warning Message
Lorem ipsum dolor sit amet.
Danger Message
Lorem ipsum dolor sit amet.
Requires some JS to work, not included in the formanta/sass package, see this GitHub Gist.
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.
Hover for more infoawesome!
Hover on this partawesome! for more info!
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 wrappercol-1, col-2, col-3 till 12 (or otherwise configured) for column sizingcol-sm-1, col-md-1, col-lg-1, col-xl-1 for responsive column classes in bootstrap naming stylesm-col-1, md-col-1, lg-col-1, xl-col-1 for responsive column classes in Basscss naming styleNested 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-s05flex flex-wrap grid-s1flex flex-wrap grid-s2flex flex-wrap grid-s3m* 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-axismy*, py* = margins and paddings on y-axismt*, pt* = margins and paddings on top sidemr*, pr* = margins and paddings on right sidemb*, pb* = margins and paddings on bottom sideml*, pl* = margins and paddings on left sidemxa, mla, mra = margin auto on different sidesml0, ml05, ml1, ml2, ml3, ml4, ml5 = margin-left for all configured $spacings-def sizesml1, ml1-sm, ml1-md, ml1-lg and for responsive spacingsonly compact overview.