FoxBox

A framework CSS based on Flex box properties

Github

Grid

Usage

Layout

For have a container fluid, you have just replace .container-fix by .container.
.body-container is required for have the scroll on the page and not on the .container-fix or .container 

									
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="FoxBox.css" />
  </head>
  <body>
    <section class="container">
      <header>
        ....
      </header>
      <div class="body-container">
        <article class="container-fix">
          ....
        </article>
     </div>
    </section>
  </body>
</html>

Grid

The grid is cut in 12 parts.
With Flex propertie we can attribuate 2 directions on child's elements, add class .row or .column.
.col-md-* is using for cut the row. Replace * for numbers of part for section

Example

column
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
column
col-md-1
col-md-2
col-md-3
col-md-4
col-md-2
column
col-md-11
col-md-11
row
column
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1

Code 

<div class="column">
	<div class="col-md-1">col-md-1</div>
	<div class="col-md-1">col-md-1</div>
	<div class="col-md-1">col-md-1</div>
	<div class="col-md-1">col-md-1</div>
	<div class="col-md-1">col-md-1</div>
	<div class="col-md-1">col-md-1</div>
	<div class="col-md-1">col-md-1</div>
	<div class="col-md-1">col-md-1</div>
	<div class="col-md-1">col-md-1</div>
	<div class="col-md-1">col-md-1</div>
	<div class="col-md-1">col-md-1</div>
	<div class="col-md-1">col-md-1</div>
</div>
<div class="column">
	<div class="col-md-1">col-md-1</div>
	<div class="col-md-2">col-md-2</div>
	<div class="col-md-3">col-md-3</div>
	<div class="col-md-4">col-md-4</div>
	<div class="col-md-2">col-md-2</div>
</div>
<div class="column">
	<div class="col-md-1">col-md-11</div>
	<div class="col-md-11">
		col-md-11
		<div class="row">
			row
			<div class="column">
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
				<div class="col-md-1">col-md-1</div>
			</div>
		</div>
	</div>
</div>

Example

Link

Code 

								
<button type="button" class="btn btn-default">Default</button>

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-info">Info</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-danger">Danger</button>

<a href="#">Link</a>

Text Center

Example

col-md-4 left
col-md-4 center
col-md-4 right

Code 

								
<div  class="column">
	<div class="col-md-4 left">col-md-4 left</div>
	<div class="col-md-4 center">col-md-4 center</div>
	<div class="col-md-4 right">col-md-4 right</div>
</div>

Vertical align

Example

col-md-3 top
col-md-3 middle
col-md-3 bottom
col-md-3

Code 

								
<div class="column">
	<div class="col-md-3 top">col-md-3 top</div>
	<div class="col-md-3 middle">col-md-3 middle</div>
	<div class="col-md-3 bottom">col-md-3 bottom</div>
	<div class="col-md-3 ">col-md-3 </div>
</div>

Title

Code 

								
<div class="title">
	<h3>
		Title
		<small>
			small
			<a href="#">Link</a>
			<a href="#" class="btn">button</a>
			<a href="#" class="btn btn-primary">button</a>
		</small>
	</h3>
</div>

Nav Bar

Code 

								
<header>
	<nav>
		<ul>
			<li class="nav-brand active">
				<a href="/" title="FoxBox">FoxBox</a>
			</li>
			<li>
				<a href="#grid" title="grid">Grid</a>
			</li>
			<li>
				<a href="#text-center" title="Text Center">Text Center</a>
			</li>
			<li>
				<a href="#vertical-align" title="Vertical Align">Vertical Align</a>
			</li>
			<li>
				<a href="#title" title="Title">Title</a>
			</li>
		</ul>
	</nav>
</header>