flexbox-grid-mixins
Version:
Sass Mixins to generate Flexbox grid
273 lines (235 loc) • 4 kB
HTML
<html>
<head>
<title>Grid Type - Flexbox Grid Mixins</title>
<link rel="stylesheet" href="../css-dart-sass/default.css">
<link rel="stylesheet" href="../css-dart-sass/grid-type-skeleton.css">
<link rel="stylesheet" href="../css-dart-sass/grid-type-margin-offset.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>Grid Type</h2>
<h3>skeleton</h3>
<div class="grid">
<div class="grid__col-12">
12
</div>
</div>
<div class="grid">
<div class="grid__col-1">
1
</div>
<div class="grid__col-11">
11
</div>
</div>
<div class="grid">
<div class="grid__col-2">
2
</div>
<div class="grid__col-10">
10
</div>
</div>
<div class="grid">
<div class="grid__col-3">
3
</div>
<div class="grid__col-9">
9
</div>
</div>
<div class="grid">
<div class="grid__col-4">
4
</div>
<div class="grid__col-8">
8
</div>
</div>
<div class="grid">
<div class="grid__col-5">
5
</div>
<div class="grid__col-7">
7
</div>
</div>
<div class="grid">
<div class="grid__col-6">
6
</div>
<div class="grid__col-6">
6
</div>
</div>
<h3>margin-offset</h3>
<div class="grid--margin-offset">
<div class="grid__col-12">
12
</div>
</div>
<div class="grid--margin-offset">
<div class="grid__col-1">
1
</div>
<div class="grid__col-11">
11
</div>
</div>
<div class="grid--margin-offset">
<div class="grid__col-2">
2
</div>
<div class="grid__col-10">
10
</div>
</div>
<div class="grid--margin-offset">
<div class="grid__col-3">
3
</div>
<div class="grid__col-9">
9
</div>
</div>
<div class="grid--margin-offset">
<div class="grid__col-4">
4
</div>
<div class="grid__col-8">
8
</div>
</div>
<div class="grid--margin-offset">
<div class="grid__col-5">
5
</div>
<div class="grid__col-7">
7
</div>
</div>
<div class="grid--margin-offset">
<div class="grid__col-6">
6
</div>
<div class="grid__col-6">
6
</div>
</div>
<h2>Responsive web design</h2>
<h3>skeleton</h3>
<div class="grid grid--responsive">
<div class="grid__col-12">
12
</div>
</div>
<div class="grid grid--responsive">
<div class="grid__col-1">
1
</div>
<div class="grid__col-11">
11
</div>
</div>
<div class="grid grid--responsive">
<div class="grid__col-2">
2
</div>
<div class="grid__col-10">
10
</div>
</div>
<div class="grid grid--responsive">
<div class="grid__col-3">
3
</div>
<div class="grid__col-9">
9
</div>
</div>
<div class="grid grid--responsive">
<div class="grid__col-4">
4
</div>
<div class="grid__col-8">
8
</div>
</div>
<div class="grid grid--responsive">
<div class="grid__col-5">
5
</div>
<div class="grid__col-7">
7
</div>
</div>
<div class="grid grid--responsive">
<div class="grid__col-6">
6
</div>
<div class="grid__col-6">
6
</div>
</div>
<h3>margin-offset</h3>
<div class="grid--margin-offset grid--margin-offset--responsive">
<div class="grid__col-12">
12
</div>
</div>
<div class="grid--margin-offset grid--margin-offset--responsive">
<div class="grid__col-1">
1
</div>
<div class="grid__col-11">
11
</div>
</div>
<div class="grid--margin-offset grid--margin-offset--responsive">
<div class="grid__col-2">
2
</div>
<div class="grid__col-10">
10
</div>
</div>
<div class="grid--margin-offset grid--margin-offset--responsive">
<div class="grid__col-3">
3
</div>
<div class="grid__col-9">
9
</div>
</div>
<div class="grid--margin-offset grid--margin-offset--responsive">
<div class="grid__col-4">
4
</div>
<div class="grid__col-8">
8
</div>
</div>
<div class="grid--margin-offset grid--margin-offset--responsive">
<div class="grid__col-5">
5
</div>
<div class="grid__col-7">
7
</div>
</div>
<div class="grid--margin-offset grid--margin-offset--responsive">
<div class="grid__col-6">
6
</div>
<div class="grid__col-6">
6
</div>
</div>
</div>
</body>
</html>