CSS Responsive Layout Framework

Grid System

Overview

We create a 24-column and fully responsive grid system with wrapping containers, grids, responsive utility and typical layouts with a lot of predefined classes, which could help you implement most kind of layouts (if not all). It's built with flexbox, which support IE 10+. Therefore, you are at the right place if you are looking for a responsive grid system for modern browsers.

If you are unfimiliar with flexbox, read through flex on MDN first.

The media query breakpoints is based on the research on WebDimensions, which statistic most of the devices world wide. We set media breakpoints as follows.

	Extra small	Small	Medium	Large	Extra large
Label	xs	sm	md	lg	xl
Media breakpoints	min-width: 0	min-width: 768px	min-width: 992px	min-width: 1264px	min-width: 1580px

Containers

We provide fixed-width and fluid-width containers. Fixed-width container has a restrict width with max-width, which changes according to media breakpoints. Fluid-width container-fluid will keep 100% wide on all devices. We add 20px padding on containers, which could be overwritten by custom classes. Even sometimes you may find out you don't need a container since row takes up 100% wide of its parent.

	Extra small	Small	Medium	Large	Extra large
Media breakpoints	min-width: 0	min-width: 768px	min-width: 992px	min-width: 1264px	min-width: 1580px
Container max-width	none	740px	960px	1180px	1480px

container

container-fluid

<div class="container flex basic-row">
	<div class="xs">
		<div class="block--blue">container</div>
	</div>
</div>
<div class="container-fluid flex basic-row">
	<div class="xs">
		<div class="block--green">container-fluid</div>
	</div>
</div>

Be aware that nesting container or container-fluid doesn't work.

Grids

We build up the grid system with flexbox, which makes the grids flexible and magical. In the grid system, flex container and item are the two basic components. By default, the flex container justify flex items at the start in horizontal direction and wrap flex items to the newline if overflow.

We provide three kinds of flex items:

xs sm md lg xl: flex item that auto grows and shrinks.
xs-fit sm-fit md-fit lg-fix xl-fit: flex item that just fit its content without growing and shrinking. You could set width for the flex item.
xs-*[1,24] sm-*[1,24] md-*[1,24] lg-*[1,24] xl-*[1,24]: flex item with fixed width in percentage.

xs-fit

xs-fit with 300px width

xs-12

<div class="flex basic-row">
	<div class="xs">
		<div class="block--blue">xs</div>
	</div>
	<div class="xs">
		<div class="block--green">xs</div>
	</div>
</div>
<div class="flex basic-row">
	<div class="xs-fit">
		<div class="block--green">xs-fit</div>
	</div>
	<div class="xs-fit" style="width: 300px">
		<div class="block--blue">xs-fit with 300px width</div>
	</div>
</div>
<div class="flex basic-row">
	<div class="xs-12">
		<div class="block--blue">xs-12</div>
	</div>
	<div class="xs-12">
		<div class="block--green">xs-12</div>
	</div>
</div>

xs must be the direct child of flex, similar to flex container and flex item.

xs will take up equally distributed space in flex, but they will auto self-adjust when adding or removing sibling items.

xs-fit could make the item fit the content precisely, which will not take up any extra space. You could set width to col-fit such that it will take up fixed-width space. If no width provided, xs-fit will grow and shrink with the content.

xs-*[1,24] set the flex item to fixed width in percentage.

xs-offset-* are adjust item offset to the left. When using xs-offset-*, you must not set margin in CSS, since they are implemented with margin and will be overwritten.

We recommend that you should seperate layouting from your content, so be careful if you change layouting style on flex and xs directly.

Responsive layout

Responsiveness allow you to implement different layouts for multiple devices, as grids will auto adjust according to media query. Technically we follow the mobile first design pattern in responsive implementation, which means the layout for larger devices will overwrite the one for smallers.

xs-12 sm-8 md-16 lg-12 xl-8

xs-12 sm-16 md-8 lg-12 xl-16

<div class="flex basic-row">
	<div class="xs-12 sm-8 md-16 lg-12 xl-8">
		<div class="block--blue">
			xs-12 sm-8 md-16 lg-12 xl-8
		</div>
	</div>
	<div class="xs-12 sm-16 md-8 lg-12 xl-16">
		<div class="block--green">
			xs-12 sm-16 md-8 lg-12 xl-16
		</div>
	</div>
</div>

Responsive item are designed from small devices and up, e.g., xs-24 occupy 24 grids on extra small devices and up, sm-20 will overwrite the width on small devices and up, and so on. Combining different responsive column classes is a common and effective solution in responsive web.

Gutter

Gutter could be implemented with spacing util class, but we must add negative margin to compensate for the padding of first and last flex items.

lg gutter

<div class="flex basic-row mx-lg-n20">
	<div class="lg px-lg-20">
		<div class="block--blue">lg gutter</div>
	</div>
	<div class="lg px-lg-20">
		<div class="block--blue">lg gutter</div>
	</div>
</div>

If gutter causes overflow and the scrollbar shows up in some browsers, add a wrapper <div class="overflow-x-hidden"><div> to fix it.

Nested Layout

Nested layout is also another basic usage in web development. You could nest flex and xs to any level deep, but be awera that do not nested containers.

outer layout

outer grid

inner layout

inner grid

<div class="flex basic-row block--bordered">
	<div class="xs-24">
		outer layout
	</div>
	<div class="xs-24 flex">
		<div class="xs">
			<div class="block--green">outer grid</div>
		</div>
		<div class="xs flex basic-row block--bordered">
			<div class="xs-24">
				inner layout
			</div>
				<div class="xs-24 flex">
					<div class="xs">
						<div class="block--blue">inner grid</div>
					</div>
					<div class="xs">
						<div class="block--green">inner grid</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Notice that an element could be a flex item and a flex container meanwhile.

Mixed grids

Feel free to mix three kinds of flex items in flex container, e.g. mix xs-*[1-24] with xs, mix xs-*[1-24] with xs-fit, mix xs with xs-fit

xs-8

xs-fit

<div class="flex basic-row">
	<div class="xs-8">
		<div class="block--blue">xs-8</div>
	</div>
	<div class="xs">
		<div class="block--green">xs</div>
	</div>
</div>
<div class="flex basic-row">
	<div class="xs-8">
		<div class="block--blue">xs-8</div>
	</div>
	<div class="xs-fit">
		<div class="block--green">xs-fit</div>
	</div>
</div>
<div class="flex basic-row">
	<div class="xs">
		<div class="block--blue">xs</div>
	</div>
	<div class="xs-fit">
		<div class="block--green">xs-fit</div>
	</div>
</div>

Perhaps mixed grids will solve your layouting issues sometimes.

Direction

We provide utility classes to change flexbox direction.

row: set the direction to horizontal
column: change the direction to vertical
reverse: change the direction to reverse(horizontally or vertically)

By default flex direction is row

xs-4

xs-8

Change flex direction to column

xs-4

xs-8

Change flex direction to row-reverse

xs-4

xs-8

Change flex direction to column-reverse

xs-4

xs-8

<p>By default flex direction is row</p>
<div class="flex basic-row column">
	<div class="xs-4">
		<div class="block--blue">xs-4</div>
	</div>
	<div class="xs-8">
		<div class="block--green">xs-8</div>
	</div>
</div>
<p>Change flex direction to column</p>
<div class="flex basic-row column">
	<div class="xs-4">
		<div class="block--blue">xs-4</div>
	</div>
	<div class="xs-8">
		<div class="block--green">xs-8</div>
	</div>
</div>
<p>Change flex direction to row-reverse</p>
<div class="flex basic-row row reverse">
	<div class="xs-4">
		<div class="block--blue">xs-4</div>
	</div>
	<div class="xs-8">
		<div class="block--green">xs-8</div>
	</div>
</div>
<p>Change flex direction to column-reverse</p>
<div class="flex basic-row column reverse">
	<div class="xs-4">
		<div class="block--blue">xs-4</div>
	</div>
	<div class="xs-8">
		<div class="block--green">xs-8</div>
	</div>
</div>

row column reverse must be applied to flex, otherwise they will not work.

column will not work in IE, as explained in flexbugs #14. Besides there are some other bugs related to flex-direction: column. Our suggestion is do not use column if your website supports IE.

Wrapping

We provide utility classes for wrapping flex items. By defualt flex will wrap flex items to newline if overflowing. You could add no-wrap if neccesary.

wrap: wrap the columns when overflowing
no-wrap: unwrap the columns when overflowing

flex wrap

xs-16

xs-20

flex no-wrap

xs-16

xs-20

<p>flex wrap</p>
<div class="flex basic-row">
	<div class="xs-16">
		<div class="block--blue">xs-16</div>
	</div>
	<div class="xs-20">
		<div class="block--green">xs-20</div>
	</div>
</div>
<p>flex no-wrap</p>
<div class="flex basic-row no-wrap" style="overflow: hidden">
	<div class="xs-16">
		<div class="block--blue">xs-16</div>
	</div>
	<div class="xs-20">
		<div class="block--green">xs-20</div>
	</div>
</div>

no-wrap must be added to flex.

Alignment

We provide utility classes for alignment flex items. By default flex items are aligned at the start in the main and cross aixs

justify-content-start: align items at the start in main axis
justify-content-center: align items at the center in main axis
justify-content-end: align items at the end in main axis
justify-content-between: align items with space-between in main axis
justify-content-around: justify columns with space-around
align-items-start: align items at flex start in cross axis
align-items-center: align items at the ceter in cross axis
align-items-end: align items at the end in cross axis
align-self-start: align itself at the start in the cross axis
align-self-center: align itself at the center in the cross axis
align-self-end: align itself at the end in the cross axis

justify content at the start

xs-4

justify content at the center

xs-4

justify content at the end

xs-4

justify content space-between

xs-4

justify content space-around

xs-4

align items start

xs-4

align items center

xs-4

align items end

xs-4

<p>justify content at the start</p>
<div class="flex basic-row justify-content-start">
	<div class="xs-4">
		<div class="block--blue">xs-4</div>
	</div>
	<div class="xs-4">
		<div class="block--green">xs-4</div>
	</div>
</div>
<p>justify content at the center</p>
<div class="flex basic-row justify-content-center">
	<div class="xs-4">
		<div class="block--blue">xs-4</div>
	</div>
	<div class="xs-4">
		<div class="block--green">xs-4</div>
	</div>
</div>
<p>justify content at the end</p>
<div class="flex basic-row justify-content-end">
	<div class="xs-4">
		<div class="block--blue">xs-4</div>
	</div>
	<div class="xs-4">
		<div class="block--green">xs-4</div>
	</div>
</div>
<p>justify content space-between</p>
<div class="flex basic-row justify-content-between">
	<div class="xs-4">
		<div class="block--blue">xs-4</div>
	</div>
	<div class="xs-4">
		<div class="block--green">xs-4</div>
	</div>
</div>
<p>justify content space-around</p>
<div class="flex basic-row justify-content-around">
	<div class="xs-4">
		<div class="block--blue">xs-4</div>
	</div>
	<div class="xs-4">
		<div class="block--green">xs-4</div>
	</div>
</div>
<p>align items start</p>
<div class="flex basic-row align-items-start" style="height: 100px">
	<div class="xs-4">
		<div class="block--blue" style="height: 40px">xs-4</div>
	</div>
	<div class="xs-4">
		<div class="block--green" style="height: 60px">xs-4</div>
	</div>
</div>
<p>align items center</p>
<div class="flex basic-row align-items-center" style="height: 100px">
	<div class="xs-4">
		<div class="block--blue" style="height: 40px">xs-4</div>
	</div>
	<div class="xs-4">
		<div class="block--green" style="height: 60px">xs-4</div>
	</div>
</div>
<p>align items end</p>
<div class="flex basic-row align-items-end" style="height: 100px">
	<div class="xs-4">
		<div class="block--blue" style="height: 40px">xs-4</div>
	</div>
	<div class="xs-4">
		<div class="block--green" style="height: 60px">xs-4</div>
	</div>
</div>

these classes should be along with flex.

Spacing

We also provide spacing classes for slight adjustment, including margin and padding. We find them helpful though it's easy to implement. These classes will be applied in the format ${property}${direction}-${label}-${value}.

property types:

m: margin
p: padding

direction types:

a: all
x: left and right
y top and bottom
t: top
b: bottom
l: left
r: right

label types:

xs
sm
md
lg
xl

values: auto 0 2 5 10 15 20 25 30 40 50.

xs-8 mx-xs-auto

xs-8 ma-xs-20

xs-8 px-xs-20

ma-xs-10 will apply margin: 10px for the content on small devices and up while px-10 will apply padding-left: 10px and padding-right: 10px.

As demonstrated in flexbugs #15, there are bugs for my-xs-auto and ma-xs-auto in cross axis in IE. If you need align-center, use align-items-center instead of my-auto.

In reality, try to avoid applying margin-top, because it will lead to unpredictable layout. Instead, apply margin-bottom.

Hidden

Classes for hidding content. hidden will hide the content for all devices and hidden-xx will hide the content when media query meets the viewport dimension.

hidden
hidden-xs-only
hidden-sm-only
hidden-sm-down
hidden-sm-up
hidden-md-only
hidden-md-down
hidden-md-up
hidden-lg-only
hidden-lg-down
hidden-lg-up
hidden-xl-only

Overflow

Classes for overflow

overflow-hidden: overflow: hidden
overflow-x-hidden: overflow-x: hidden
overflow-y-hidden: overflow-y: hidden

Symmetric Layout For Arabic Websites

For Arabic websites, flexbox will reverse the layout and content symetrically. We also provide symmetric layout class e.g. offset-ar-*-* such that the layout does not break down. But avoid to apply ml-*-* and mr-*-* if your website serve content for Arabic countries.

Browser Compatibility

Chrome, Firefox, Safari, IE10+, Edge

There are still some bugs for IE & Safari, as they are explained and demonstrated in flexbugs. We are still working on them.