Scss Flexbox Grid

index.html

<!--  Intro  -->
<section class="section">
	<h1>Scss Flexbox Grid</h1>
	<p>This is the documentation for the Scss Flexbox grid, based on the <a href="http://flexboxgrid.com/" target="_blank">flexboxgrid website</a>. </p>
	<p> The goal of Scss Flexbox Grid is to provide the same level of functionality and documentation as the original CSS flexbox grid, but with the functionality and power of Scss. </p>
</section>
<section class="section">
	<h2>Contents</h2>
	<ol>
		<li><a href="#Installation">Installation</a></li>
		<li><a href="#Documentation">Documentation</a></li>
		<li><a href="#Contributing">Contributing</a></li>
		<li><a href="#License">License</a></li>
	</ol>
</section>
<section id="Installation" class="section">
	<h2>Installation</h2>
	<p>As of right now, Scss Flexbox Grid doesn't have a dedicated repo. If you want to install it to your project, you'll have to access the Scss right here on codepen.</p>
</section>

<section id="Documentation" class="section">
	<h2>Documentation</h2>
	<p>Scss Flexbox Grid is organized of two main containers and a few modifiers.</p>
</section>

<section class="doc-section">
	<h2>Rows</h2>
	<p class="close">Rows contain the collumn classes, and their primary job is to serve as a collumn container. Rows have a few different attribute classes for altering the position of the row and its contents. </p>
	<p>Define a row by adding the row class to a div</p>
	<pre>&lt;div class="<span>row</span>"&gt;&lt;/div&gt;
</pre>
</section>

<section class="doc-section">
	<h2>Reverse Row</h2>
	<p class="close">To reverse a row, add the reverse row attribute onto the row class</p>
	<p>Define a row by adding the row class to a div</p>
	<pre>&lt;div class="<span>row</span>"&gt;&lt;/div&gt;
</pre>
</section>

<section class="doc-section">
	<h2>Collumns</h2>
	<p class="close">Collumns are classes which are active only in rows. They define a  </p>
</section>

<!--  Documentation  -->
<h2>Scss Flexbox Grid Basics</h2>

<p>Simple flexbox collumns</p>

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

<p>Collumns adapt to sizing restraints</p>

<div class="row">
  <div class="col-6">.col-6</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

<p>Collumns can adapt to custom layouts</p>

<div class="row align-h-left">
  <div class="col-8">.col-8</div>
</div>

<div class="row align-h-right">
  <div class="col-8">.col-8</div>
</div>

<p>Collumns can adapt to different devices</p>

<div class="row">
  <div class="col-md-6 col-lg-12">.col-md-6 .col-lg-12</div>
  <div class="col-md-6 col-lg-12">.col-md-6 .col-lg-12</div>
</div>
<br><br>

<div id="test">test</div>

scss-flexbox-grid.markdown

Scss Flexbox Grid

Scss Flexbox Grid is a simple grid to help you kickstart your layouts. looking sharp very quickly. It only cares about laying out your content, so you can style your website or application however you like, without having to worry about creating a custom grid system.

A Pen by Jacob Henning on CodePen.

License.

style.scss

/* Decoration */
* {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

body {
	//background: #EEE;
	padding: 0 20px;
	font-size: 14px;
}
h1 {
	margin: 12px 0;
	margin-bottom: 24px;
	font-size: 32px;
	font-weight: 700;
}
h2 {
	margin: 10px 0;
	font-size: 20px;
	font-weight: 600;
}
h3 {
	margin-top: 12px;
	margin-bottom: 0;
	font-size: 16px;
	font-weight: 500;
}
pre {
	background: #f7f8f9;
	padding: 10px 20px;
	span {
		color: #007FFF;	
	}
}
p {
	color: rgba(0,0,0,0.8);
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
}
.close {
		margin-top: 4px;
}
ol {
	line-height: 24px;
}

.section {
	padding-top: 20px;
}
.doc-section {
	//background: rgba(#EEE, 0.5);
	margin-top: 40px;
	border-left: 2px solid #007FFF;
	padding: 10px 20px;
	box-shadow: 0px 1px 5px 1px rgba(#007FFF,0.25);
}
a {
	color: #007FFF;
	text-decoration: none;
	&:hover {
		text-decoration: underline;	
	}
}v
br {
	height: 30px;
}
.row {
	margin: 20px 0;
	border-radius: 2px;
	overflow: hidden;
	//box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
	div {
		padding: 10px;
		background: #007FFF;
		color: white;
		margin: 5px 10px;
		&:first-of-type {
			margin-left: 0;
		}
		&:last-of-type {
			margin-right: 0;
		}
	}
}

/* Variables - Add them to your variable file */

$device-xs: 540px;
$device-sm: 768px;
$device-md: 992px;
$device-lg: 1200px;


$device-xs: 200px;
$device-sm: 300px;
$device-md: 400px;
$device-lg: 500px;

@function breakpoint($point) {
	@return $point;
}

/* Mixins - Add them to your mixin file */

@mixin xs() {
	@media (max-width: $device-xs - 0.01) {
		@content;
	}
}

@mixin sm() {
	@media (max-width: $device-sm - 0.01) {
		@content;
	}
}


@mixin md() {
	@media (min-width: $device-sm) and (max-width: $device-md - 0.01) {
		@content;
	}
}

@mixin lg() {
	@media (min-width: $device-md) {
		@content;
	}
}

@mixin xl() {
	@media (min-width: $device-lg) {
		@content;
	}
}

/* Collumn Grid - The SCSS for a collumn grid system */

/* Nested row lets you reuse attributes. Less chance of conflicts */
.row {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 1em;

	&.reverse {
		flex-direction: row-reverse;
	}

	&.align-v-center {
		align-items: center;
	}

	&.align-v-bottom {
		align-items: end;
	}

	&.align-h-center {
		justify-content: center;
	}

	&.align-h-right {
		justify-content: flex-end;
	}

	[class*="col"] {
		box-sizing: border-box;
		flex-basis: 0;
		flex-grow: 0;
		flex-shrink: 0;
		position: relative;
		width: 100%;
	}

	[class~="col"] {
		flex-grow: 1;
	}

	$breakpoints: xl xs lg sm md;

	@each $point in $breakpoints {
		@for $i from 1 through 12 {
			[class*="col-#{$point}-#{$i}"] {
				flex-basis: 100% * $i / 12;
				width: 100% * $i / 12;
			}
		}
	}
	
	@for $i from 1 through 12 {
		[class="col-#{$i}"] {
			flex-basis: 100% * $i / 12;
			width: 100% * $i / 12;
		}
	}

	@each $point in $breakpoints {
		@for $i from 1 through 12 {
			[class*="col-#{$point}-#{$i}"] {
				@if ($point == "xs") {
					@include xs {
						flex-basis: 100% * $i / 12;
						width: 100% * $i / 12;
					}
				} @else if ($point == "sm") {
					@include sm {
						flex-basis: 100% * $i / 12;
						width: 100% * $i / 12;
					}
				} @else if ($point == "md") {
					@include md {
						flex-basis: 100% * $i / 12;
						width: 100% * $i / 12;
					}
				} @else if ($point == "lg") {
					@include lg {
						flex-basis: 100% * $i / 12;
						width: 100% * $i / 12;
					}
				} @else if ($point == "xl") {
					@include xl {
						flex-basis: 100% * $i / 12;
						width: 100% * $i / 12;
					}
				}
			}
		}
	}
}