Flexbox as CSS classes with media query breakpoints. A library for flexbox users.
- Installation
- Media Breakpoints
- Classes and Rulesets
- Example
- Customization
- Install with Bower:
bower install eureka-flexbox --save
- Install with Npm:
npm install eureka-flexbox --save
Eureka-Flexbox uses a mobile-first approach so its media queries use min-width instead of max-width. There is support for four media breakpoints and, just like any other css library, by prefixing the classname with the desired breakpoint and a hyphen the work is done. Available media breakpoints are:
- Extra Small (xs: 480px)
- Small (sm: 768px)
- Medium (md: 992px)
- Large (lg: 1200px)
The library keeps things simple: ---One class translates to one property---
The available classes with their rulesets are:
- flex { display: flex; }
- block { display: flex; }
- inline { display: inline-flex; }
- direction-row { flex-direction: row; }
- direction-row-reverse { flex-direction: row-reverse; }
- direction-column { flex-direction: column; }
- direction-column-reverse { flex-direction: column-reverse; }
- nowrap { flex-wrap: nowrap; }
- wrap { flex-wrap: wrap; }
- wrap-reverse { flex-wrap: wrap-reverse; }
- justify-start { justify-content: flex-start; }
- justify-end { justify-content: flex-end; }
- justify-center { justify-content: center; }
- justify-between { justify-content: space-between; }
- justify-around { justify-content: space-around; }
- items-start { align-items: flex-start; }
- items-end { align-items: flex-end; }
- items-stretch { align-items: stretch; }
- items-center { align-items: center; }
- items-baseline { align-items: baseline; }
- content-start { align-content: flex-start; }
- content-end { align-content: flex-end; }
- content-stretch { align-content: stretch; }
- content-center { align-content: center; }
- content-between { align-content: space-between; }
- content-around { align-content: space-around; }
- self-start { align-self: flex-start; }
- self-end { align-self: flex-end; }
- self-stretch { align-self: stretch; }
- self-center { align-self: center; }
- self-baseline { align-self: baseline }
NOTE: block
is used only with a breakpoint prefix and does not exists as a standalone class because flex
already applies the same ruleset.
Naturally, to use any of the available classes, the flex
class MUST be present in the element because it applies the flex
display. Also flex
never uses breakpoints prefixes.
<div class="flex wrap justify-center xs-justify-start sm-justify-end md-justify-between lg-justify-around"></div>
The previous div
element will display as a flex container, will wrap its child elements, and:
- Initially, will arrange its children to be placed at the center of the container (self)
- When 480px width (xs) is reached, the children will be placed at the start of the container
- When 768px width (sm) is reached, the children will be placed at the end of the container
- When 992px width (md) is reached, the children will be placed to occupy the whole available container space (without changing their widths)
- When 1200px width (lg) is reached, the children will be distributed equally within the available container space (without changing their widths)
Eureka-Flexbox is written in LESS. The code itself is perfectly aligned to facilitate the text modification.
The media breakpoint declarations are as follows:
@01: xs-;
@02: sm-;
@03: md-;
@04: lg-;
@xs-breakpoint: 480px;
@sm-breakpoint: 768px;
@md-breakpoint: 992px;
@lg-breakpoint: 1200px;
So, it must be straightforward to customize that stuff. Just make sure to:
- Match the breakpoint variable name prefix with the corresponding value of the variable containing the prefix.
- Invoke accordingly the
.mixin
and.block
mixins to match the names of the variables that contain the prefixes values
.mixin(@01);
.mixin(@02);
.mixin(@03);
.mixin(@04);
.block(@01);
.block(@02);
.block(@03);
.block(@04);