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 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
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 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 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
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-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
sizes
ml1, ml1-sm, ml1-md, ml1-lg
and for responsive spacingsonly compact overview.
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!