The Eixample (pronounced ey-sham-pla) is a district in Barcelona, characterized by it's strict grid system of long straight streets and wide avenues. Inspired by our city, this CSS flexbox grid is made with love by Mobile Jazz.
You can get Eixample from GitHub and via NPM or Bower.
Eixample is built using Compass, if you wish to modify the default grid, you'll need it installed locally to recompile the styles.
Eixample is a mobile-first responsive grid, which uses four media queries to create layouts for five screen widths xs sm md lg and xl. These media queries are based on minimum widths and scale up.
// Extra small devices (xs)
// 0px +
// No media query
// Small devices (sm)
// 600px +
@media ( min-width: $breakpoint-sm ) {
}
// Medium devices (md)
// 900px +
@media ( min-width: $breakpoint-md ) {
}
// Large devices (lg)
// 1200px +
@media ( min-width: $breakpoint-lg ) {
}
// Extra large devices (xl)
// 1500px +
@media ( min-width: $breakpoint-xl ) {
}
The width of these breakpoints can be customized in sass/_settings.scss
Containers are used to constrain the width and centralize your content. They are required and set necessary spacing.
The default container will expand up to 1200px wide before centralizing on larger screens. You can customize this width by changing the value of the Sass variable $container-max-width in sass/_settings.scss.
To create a container, use the class .container.
<div class="container"> </div>
A container
There are two additional modifier classes that can be used to change a container's style. You can use these independently, or combine them.
Create a full-width container that expands to any screen size by adding the class .fluid.
<div class="container fluid"> </div>
A full-width, fluid container
Remove a container's internal padding to create an edge-to-edge style by adding the class .edge.
<div class="container edge"> </div>
An edge-to-edge container
Combine both class .fluid and .edge classes to create a full-width, edge to edge container.
<div class="container fluid edge"> </div>
A full-width, edge-to-edge container
Rows are required to group columns and should be direct children of containers.
Rows have a fluid width and will expand up to any size. They feature negative margins to ensure proper placement for both LTR and RTL languages.
To create a row, use the class .row.
<div class="container">
<div class="row">
</div>
</div>
A row inside a container
Columns are used to divide content and should be direct children of rows.
Create a column using the class .column.
<div class="container">
<div class="row">
<div class="column">
</div>
</div>
</div>
A column
Eixample has a traditional 12 column layout, available for each of the five breakpoints. Use the base class .column with a combination of sizes classes: .xs-* .sm-* .md-* .lg-* .xl-* with a column span between *-1 and *-12.
Widths don't have to be set for each breakpoint. If no width is set for .xl-* the width for .lg-* will be used instead. This also applies through .md-* .sm-* and finally .xs-*
<div class="container">
<div class="row">
<div class="column xs-12 sm-6 md-3 lg-2 xl-3">
</div>
<div class="column xs-12 sm-6 md-3 lg-4 xl-3">
</div>
<div class="column xs-6 sm-9 md-3 lg-2">
</div>
<div class="column xs-6 sm-3 md-3 lg-4">
</div>
</div>
</div>
Column xs-12 sm-6 md-3 lg-2 xl-3
Column xs-12 sm-6 md-3 lg-4 xl-3
Column xs-6 sm-9 md-3 lg-2
Column xs-6 sm-3 md-3 lg-4
Column widths are entirely optional. If you don't specify a width, the column will size itself according to its content.
You can also enforce this automatic width for specific breakpoints by setting the size class with *-auto.
<div class="container">
<div class="row">
<div class="column xs-12 sm-6 md-auto">
</div>
<div class="column xs-12 sm-auto md-6">
</div>
</div>
</div>
Column xs-12 sm-6 md-auto
Column xs-12 sm-auto md-6
There are many modifier classes you can apply to rows to alter the behavior and position of the columns they hold.
The .wrap-* classes allow you to control how and when columns should wrap to new lines.
By default, columns wrap from top to bottom. This can also be set by adding the class .wrap-wrap.
<div class="container">
<div class="row">
<div class="column xs-12 sm-6">
</div>
<div class="column xs-12 sm-6">
</div>
<div class="column xs-12 sm-6">
</div>
<div class="column xs-12 sm-6">
</div>
</div>
</div>
Column 1
Column 2
Column 3
Column 4
To reverse the direction of wrapping columns from bottom to top, add the class .wrap-reverse to the row.
<div class="container">
<div class="row wrap-reverse">
<div class="column xs-12 sm-6">
</div>
<div class="column xs-12 sm-6">
</div>
<div class="column xs-12 sm-6">
</div>
<div class="column xs-12 sm-6">
</div>
</div>
</div>
Column 1
Column 2
Column 3
Column 4
To stop columns from wrapping, add the class .wrap-nowrap to the row.
<div class="container">
<div class="row wrap-nowrap">
<div class="column xs-12 sm-6">
</div>
<div class="column xs-12 sm-6">
</div>
<div class="column xs-12 sm-6">
</div>
<div class="column xs-12 sm-6">
</div>
</div>
</div>
Column 1
Column 2
Column 3
Column 4
The .direction-* classes allow you to control the direction of the columns inside a row.
The default direction will be from left-to-right or right-to-left depending on the language direction. This can also be set by adding the class .direction-normal.
<div class="container">
<div class="row direction-normal">
<div class="column xs-12 sm-6 md-3">
</div>
<div class="column xs-12 sm-6 md-3">
</div>
<div class="column xs-12 sm-6 md-3">
</div>
<div class="column xs-12 sm-6 md-3">
</div>
</div>
</div>
Column 1
Column 2
Column 3
Column 4
To reverse the direction of columns, add the class .direction-reverse to the row.
<div class="container">
<div class="row direction-reverse">
<div class="column xs-12 sm-6 md-3">
</div>
<div class="column xs-12 sm-6 md-3">
</div>
<div class="column xs-12 sm-6 md-3">
</div>
<div class="column xs-12 sm-6 md-3">
</div>
</div>
</div>
Column 1
Column 2
Column 3
Column 4
To force columns to wrap down, add the class .direction-down to the row.
<div class="container">
<div class="row direction-down">
<div class="column xs-12 sm-6 md-3">
</div>
<div class="column xs-12 sm-6 md-3">
</div>
<div class="column xs-12 sm-6 md-3">
</div>
<div class="column xs-12 sm-6 md-3">
</div>
</div>
</div>
Column 1
Column 2
Column 3
Column 4
To force columns to wrap up, add the class .direction-up to the row.
<div class="container">
<div class="row direction-up">
<div class="column xs-12 sm-6 md-3">
</div>
<div class="column xs-12 sm-6 md-3">
</div>
<div class="column xs-12 sm-6 md-3">
</div>
<div class="column xs-12 sm-6 md-3">
</div>
</div>
</div>
Column 1
Column 2
Column 3
Column 4
Columns can be horizontally aligned in in various ways with the .align-* classes.
By default, the columns start from the side of the row. This can also be set by adding the class .align-start.
<div class="container">
<div class="row">
<div class="column xs-12 sm-6 md-3">
</div>
<div class="column xs-12 sm-6 md-3">
</div>
</div>
</div>
Column 1
Column 2
Columns can be aligned to the end of the row by adding the class .align-end.
<div class="container">
<div class="row align-end">
<div class="column xs-12 sm-6 md-3">
</div>
<div class="column xs-12 sm-6 md-3">
</div>
</div>
</div>
Column 1
Column 2
Columns can be centrally aligned by adding the class .align-center.
<div class="container">
<div class="row align-center">
<div class="column xs-12 sm-6 md-3">
</div>
<div class="column xs-12 sm-6 md-3">
</div>
</div>
</div>
Column 1
Column 2
Columns can be justified to either side of a row by adding the class .align-justify.
<div class="container">
<div class="row align-justify">
<div class="column xs-12 sm-6 md-3">
</div>
<div class="column xs-12 sm-6 md-3">
</div>
</div>
</div>
Column 1
Column 2
Columns can be equally spaced within the row by adding the class .align-equally.
<div class="container">
<div class="row align-equally">
<div class="column xs-12 sm-6 md-3">
</div>
<div class="column xs-12 sm-6 md-3">
</div>
</div>
</div>
Column 1
Column 2
Columns can be vertically aligned within a row using the .valign-* classes.
By default, the columns start from the top of the row. This can also be set by adding the class .valign-top.
<div class="container">
<div class="row valign-top">
<div class="column xs-12 sm-6 md-3">
</div>
<div class="column xs-12 sm-6 md-3">
</div>
</div>
</div>
Column 1
Column 2
Columns can be aligned to the bottom of the row by adding the class .valign-bottom.
<div class="container">
<div class="row valign-bottom">
<div class="column xs-12 sm-6 md-3">
</div>
<div class="column xs-12 sm-6 md-3">
</div>
</div>
</div>
Column 1
Column 2
Columns can be centrally aligned within the row by adding the class .valign-middle.
<div class="container">
<div class="row valign-middle">
<div class="column xs-12 sm-6 md-3">
</div>
<div class="column xs-12 sm-6 md-3">
</div>
</div>
</div>
Column 1
Column 2
Columns can be aligned to a united baseline by adding the class .valign-baseline.
<div class="container">
<div class="row valign-baseline">
<div class="column xs-12 sm-6 md-3">
</div>
<div class="column xs-12 sm-6 md-3">
</div>
</div>
</div>
Column 1
Column 2
Columns can be stretched to fill the full height of the row by adding the class .valign-stretch.
<div class="container">
<div class="row valign-stretch">
<div class="column xs-12 sm-6 md-3">
</div>
<div class="column xs-12 sm-6 md-3">
</div>
</div>
</div>
Column 1
Column 2
Wrapped columns can be vertically aligned using the .valign-wrapped-* classes.
By default, wrapped columns will be aligned to the top of the row. This can also be set by adding the class .valign-wrapped-top.
<div class="container">
<div class="row valign-wrapped-top">
<div class="column xs-8">
</div>
<div class="column xs-6">
</div>
</div>
</div>
Column 1
Column 2
Wrapped columns can be aligned to the bottom of a row by adding the class .valign-wrapped-bottom.
<div class="container">
<div class="row valign-wrapped-bottom">
<div class="column xs-8">
</div>
<div class="column xs-6">
</div>
</div>
</div>
Column 1
Column 2
Wrapped columns can be vertically aligned to the center of a row by adding the class .valign-wrapped-middle.
<div class="container">
<div class="row valign-wrapped-middle">
<div class="column xs-8">
</div>
<div class="column xs-6">
</div>
</div>
</div>
Column 1
Column 2
Wrapped columns can be stretched to fill the full height of a row by adding the class .valign-wrapped-stretch.
<div class="container">
<div class="row valign-wrapped-stretch">
<div class="column xs-8">
</div>
<div class="column xs-6">
</div>
</div>
</div>
Column 1
Column 2
Wrapped columns can be justified to the top and bottom of a row by adding the class .valign-wrapped-justify.
<div class="container">
<div class="row valign-wrapped-justify">
<div class="column xs-8">
</div>
<div class="column xs-6">
</div>
</div>
</div>
Column 1
Column 2
Wrapped columns can be equally spaced within the row by adding the class .valign-wrapped-equally.
<div class="container">
<div class="row valign-wrapped-equally">
<div class="column xs-8">
</div>
<div class="column xs-6">
</div>
</div>
</div>
Column 1
Column 2
Guttering is added to space columns apart by default. This can be removed by adding the class .gutter-remove to a row.
<div class="container">
<div class="row gutter-remove">
<div class="column xs-12 sm-6">
</div>
<div class="column xs-12 sm-6">
</div>
</div>
</div>
Column 1
Column 2
Groups of columns can be aligned using row modifiers and individual columns can be aligned using the following classes.
Like rows, .valign-* classes can be applied to columns to individually align a single column.
By default, columns start from the top of a row. This can also be set by adding the class .valign-top to the column.
<div class="container">
<div class="row">
<div class="column xs-12 sm-6 md-3">
</div>
<div class="column xs-12 sm-6 md-3 valign-top">
</div>
<div class="column xs-12 sm-6 md-3">
</div>
<div class="column xs-12 sm-6 md-3">
</div>
</div>
</div>
Column 1
Column 2
Column 3
Column 4
To align a single column to the bottom of a row, add the class .valign-bottom.
<div class="container">
<div class="row">
<div class="column xs-12 sm-6 md-3">
</div>
<div class="column xs-12 sm-6 md-3 valign-bottom">
</div>
<div class="column xs-12 sm-6 md-3">
</div>
<div class="column xs-12 sm-6 md-3">
</div>
</div>
</div>
Column 1
Column 2
Column 3
Column 4
To vertically align a single column to the middle of a row, add the class .valign-middle.
<div class="container">
<div class="row">
<div class="column xs-12 sm-6 md-3">
</div>
<div class="column xs-12 sm-6 md-3 valign-middle">
</div>
<div class="column xs-12 sm-6 md-3">
</div>
<div class="column xs-12 sm-6 md-3">
</div>
</div>
</div>
Column 1
Column 2
Column 3
Column 4
To align individual columns to the baseline, add the class .valign-baseline.
<div class="container">
<div class="row">
<div class="column xs-12 sm-6 md-3 valign-baseline">
</div>
<div class="column xs-12 sm-6 md-3 valign-baseline">
</div>
<div class="column xs-12 sm-6 md-3 valign-baseline">
</div>
<div class="column xs-12 sm-6 md-3">
</div>
</div>
</div>
Column 1
Column 2
Column 3
Column 4
To stretch a single column to the full height of the row, add the class .valign-stretch.
<div class="container">
<div class="row">
<div class="column xs-12 sm-6 md-3">
</div>
<div class="column xs-12 sm-6 md-3 valign-stretch">
</div>
<div class="column xs-12 sm-6 md-3">
</div>
<div class="column xs-12 sm-6 md-3">
</div>
</div>
</div>
Column 1
Column 2
Column 3
Column 4
Display classes are column modifiers to show/hide columns on specific screen sizes.
Combine the .*-hide class with .xs-* .sm-* .md-* .lg-* .xl-* to hide an inidivual column at that screen size. It will be shown on all other screen sizes.
<div class="container">
<div class="row">
<div class="column xs-hide">
</div>
<div class="column sm-hide">
</div>
<div class="column md-hide">
</div>
<div class="column lg-hide">
</div>
<div class="column xl-hide">
</div>
</div>
</div>
Hide on extra small screens
Hide on small screens
Hide on medium screens
Hide on large screens
Hide on extra large screens
Combine the .*-show class with .xs-* .sm-* .md-* .lg-* .xl-* to display a column only on that screen size. It will be hidden on all other screen sizes.
<div class="container">
<div class="row">
<div class="column xs-show">
</div>
<div class="column sm-show">
</div>
<div class="column md-show">
</div>
<div class="column lg-show">
</div>
<div class="column xl-show">
</div>
</div>
</div>
Show on extra small screens
Show on small screens
Show on medium screens
Show on large screens
Show on extra large screens