RolleiFLEX

Just a responsive flexbox grid

Download GitHub

The Grid

.col.-size-12@xs
.col.-size-6@xs
.col.-size-6@xs
.col.-size-4@xs
.col.-size-4@xs
.col.-size-4@xs
.col.-size-3@xs
.col.-size-3@xs
.col.-size-3@xs
.col.-size-3@xs
.col.-size-2@xs
.col.-size-2@xs
.col.-size-2@xs
.col.-size-2@xs
.col.-size-2@xs
.col.-size-2@xs
.col.-size-1@xs
.col.-size-1@xs
.col.-size-1@xs
.col.-size-1@xs
.col.-size-1@xs
.col.-size-1@xs
.col.-size-1@xs
.col.-size-1@xs
.col.-size-1@xs
.col.-size-1@xs
.col.-size-1@xs
.col.-size-1@xs

Syntax Example

Rolleiflex was built based on the BEMV methodology. 


	

		--your content--
	

	

		--your other content--

Offsets

You can offset a column!

.col.-offset-11@xs
.col.-offset-10@xs
.col.-offset-9@xs
.col.-offset-8@xs
.col.-offset-7@xs
.col.-offset-6@xs
.col.-offset-5@xs
.col.-offset-4@xs
.col.-offset-3@xs
.col.-offset-2@xs
.col.-offset-1@xs
.col.-offset-0@xs

Nestable

*inception sound*
Please do note that if your sub-row parent is another 'display: flex' element, don't forget to set its width to 100% (or desired width).

I
N
C
E
P
T
I
O
N

Fill Height

Need the column children to its height?

Used on rows

.row.-fill
This one has 120px of height
And this one is supposed to have 60px of height

Used on columns

.col.-fill
This one has 120px of height
WITHOUT .-fill
WITH .-fill

Remove the gutter from a row's columns

.row.-no-gutter@xx
>>>
<<<


Overridable with -with-gutter@xx.

No wrap

row.-no-wrap@xx can be used to remove the rows ability to wrap its child elements

.row.-no-wrap@xx
100% width

.row.-no-wrap@xs
100% width

.row.-no-wrap@xs


Overridable with -with-wrap@xx.

Automatic column sizing

Thanks for the flexibility of... flexboxes, you can use auto column sizing!

.col.-size@xs
.col.-size@xs
.col.-size@xs
.col.-size@xs
.col.-size@xs
.col.-size@xs
.col.-size@xs
.col.-size@xs
.col.-size@xs
.col.-size@xs

Responsive Alignments and Sizes

Used on row elements

.row.-justify-start@xx
.row.-justify-center@xx
.row.-justify-end@xx
.row.-align-start@xx
.row.-align-center@xx
.row.-align-end@xx

Used on elements with 'flex-wrap: wrap'

.row.-content-start@xx
.row.-content-center@xx
.row.-content-end@xx
.row.-content-between@xx
.row.-content-around@xx

Used on column elements

.col.-self-start@xx
.col.-self-start@xs
.col.-self-center@xx
.col.-self-center@xs
.col.-self-end@xx
.col.-self-end@xs

Used on any flex element

.-grow-none@xx
.grow-none@xs
Lorem ipsum dolor sit amet, consectetur adipisicing elit.


You can also use: -shrink-none@xx

.-grow-double@xx
.grow-double@xs
Lorem ipsum dolor sit amet, consectetur adipisicing elit.


You can also use: -shrink-double@xx

Column spacing

You know, when you spent hours trying to equally space everything...

.row.-justify-around@xx
.col.-size-2@xs
.col.-size-4@xs
.col.-size-2@xs
.row.-justify-between@xx
.col.-size-2@xs
.col.-size-4@xs
.col.-size-2@xs

Helpers

Responsive text

.h-text-{left|center|right|justify}@xx
.h-text-center@xs .h-text-left@sm .h-text-right@md

Display flex

.h-display-flex
.
.
.
.


In case you want to use Rolleiflex's flex helpers and don't want to use rows and columns.

Row Ordering

Why not change your html order without changing the markup?

Used on column elements

.col.-at-last@xx
1
.row.-at-last@xs
2
3
4
.col.-at-first@xx
1
2
3
4
.row.-at-first@xs

Row direction

You can change the direction of a row/column at any given breakpoint!

.-dir-row@xx
1
2
3
4


-dir-col@xx is also available.

.-dir-row-reverse@xx
1
2
3
4


-dir-col-reverse@xx is also available.

Stylus

Want to change some default configuration?
Check the 'src/config.styl' or override any 'rolleiflex' attribute inside your own stylus stylesheet.

Note: if you prefer to import the stylus stylesheet, import the 'src/wrapper.styl' and do not forget to call the 'buildRolleiflex(buildGrid: true, buildHelpers: true)' mixin.

rolleiflex.baseFontSize 16px HTML font size, for the use.em option
rolleiflex.autoBorderBox true Set to false if your CSS already has something like * {box-sizing: border-box}



rolleiflex.use.em false Use the em unit instead of px.

Note: media queries em/rem units will ignore your HTML's font-size property, since they're are based on the browser's internal 'font-size' property.



rolleiflex.build.container true Should build the container? True or false.
rolleiflex.build.grid true Should build the grid? True or false.
rolleiflex.build.helpers true Should build the flex and media query helpers? True or false.
rolleiflex.build.responsiveText true Should build the responsive text CSS features? True or False.



rolleiflex.classPrefix "" (none) Defines a prefix for all rolleiflex's classes.



rolleiflex.columns 12 Number of columns in the grid



rolleiflex.spaces.gutter 24px Gutter size
rolleiflex.spaces.containerPadding 12px Container horizontal padding size



rolleiflex.breakpoints.XX.minWidth Window width breakpoint trigger = @media(min-width:xxx)
rolleiflex.breakpoints.XX.container Container max-width

Download

Download GitHub