flexbox-grid-mixins
Version:
Sass Mixins to generate Flexbox grid
655 lines (562 loc) • 9.25 kB
HTML
<html>
<head>
<title>Stack - Flexbox Grid Mixins Example</title>
<link rel="stylesheet" href="../css-dart-sass/default.css">
<link rel="stylesheet" href="../css-dart-sass/stack.css">
<link rel="stylesheet" href="../css-dart-sass/stack-unset.css">
<link rel="stylesheet" href="../css-dart-sass/stack-margin-top.css">
<link rel="stylesheet" href="../css-dart-sass/stack-margin-bottom.css">
<link rel="stylesheet" href="../css-dart-sass/stack-margin-both.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>Stack</h2>
<h3>Default (Default Values as margin-bottom)</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>$flexbox-grid-mixins-stack: unset</h3>
<div class="grid--unset">
<div class="grid__col-12">
12
</div>
</div>
<div class="grid--unset">
<div class="grid__col-1">
1
</div>
<div class="grid__col-11">
11
</div>
</div>
<div class="grid--unset">
<div class="grid__col-2">
2
</div>
<div class="grid__col-10">
10
</div>
</div>
<div class="grid--unset">
<div class="grid__col-3">
3
</div>
<div class="grid__col-9">
9
</div>
</div>
<div class="grid--unset">
<div class="grid__col-4">
4
</div>
<div class="grid__col-8">
8
</div>
</div>
<div class="grid--unset">
<div class="grid__col-5">
5
</div>
<div class="grid__col-7">
7
</div>
</div>
<div class="grid--unset">
<div class="grid__col-6">
6
</div>
<div class="grid__col-6">
6
</div>
</div>
<h3>$flexbox-grid-mixins-stack: margin-top</h3>
<div class="grid--margin-top">
<div class="grid__col-12">
12
</div>
</div>
<div class="grid--margin-top">
<div class="grid__col-1">
1
</div>
<div class="grid__col-11">
11
</div>
</div>
<div class="grid--margin-top">
<div class="grid__col-2">
2
</div>
<div class="grid__col-10">
10
</div>
</div>
<div class="grid--margin-top">
<div class="grid__col-3">
3
</div>
<div class="grid__col-9">
9
</div>
</div>
<div class="grid--margin-top">
<div class="grid__col-4">
4
</div>
<div class="grid__col-8">
8
</div>
</div>
<div class="grid--margin-top">
<div class="grid__col-5">
5
</div>
<div class="grid__col-7">
7
</div>
</div>
<div class="grid--margin-top">
<div class="grid__col-6">
6
</div>
<div class="grid__col-6">
6
</div>
</div>
<h3>$flexbox-grid-mixins-stack: margin-bottom</h3>
<div class="grid--margin-bottom">
<div class="grid__col-12">
12
</div>
</div>
<div class="grid--margin-bottom">
<div class="grid__col-1">
1
</div>
<div class="grid__col-11">
11
</div>
</div>
<div class="grid--margin-bottom">
<div class="grid__col-2">
2
</div>
<div class="grid__col-10">
10
</div>
</div>
<div class="grid--margin-bottom">
<div class="grid__col-3">
3
</div>
<div class="grid__col-9">
9
</div>
</div>
<div class="grid--margin-bottom">
<div class="grid__col-4">
4
</div>
<div class="grid__col-8">
8
</div>
</div>
<div class="grid--margin-bottom">
<div class="grid__col-5">
5
</div>
<div class="grid__col-7">
7
</div>
</div>
<div class="grid--margin-bottom">
<div class="grid__col-6">
6
</div>
<div class="grid__col-6">
6
</div>
</div>
<h3>$flexbox-grid-mixins-stack: margin-both</h3>
<div class="grid--margin-both">
<div class="grid__col-12">
12
</div>
</div>
<div class="grid--margin-both">
<div class="grid__col-1">
1
</div>
<div class="grid__col-11">
11
</div>
</div>
<div class="grid--margin-both">
<div class="grid__col-2">
2
</div>
<div class="grid__col-10">
10
</div>
</div>
<div class="grid--margin-both">
<div class="grid__col-3">
3
</div>
<div class="grid__col-9">
9
</div>
</div>
<div class="grid--margin-both">
<div class="grid__col-4">
4
</div>
<div class="grid__col-8">
8
</div>
</div>
<div class="grid--margin-both">
<div class="grid__col-5">
5
</div>
<div class="grid__col-7">
7
</div>
</div>
<div class="grid--margin-both">
<div class="grid__col-6">
6
</div>
<div class="grid__col-6">
6
</div>
</div>
<h2 id="with-condense">Stack with condense</h2>
<h3>Default (Default Values as margin-bottom)</h3>
<div class="grid-condense">
<div class="grid__col-12">
12
</div>
</div>
<div class="grid-condense">
<div class="grid__col-1">
1
</div>
<div class="grid__col-11">
11
</div>
</div>
<div class="grid-condense">
<div class="grid__col-2">
2
</div>
<div class="grid__col-10">
10
</div>
</div>
<div class="grid-condense">
<div class="grid__col-3">
3
</div>
<div class="grid__col-9">
9
</div>
</div>
<div class="grid-condense">
<div class="grid__col-4">
4
</div>
<div class="grid__col-8">
8
</div>
</div>
<div class="grid-condense">
<div class="grid__col-5">
5
</div>
<div class="grid__col-7">
7
</div>
</div>
<div class="grid-condense">
<div class="grid__col-6">
6
</div>
<div class="grid__col-6">
6
</div>
</div>
<h3>$flexbox-grid-mixins-stack: unset</h3>
<div class="grid-condense--unset">
<div class="grid__col-12">
12
</div>
</div>
<div class="grid-condense--unset">
<div class="grid__col-1">
1
</div>
<div class="grid__col-11">
11
</div>
</div>
<div class="grid-condense--unset">
<div class="grid__col-2">
2
</div>
<div class="grid__col-10">
10
</div>
</div>
<div class="grid-condense--unset">
<div class="grid__col-3">
3
</div>
<div class="grid__col-9">
9
</div>
</div>
<div class="grid-condense--unset">
<div class="grid__col-4">
4
</div>
<div class="grid__col-8">
8
</div>
</div>
<div class="grid-condense--unset">
<div class="grid__col-5">
5
</div>
<div class="grid__col-7">
7
</div>
</div>
<div class="grid-condense--unset">
<div class="grid__col-6">
6
</div>
<div class="grid__col-6">
6
</div>
</div>
<h3>$flexbox-grid-mixins-stack: margin-top</h3>
<div class="grid-condense--margin-top">
<div class="grid__col-12">
12
</div>
</div>
<div class="grid-condense--margin-top">
<div class="grid__col-1">
1
</div>
<div class="grid__col-11">
11
</div>
</div>
<div class="grid-condense--margin-top">
<div class="grid__col-2">
2
</div>
<div class="grid__col-10">
10
</div>
</div>
<div class="grid-condense--margin-top">
<div class="grid__col-3">
3
</div>
<div class="grid__col-9">
9
</div>
</div>
<div class="grid-condense--margin-top">
<div class="grid__col-4">
4
</div>
<div class="grid__col-8">
8
</div>
</div>
<div class="grid-condense--margin-top">
<div class="grid__col-5">
5
</div>
<div class="grid__col-7">
7
</div>
</div>
<div class="grid-condense--margin-top">
<div class="grid__col-6">
6
</div>
<div class="grid__col-6">
6
</div>
</div>
<h3>$flexbox-grid-mixins-stack: margin-bottom</h3>
<div class="grid-condense--margin-bottom">
<div class="grid__col-12">
12
</div>
</div>
<div class="grid-condense--margin-bottom">
<div class="grid__col-1">
1
</div>
<div class="grid__col-11">
11
</div>
</div>
<div class="grid-condense--margin-bottom">
<div class="grid__col-2">
2
</div>
<div class="grid__col-10">
10
</div>
</div>
<div class="grid-condense--margin-bottom">
<div class="grid__col-3">
3
</div>
<div class="grid__col-9">
9
</div>
</div>
<div class="grid-condense--margin-bottom">
<div class="grid__col-4">
4
</div>
<div class="grid__col-8">
8
</div>
</div>
<div class="grid-condense--margin-bottom">
<div class="grid__col-5">
5
</div>
<div class="grid__col-7">
7
</div>
</div>
<div class="grid-condense--margin-bottom">
<div class="grid__col-6">
6
</div>
<div class="grid__col-6">
6
</div>
</div>
<h3>$flexbox-grid-mixins-stack: margin-both</h3>
<div class="grid-condense--margin-both">
<div class="grid__col-12">
12
</div>
</div>
<div class="grid-condense--margin-both">
<div class="grid__col-1">
1
</div>
<div class="grid__col-11">
11
</div>
</div>
<div class="grid-condense--margin-both">
<div class="grid__col-2">
2
</div>
<div class="grid__col-10">
10
</div>
</div>
<div class="grid-condense--margin-both">
<div class="grid__col-3">
3
</div>
<div class="grid__col-9">
9
</div>
</div>
<div class="grid-condense--margin-both">
<div class="grid__col-4">
4
</div>
<div class="grid__col-8">
8
</div>
</div>
<div class="grid-condense--margin-both">
<div class="grid__col-5">
5
</div>
<div class="grid__col-7">
7
</div>
</div>
<div class="grid-condense--margin-both">
<div class="grid__col-6">
6
</div>
<div class="grid__col-6">
6
</div>
</div>
</div>
</body>
</html>