A lightweight front-end responsive grid layout

Install

To include all of Flow's folders in your project via npm in the terminal. Download the latest version of Flow with the following command in your terminal line.


$ npm install flux-flow

CDN

If you don't need all of the files you can simply link to the compiled style sheet using this dedicated CDN.


<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/flux-flow/dist/css/fluxflow.min.css"/>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/flux-flow/dist/css/fluxflow.min.css"/>

Download

If you'd rather just downloading the files that you need you can simply download them using the GitHub repo

Get Started

Basic Template

	
<div class="wrapper">
	<div class="container">
		<div class="col col-sm-10 col-md-8 col-lg-6"></div>
		<div class="col col-sm-10 col-md-8 col-lg-6"></div>
		<div class="col col-sm-10 col-md-8 col-lg-6"></div>
	</div>
</div>
	

Basic Template

Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum in accusamus repellendus earum libero? Cumque dolor officiis veritatis ex maiores, debitis in enim reiciendis? Error?


<div class="wrapper">
	<div class="container">
		<div class="col col-sm-10 col-md-8 col-lg-6"></div>
		<div class="col col-sm-10 col-md-8 col-lg-6"></div>
		<div class="col col-sm-10 col-md-8 col-lg-6"></div>
	</div>
</div>

Examples

Wrapper

Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum in accusamus repellendus earum libero? Cumque dolor officiis veritatis ex maiores, debitis in enim reiciendis? Error?

.wrapper
.wrapper-fw

<div class="wrapper">
	<div class="container">
		<div class="col col-sm-10 col-md-8 col-lg-6"></div>
		<div class="col col-sm-10 col-md-8 col-lg-6"></div>
		<div class="col col-sm-10 col-md-8 col-lg-6"></div>
	</div>
</div>

Container

Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum in accusamus repellendus earum libero? Cumque dolor officiis veritatis ex maiores, debitis in enim reiciendis? Error?

.container
.container-fw

<div class="wrapper">
	<div class="container">
		<div class="col col-sm-10 col-md-8 col-lg-6"></div>
		<div class="col col-sm-10 col-md-8 col-lg-6"></div>
		<div class="col col-sm-10 col-md-8 col-lg-6"></div>
	</div>
</div>

Column

Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum in accusamus repellendus earum libero? Cumque dolor officiis veritatis ex maiores, debitis in enim reiciendis? Error?

.col
.col-12
.col-6
.col-4
.col-2

<div class="wrapper">
	<div class="container">
		<div class="col col-sm-10 col-md-8 col-lg-6"></div>
		<div class="col col-sm-10 col-md-8 col-lg-6"></div>
		<div class="col col-sm-10 col-md-8 col-lg-6"></div>
	</div>
</div>

Flow Classes

.wrapper-fw

Wrapper stretches to fill the entire width of the window.

.wrapper

Wrapper width is responsive depending on the window size.

.container-fw

Container stretches to fill the entire width of the wrapper container.

.container

Container width is responsive depending on the window size.

.col

Default column class that will stretch to fill the entire container.

.col-[sm/md/lg/xl]-[]

Column stretches to the number of defined columns once the breakpoint has been reached. e.g. '.col-md-10'.

More tools

superslider

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ornare nulla consectetur vel.

See More

Flow

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ornare nulla consectetur vel.

See More

Coming Soon

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ornare nulla consectetur vel.