flexbox-grid-mixins
Version:
Sass Mixins to generate Flexbox grid
269 lines (233 loc) • 3.82 kB
HTML
<html>
<head>
<title>Box Sizing - Flexbox Grid Mixins</title>
<link rel="stylesheet" href="../css/default.css">
<link rel="stylesheet" href="../css/box-sizing.css">
</head>
<body>
<div class="header">
<h1 class="header-title">Flexbox Grid Mixins</h1>
<p class="header-description">Sass Mixins to generate Flexbox grid</p>
</div>
<div class="container">
<h2>Box Sizing using Default Values</h2>
<h3>Default (Default Values as border-box)</h3>
<div class="grid--default">
<div class="grid__col-12">
12
</div>
</div>
<div class="grid--default">
<div class="grid__col-1">
1
</div>
<div class="grid__col-11">
11
</div>
</div>
<div class="grid--default">
<div class="grid__col-2">
2
</div>
<div class="grid__col-10">
10
</div>
</div>
<div class="grid--default">
<div class="grid__col-3">
3
</div>
<div class="grid__col-9">
9
</div>
</div>
<div class="grid--default">
<div class="grid__col-4">
4
</div>
<div class="grid__col-8">
8
</div>
</div>
<div class="grid--default">
<div class="grid__col-5">
5
</div>
<div class="grid__col-7">
7
</div>
</div>
<div class="grid--default">
<div class="grid__col-6">
6
</div>
<div class="grid__col-6">
6
</div>
</div>
<h3>$flexbox-grid-mixins-box-sizing: border-box;</h3>
<div class="grid--border-box">
<div class="grid__col-12">
12
</div>
</div>
<div class="grid--border-box">
<div class="grid__col-1">
1
</div>
<div class="grid__col-11">
11
</div>
</div>
<div class="grid--border-box">
<div class="grid__col-2">
2
</div>
<div class="grid__col-10">
10
</div>
</div>
<div class="grid--border-box">
<div class="grid__col-3">
3
</div>
<div class="grid__col-9">
9
</div>
</div>
<div class="grid--border-box">
<div class="grid__col-4">
4
</div>
<div class="grid__col-8">
8
</div>
</div>
<div class="grid--border-box">
<div class="grid__col-5">
5
</div>
<div class="grid__col-7">
7
</div>
</div>
<div class="grid--border-box">
<div class="grid__col-6">
6
</div>
<div class="grid__col-6">
6
</div>
</div>
<h3>$flexbox-grid-mixins-box-sizing: content-box;</h3>
<div class="grid--content-box">
<div class="grid__col-12">
12
</div>
</div>
<div class="grid--content-box">
<div class="grid__col-1">
1
</div>
<div class="grid__col-11">
11
</div>
</div>
<div class="grid--content-box">
<div class="grid__col-2">
2
</div>
<div class="grid__col-10">
10
</div>
</div>
<div class="grid--content-box">
<div class="grid__col-3">
3
</div>
<div class="grid__col-9">
9
</div>
</div>
<div class="grid--content-box">
<div class="grid__col-4">
4
</div>
<div class="grid__col-8">
8
</div>
</div>
<div class="grid--content-box">
<div class="grid__col-5">
5
</div>
<div class="grid__col-7">
7
</div>
</div>
<div class="grid--content-box">
<div class="grid__col-6">
6
</div>
<div class="grid__col-6">
6
</div>
</div>
<h3>$flexbox-grid-mixins-box-sizing: null; (Not output box-sizing property. Usually the initial box size value as content-box)</h3>
<div class="grid--null">
<div class="grid__col-12">
12
</div>
</div>
<div class="grid--null">
<div class="grid__col-1">
1
</div>
<div class="grid__col-11">
11
</div>
</div>
<div class="grid--null">
<div class="grid__col-2">
2
</div>
<div class="grid__col-10">
10
</div>
</div>
<div class="grid--null">
<div class="grid__col-3">
3
</div>
<div class="grid__col-9">
9
</div>
</div>
<div class="grid--null">
<div class="grid__col-4">
4
</div>
<div class="grid__col-8">
8
</div>
</div>
<div class="grid--null">
<div class="grid__col-5">
5
</div>
<div class="grid__col-7">
7
</div>
</div>
<div class="grid--null">
<div class="grid__col-6">
6
</div>
<div class="grid__col-6">
6
</div>
</div>
</div>
</body>
</html>