Skip to content

Latest commit

 

History

History
301 lines (239 loc) · 5.11 KB

03.classes.md

File metadata and controls

301 lines (239 loc) · 5.11 KB

Classes

When you're happy with your custom grid system, Gridle will provide you with multiple types of classes. Here's the list:

Container

The container class is not really needed but it's a best practice to wrap all your rows into it so you can define a max-width for your entire grid at once like so

.container
<body>
	<div class="container">
		<div class="gr">
			...
		</div>
	</div>
</div>

Grid

The grid class is the one that will wrap all your columns/rows.

.gr
<div class="container">
	<div class="gr">
		<div class="col col--6">
			...
		</div>
		<div class="col col--6">
			...
		</div>
	</div>
</div>

Grid align

Gridle allows you to align your grid elements by setting the alignement class on the grid itself like this.

.gr--start
.gr--start@{state}
.gr--middle
.gr--middle@{state}
.gr--end
.gr--end@{state}

<div class="gr gr--middle">
	<div class="col col--4">
		I'm the tallest element in the line
		<br />
		cause of this line
		<br />
		and this one...
		<br />
		and this one...
	</div>
	<div class="col col--4">
		I will be vertically centered cause I'm the smallest
	</div>
	<div class="col col--6">
		I will be also vertically centered cause I'm not so tall...
		<br />
		Even with this line...
	</div>
</div>

Grid flex

This class allows you to set a grid to use flexbox instead of the default grid model. This is used when you want to use the column adapt and grow.

.gr--flex

<div class="gr gr--flex">
	<div class="col col--grow">
		I will grow and take all the available space
	</div>
	<div class="col col--adapt">
		I will take only the place that my content need
	</div>
</div>

Grid wrap/nowrap

This classes are useful to specify on a wrapper that the direct children can or cannot wrap themselves

.gr--wrap
.gr--wrap@{state}
.gr--nowrap
.gr--nowrap@{state}

<div class="gr gr--flex gr--wrap gr--nowrap@tablet">
	<div class="col col--12 col--adapt@tablet">
		<img src="..." />
	</div>
	<div class="col col--12 col--grow@tablet">
		I will grow to take all the remaining space
	</div>
</div>

Grid gutters/no gutter

These classes are used to delete/add gutters on certain grids

.gr--no-gutter
.gr--no-gutter-side
.gr--no-gutter-updown

.gr--gutters
.gr--gutters-side
.gr--gutters-updown

<div class="gr gr--no-gutter">
	<div class="col col--6">
		No gutters
	</div>
	<div class="col col--6">
		No gutters
	</div>
</div>

Columns

These are your actual columns.

.col--{columns-count}
.col--{columns-count}@{state}

<div class="gr">
	<div class="col col--8">
		I make 8 columns width
	</div>
	<div class="col col--4">
		I make 4 columns width
	</div>
</div>

Column adapt/grow

This class allows you to tell a column to adapt his width depending on his content

.col--adapt
.col--adapt@{state}
.col--grow
.col--grow@{state}

<div class="gr gr--flex gr--wrap gr--nowrap@tablet">
	<div class="col col--12 col--adapt@tablet">
		<img src="..." />
	</div>
	<div class="col col--12 col--grow@tablet">
		I will grow to take all the remaining space
	</div>
</div>

Columns start

In order to simulate push and pull, gridle provide a more css grid's way. Here's how:

.col--start-{columns-count}
.col--start-{columns-count}@{state}

<div class="gr">
	<div class="col col--6 col--start-4">
		I will be offseted by 3 columns
	</div>
</div>

Columns height

Gridle provide you a simple way to set a column height that is a multiple of the column and gutter width. Here's how:

col--height-{columns-count}
col--height-{columns-count}@{state}

<div class="gr">
	<div class="col col--6 col--height-6">
		I will be a perfect square
	</div>
</div>

Rows

Before using your actual rows, you'll need to set on your gri item how many rows you want. Here's how:

.gr--rows-{count}
.gr--rows-{count}@{state}

<div class="gr gr--rows-6">
	<div class="col col--4 row row--3 row--start-2">
		I will be 4 columns width and 3 rows height
	</div>
</div>

The you have the actual rows classes.

.row--{rows-count}
.row--{rows-count}@{state}

<div class="gr gr--rows-2">
	<div class="col col--8 row row--2 row--start-1">
		I make 8 columns width and 2 rows height
	</div>
	<div class="col col--4 row row--1 row--start-2">
		I make 4 columns width and 1 rows height
	</div>
</div>

Hide/show

These classes are used to hide, show some elements for certain states (cf. States)

.hide
.show
.show-inline
.hide@{state}
.show@{state}
.show-inline@{state}

<div class="gr">
	<div class="col col--12 hide@tablet">
		I'm not display (display:none) on "tablet" state
	</div>
</div>

Generate custom class

Gridle allows you to generate some classes that are integrated with the gridle states system.

@include g-custom-class( {classname} , {statesNames} )

@include g-custom-class('center') {
	text-align: center;
}

This will generate the classes according the fact that you have the (tablet, desktop) states registered:

.center
.center@tablet
.center@desktop