Bute Layout

Small flexbox layout system that keeps structure away from styles.

Introduction

Instead of populating class attribute the following data-attributes are used:
data-container, data-grid, data-cell, data-offset, data-order, data-align, data-visibility

This way you can keep your code more readable and use class attribute just for styling things.

Installation

Install via NPM

npm install butelayout

Quick installation CDN

Download production or source files

View on Github

Grid

12 Cell System

12/12
1/12
11/12
10/12
2/12
3/12
9/12
8/12
4/12
5/12
7/12
6/12
6/12 



  

  

  

  

  

  …

Block Grid System

1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12

1/7
1/7
1/7
1/7
1/7
1/7
1/7 



  

  

  …




  

  

  ..

Auto Grid System

auto
auto
auto
auto

auto
auto
auto
auto
auto
auto

Mix Systems

auto (3/12)
2/12
4/12
auto (3/12)

Offsets

offset 3

Nesting

6
12
6
6 



  
…

  

      
…

      
…

      
…

Remove gutters

auto
auto
auto 



  …

Container settings

data-container
data-container
data-container="fluid"
data-container="fluid"

Breakpoints

1
2
3
4
5
6
7
8
9
10
11
12
xs-4 sm-3 md-4 lg-4
xs-4 sm-6 md-6 lg-6
xs-4 sm-3 md-2 lg-2 



  

  

  …

Ordering

Reverse

1st (reversed on large)
2nd (reversed on large)

Pull to first

1st
2nd
3rd
4th (1st on large)

Exact numbering

1st (2nd on large)
2nd (3rd on large)
3rd (4th on large)
4th (1st on large)

Alignment

Horizontal alignment

left
left
center
center
right
right
justify
justify
spaced
spaced 



…




…




…




…




…

Vertical alignment

top
middle
bottom
stretch
stretch 



…




…




…




…

Combine horizontal and vertical

top center
middle right
top justify
top justify
bottom spaced
bottom spaced 



…




…




…




…

Align individual cells

bottom
middle
stretch 



  
…

  
…

  
…

Visibility

hide on xs
hide on sm
hide on md
hide on lg 



  
…

  
…

  
…

  
…
show on xs
show on sm
show on md
show on lg 



  
…

  
…

  
…

  
…
A (sm and lg)
B (xs and md) 



  
A

  
B