Modern lightweight CSS layout framework for faster and professional web development.
Documentation with Visual Examples »
Português
the breakpoints are:
- m (mobile)
- t (tablet)
- c (computer)
- lg
- xl
- xxl
@media(max-width:768px) {
}
@media(min-width:768px) and (max-width:900px){
}
@media(min-width:901px) and (max-width:1149px){
}
@media(min-width:1150px) and (max-width:1649px){
}
@media(min-width:1650px) and (max-width:2999px){
}
@media(min-width:3000px){
}
A column can have a size of one to sixteen, *one* being 6.25% of the container, *eight* being 50%, *sixteen* being 100% and so on.
You define the sizes of the columns on each device by using the tags m (mobile), t (tablet), c (computer). [breakpoint]-(one..sixteen)
For each breakpoint you choose, the size you set counts for the breakpoint and up. Example: t-ten
will mean the column will have size 10 on tablets and up.
When giving a column a certain size column eight
, you tell flare that you want it's size to be eight (half) at a computer screen, and flare will handle responsiveness on tablet and mobile.
If you dont like the result on a certain screen size, you can always add a extra modifier column eight t‑twelve
‑ Flare will handle on mobile, but on tablet it will have the size of twelve
column four
The column will have a size of four on computer and on the other sizes flare will handle it. column four t-three
The column will have a size of four on computer, on tablet only it will have a size of three and on other sizes flare will handle it.
To combine automatic with manual responsiveness, you can choose automatic responsiveness and then overwrite it on specific breakpoints.
column eight t-eight
means that flare will handle responsiveness on all devices except tablets, where the column will take the size of eight.
When using breakpoints in combination with automatic responsiveness, breakpoints no longer count for themselves and up, they count only for themselves. Example: column twelve t-sixteen
instead of t-sixteen counting for tablet and up, it will only give the column size 16 at tablet.
You can also set the sizes of columns by adding equal-size-[one..sixteen] to its container. It means that all columns inside of the container will have the size of [one...sixteen] unless overwritten on the column tag.
Equal Size can have breakpoints (manual) or it can be used without breakpoints (automatic responsiveness).
Automatic Responsiveness (three columns per line on computer and flare handles the size on other screens)
<div class="container equal-three">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
Manual Responsiveness (three columns per line on size mobile and up)
<div class="container m-equal-three">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
Using the tag column
is not obligatory, but it's ideal for easy CSS targeting. You can change it for any name you like, just keep it consistant!
Main sizing tags for columns: number*, equal-number*, equal*
Main alignment tags for columns: first*, last*, self-left, self-right, self-top, self-bottom, self-middle, stretch, grow, shrink
- = has breakpoints (m- t- c- lg- xl- xxl-), if using not using breakpoint then flare handles its responsiveness
Rows & Flexboxes are used to set items side by side.
You can add a size to the row to limit the total size of the content, centralizing it in the screen.
Inside of rows, columns behave with a block behavior.
Inside of flexbox, columns behave with a flex behavior.
Collumns will have defined sizes that will not grow (nogrow).Columns in a line not have the same vertical size (nostretch).
Columns overflowing will jump to the next line (multiline).
Collumns are sized acording to the size of their content (auto).
Columns in a line have the same vertical size (stretch).
Columns will grow to fill all empty space (grow).
Columns will shrink to fit in one line (singleline).
All default behaviors can be overwritten with tags (grow, shrink, multiline, auto, number, equal, etc...)
Container Sizes: container, fluid, small, medium, size-number*
Overwrite behavior tags: grow, stretch, shrink, singleline, multiline, size-number*, equal*, equal-number*
- = has breakpoints (m- t- c- lg- xl- xxl-), if using not using breakpoint then flare handles its responsiveness
A row + container whos columns have the size of one third on computer and on other screens flare handles sizes
<div class="row container equal-three">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
A row + container whos columns have the size of one third on tablet and up, and the first column has a size of 100% on tablet and up
<div class="row container t-equal-three">
<div class="column t-sixteen"></div>
<div class="column"></div>
<div class="column"></div>
</div>
A row + container whos columns have the size of one fourth on computer and flare will handle responsiveness on other screens (equal-three), but the columns will be forced have the size of third of width on tablet (t-equal-three), and the first column will have a size of 100% on tablet (t-sixteen)
<div class="row container equal-four t-equal-three">
<div class="column t-sixteen"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
A few pages made with Flare to show how it can be used.
Yard
Stay & Ski
WineProtec
Landing Page
Column
container and flexbox
* = has breakpoints (m- t- c- lg- xl- xxl-)self positive | self negative | group positive | group negative |
---|---|---|---|
self-grow | self-nogrow | grow | nogrow |
self-stretch | self-nostretch | stretch | nostretch |
self-shrink | self-noshrink | shrink | noshrink |
self-fill | --- | fill | --- |
self-auto | --- | auto | --- |
self | group |
---|---|
self-left | left |
self-right | right |
first* | --- |
last* | --- |
--- | center |
--- | space-around |
--- | space-between |
--- | normal |
self-mx-auto | mx-auto |
self | group |
---|---|
self-top | top |
self-bottom | bottom |
self-middle | middle |
content-top | |
content-bottom | |
content-middle | |
content-stretch |
tag | description |
---|---|
number* | column size on * breakpoint. number can be any value from one to sixteen |
title | always 100% width |
break* | breaks the line |
self-no-gutter | will have no gutter |
tag | description |
---|---|
equal-number* | number of columns on * breakpoint inside this row. number can be any value from one to twelve |
flexbox | columns inside thsi row will behave with flex behavior |
equal* | columns inside this row will all have an equal width |
no-gutter | columns inside this row will have no gutter |
all-center | text-center, columns centered vertically and horizontaly |
items-centralized | columns centered vertically and horizontaly |
content-centralized | content centered vertically and horizontaly |
Row and Flexbox attributes:
tag | description |
---|---|
row | columns inside this row will have default block behavior |
flexbox | columns inside this flexbox will have default flex behavior |
container, fluid, small, medium | different sized containers |
size-number* | defines the size of the container. number can be any value from one to sixteen |
singleline* | on * breakpoint, row will be a single line |
multiline* | flexbox can have multiple lines |
fullheight | will have a 100vh height |
nomax | will have no max width |
tag | description |
---|---|
text-center* | on * brekapoint text will be centralized |
hide* | on * breakpoint the item will be hidden |
relative | will have position:relative |
absolute | will have position:absolute |
cover | left:0; right:0; top:0; bottom:0; |
- Last 2 Versions FF, Chrome, Safari Mac
- IE 11+
- Android 4.4+, Chrome for Android 44+
- iOS Safari 7+
- Microsoft Edge 12+