Skip to content

Documentation of the CSS Layout Library Flare.css

Notifications You must be signed in to change notification settings

nythrox/Flare.css-Docs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Flare logo

Flare.css

Modern lightweight CSS layout framework for faster and professional web development.

Documentation with Visual Examples »
Português

Documentation

Breakpoints

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){ }

Column

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.

Manual Responsiveness

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.

Automatic Responsiveness

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

Example: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.

Equal Size

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

Row & Flexbox

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.

Block default 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).

Flex default behavior:

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

More Examples

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

Attributes:

Column

container and flexbox

Tags to define column sizes

* = 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 ---

Horizontal Positioning

* = has breakpoints (m- t- c- lg- xl- xxl-)
self group
self-left left
self-right right
first* ---
last* ---
--- center
--- space-around
--- space-between
--- normal
self-mx-auto mx-auto

Vertical Positioning

self group
self-top top
self-bottom bottom
self-middle middle
content-top
content-bottom
content-middle
content-stretch

Column Sizing

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

Tags to put in a container that modify columns

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

Other Attributes

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;

Browser Support

  • Last 2 Versions FF, Chrome, Safari Mac
  • IE 11+
  • Android 4.4+, Chrome for Android 44+
  • iOS Safari 7+
  • Microsoft Edge 12+

About

Documentation of the CSS Layout Library Flare.css

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published