grid created

2015-12-25 22:57:14 -03:00 · 2015-12-25 22:57:14 -03:00 · f95ed6c641
commit f95ed6c641
parent 47d8e4e3e2
1 changed files with 161 additions and 0 deletions
--- a/sass/_Grid.sass
+++ b/sass/_Grid.sass
@ -0,0 +1,161 @@
+
+// Grid
+// ––––––––––––––––––––––––––––––––––––––––––––––––––
+
+// .container is main centered wrapper with a max width of 1120rem (1120px)
+.container
+	box-sizing: border-box
+	margin: 0 auto
+	max-width: 112.0rem
+	padding: 0 2.0rem
+	position: relative
+	width: 100%
+
+// Using flexbox for the grid, inspired by Philip Walton:
+// http://philipwalton.github.io/solved-by-flexbox/demos/grids/
+// By default each .column within a .row will evenly take up
+// available width, and the height of each .column with take
+// up the height of the tallest .column in the same .row.
+.row
+	display: flex
+	flex-direction: column
+	padding: 0
+	width: 100%
+
+	.row-wrap
+		flex-wrap: wrap
+
+	.row-no-padding
+		padding: 0
+
+		&> .column
+			padding: 0
+
+	// & + .row
+	// 	margin-top: -.5rem
+	// 	padding-top: 0
+
+	// Vertically Align Columns
+	// .row-* vertically aligns every .col in the .row
+	.row-top
+		align-items: flex-start
+
+	.row-bottom
+		align-items: flex-end
+
+	.row-center
+		align-items: center
+
+	.row-stretch
+		align-items: stretch
+
+	.row-baseline
+		align-items: baseline
+
+	.column
+		display: block
+		flex: 1
+		margin-left: 0
+		max-width: 100%
+		width: 100%
+
+		// .column-* vertically aligns an individual .column
+		.col-top
+			align-self: flex-start
+
+		.col-bottom
+			align-self: flex-end
+
+		.col-center
+			align-self: center
+
+		// Column Offsets
+		&.column-offset-10
+			margin-left: 10%
+
+		&.column-offset-20
+			margin-left: 20%
+
+		&.column-offset-25
+			margin-left: 25%
+
+		&.column-offset-33,
+		&.column-offset-34
+			margin-left: 33.3333%
+
+		&.column-offset-50
+			margin-left: 50%
+
+		&.column-offset-66,
+		&.column-offset-67
+			margin-left: 66.6666%
+
+		&.column-offset-75
+			margin-left: 75%
+
+		&.column-offset-80
+			margin-left: 80%
+
+		&.column-offset-90
+			margin-left: 90%
+
+		// Explicit Column Percent Sizes
+		// By default each grid column will evenly distribute
+		// across the grid. However, you can specify individual
+		// columns to take up a certain size of the available area
+		&.column-10
+			flex: 0 0 10%
+			max-width: 10%
+
+		&.column-20
+			flex: 0 0 20%
+			max-width: 20%
+
+		&.column-25
+			flex: 0 0 25%
+			max-width: 25%
+
+		&.column-33,
+		&.column-34
+			flex: 0 0 33.3333%
+			max-width: 33.3333%
+
+		&.column-40
+			flex: 0 0 40%
+			max-width: 40%
+
+		&.column-50
+			flex: 0 0 50%
+			max-width: 50%
+
+		&.column-60
+			flex: 0 0 60%
+			max-width: 60%
+
+		&.column-66, &.column-67
+			flex: 0 0 66.6666%
+			max-width: 66.6666%
+
+		&.column-75
+			flex: 0 0 75%
+			max-width: 75%
+
+		&.column-80
+			flex: 0 0 80%
+			max-width: 80%
+
+		&.column-90
+			flex: 0 0 90%
+			max-width: 90%
+
+// Larger than mobile screen
+@media (min-width: 40.0rem)
+
+	.row
+		flex-direction: row
+		margin-left: -1.0rem
+		width: calc(100% + 2.0rem)
+
+		.column
+			margin-bottom: inherit
+			padding: 0 1.0rem