Merge pull request #131 from scriptex/feature/responsive-grid

scriptex · web-flow · commit a3ea628a382e · 2020-11-17T15:12:50.000+02:00
Add a responsive grid
diff --git a/README.md b/README.md
diff --git a/assets/components/_btn.scss b/assets/components/_btn.scss
@@ -1,5 +1,3 @@
-// Buttons
-
 .c-btn {
 	text-align: center;
 	text-decoration: none;
diff --git a/assets/components/_lists.scss b/assets/components/_lists.scss
@@ -1,5 +1,3 @@
-// Lists
-
 [class^='c-list-'] {
 	padding: 0;
 	margin: 0;
diff --git a/assets/elements/_document.scss b/assets/elements/_document.scss
@@ -1,8 +1,5 @@
-// Document
-
 html {
 	-webkit-tap-highlight-color: rgba($color-black, 0);
-	tap-highlight-color: rgba($color-black, 0);
 }
 
 body {
diff --git a/assets/elements/_headings.scss b/assets/elements/_headings.scss
@@ -1,5 +1,3 @@
-// Headings
-
 h1 {
 	font-size: $font-size-h1;
 }
diff --git a/assets/elements/_links.scss b/assets/elements/_links.scss
@@ -1,5 +1,3 @@
-// Links
-
 a {
 	color: $color-action;
 	text-decoration: underline;
diff --git a/assets/elements/_texts.scss b/assets/elements/_texts.scss
@@ -1,5 +1,3 @@
-// Texts
-
 p,
 ul,
 ol,
diff --git a/assets/generic/_form-elements.scss b/assets/generic/_form-elements.scss
@@ -1,5 +1,3 @@
-// Form Elements
-
 fieldset {
 	padding: 0;
 }
@@ -65,7 +63,6 @@ textarea {
 	color: inherit;
 	-moz-osx-font-smoothing: grayscale;
 	-webkit-font-smoothing: antialiased;
-	font-smoothing: antialiased;
 	text-rendering: optimizeLegibility;
 }
 
diff --git a/assets/generic/_reset.scss b/assets/generic/_reset.scss
@@ -1,5 +1,3 @@
-// Reset
-
 *,
 *::before,
 *::after {
@@ -15,7 +13,6 @@ body {
 	text-decoration-skip-ink: auto;
 	-moz-osx-font-smoothing: grayscale;
 	-webkit-font-smoothing: antialiased;
-	font-smoothing: antialiased;
 	text-size-adjust: none;
 	text-rendering: optimizeLegibility;
 }
diff --git a/assets/generic/_transitions.scss b/assets/generic/_transitions.scss
@@ -1,15 +1,13 @@
-// Transitions
-
 a,
 a img,
+a svg,
 input,
 button,
 select,
 textarea,
 .c-btn,
 [class^='svg-'] {
-	transition-property: color, opacity, border-color, background-color,
-		box-shadow, fill, stroke;
+	transition-property: color, opacity, border-color, background-color, box-shadow, fill, stroke;
 	transition-duration: $timing;
 	transition-timing-function: $easing;
 }
diff --git a/assets/objects/_grid.scss b/assets/objects/_grid.scss
@@ -1,15 +1,11 @@
-// Grid
-
 .o-grid {
-	@include grid;
-
-	@for $i from 1 through 6 {
-		&__item--1of#{$i} {
-			@include grid-item($i);
-		}
-	}
+	display: flex;
+	flex-flow: row wrap;
+	margin: 0 -1 * $gap;
 
-	&__item--2of3 {
-		@include grid-item(2/3);
+	&__item {
+		padding: 0 $gap;
 	}
 }
+
+@include grid;
diff --git a/assets/objects/_main.scss b/assets/objects/_main.scss
@@ -1,5 +1,3 @@
-// Main
-
 .o-main {
 	flex: 1;
 }
diff --git a/assets/objects/_shell.scss b/assets/objects/_shell.scss
@@ -1,9 +1,7 @@
-// Shell
-
 .o-shell {
 	max-width: $shell-width;
-	padding-right: 1rem;
-	padding-left: 1rem;
+	padding-right: $shell-gap;
+	padding-left: $shell-gap;
 	margin-right: auto;
 	margin-left: auto;
 
diff --git a/assets/objects/_wrapper.scss b/assets/objects/_wrapper.scss
@@ -1,5 +1,3 @@
-// Wrapper
-
 .o-wrapper {
 	@include flex-column(nowrap, stretch, flex-start);
 	min-height: 100vh;
diff --git a/assets/settings/_colors.scss b/assets/settings/_colors.scss
@@ -1,5 +1,3 @@
-// Colors
-
 $color-base: #333 !default;
 $color-white: #fff !default;
 $color-black: #000 !default;
diff --git a/assets/settings/_text.scss b/assets/settings/_text.scss
@@ -1,5 +1,3 @@
-// Text settings
-
 $font-sans-serif: sans-serif !default;
 $font-serif: serif !default;
 $font-monospace: monospace !default;
diff --git a/assets/settings/_transitions.scss b/assets/settings/_transitions.scss
@@ -1,4 +1,2 @@
-// Transition and Animation Settings
-
 $timing: 0.4s !default;
 $easing: ease-in-out !default;
diff --git a/assets/settings/_variables.scss b/assets/settings/_variables.scss
@@ -1,8 +1,37 @@
-// Variables
+$gap: 0.5rem !default;
+
+$columns: 12 !default;
 
 $shell-width: 75rem !default;
+$shell-gap: 1rem !default;
 
 $small-desktop: 1439px !default;
 $tablet-landscape: 1279px !default;
 $tablet-portrait: 1023px !default;
 $mobile: 767px !default;
+
+$breakpoints: (
+	xs: (
+		min: 0,
+		max: $mobile
+	),
+	sm: (
+		min: $mobile + 1,
+		max: $tablet-portrait
+	),
+	md: (
+		min: $tablet-portrait + 1,
+		max: $tablet-landscape
+	),
+	lg: (
+		min: $tablet-landscape + 1,
+		max: $small-desktop
+	),
+	xl: (
+		min: $small-desktop + 1
+	)
+) !default;
+
+$displays: 'block', 'inline', 'inline-block', 'flex', 'inline-flex' !default;
+
+$alignments: 'center', 'right', 'left', 'justify';
diff --git a/assets/tools/_chevron.scss b/assets/tools/_chevron.scss
@@ -1,6 +1,4 @@
-// Chevron
 // USAGE: @include chevron(1.25rem, 0 0 1px 1px, black, auto, 45deg);
-
 @mixin chevron(
 	$dimensions: 1rem,
 	$border-width: 0 0 1px 1px,
diff --git a/assets/tools/_flexbox.scss b/assets/tools/_flexbox.scss
@@ -1,5 +1,3 @@
-// Flexbox
-
 @mixin flex($align, $justify) {
 	display: flex;
 	align-items: $align;
@@ -16,13 +14,17 @@
 	flex-flow: column $wrap;
 }
 
-@mixin grid {
-	@include flex-row(wrap, stretch, space-between);
-	margin: 0 -0.75rem;
-}
+@mixin grid() {
+	@each $breakpoint, $width in $breakpoints {
+		@media (min-width: #{map-get($width, min)}) {
+			@for $i from 1 through $columns {
+				$size: $i / $columns * 100%;
 
-@mixin grid-item($size) {
-	flex: 0 0 calc(100% / #{$size});
-	max-width: calc(100% / #{$size});
-	padding: 0 0.75rem;
+				.#{$breakpoint}-#{$i} {
+					max-width: $size;
+					flex: 0 0 $size;
+				}
+			}
+		}
+	}
 }
diff --git a/assets/tools/_media-queries.scss b/assets/tools/_media-queries.scss
@@ -1,5 +1,3 @@
-// Media Queries
-
 @mixin small-desktop {
 	@media (max-width: #{$small-desktop}) {
 		@content;
diff --git a/assets/tools/_mixins.scss b/assets/tools/_mixins.scss
@@ -1,16 +1,15 @@
-// Mixins
-
 @mixin hover {
 	&:hover {
-		@media (-ms-high-contrast: none),
-			(-ms-high-contrast: active),
-			(-moz-touch-enabled: 0),
-			(hover) {
+		@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover) {
 			@content;
 		}
 	}
 }
 
+@mixin display($value: 'none') {
+	display: #{$value} !important;
+}
+
 @mixin centered {
 	position: absolute;
 	top: 0;
diff --git a/assets/utilities/_align.scss b/assets/utilities/_align.scss
@@ -1,13 +1,11 @@
-// Align
-
 .alignleft {
 	float: left;
-	margin: 0.35rem 1.25rem 1.25rem 0;
+	margin: $gap $gap * 2 $gap * 2 0;
 }
 
 .alignright {
 	float: right;
-	margin: 0.35rem 0 1.25rem 1.25rem;
+	margin: $gap 0 $gap * 2 $gap * 2;
 }
 
 .alignnone,
@@ -16,10 +14,10 @@
 }
 
 .alignnone {
-	margin: 0.35rem 0 1.25rem;
+	margin: $gap 0 $gap * 2;
 }
 
 .aligncenter {
 	display: block;
-	margin: 0.35rem auto 1.25rem;
+	margin: $gap auto $gap * 2;
 }
diff --git a/assets/utilities/_clear.scss b/assets/utilities/_clear.scss
@@ -0,0 +1,26 @@
+.clear,
+.clear-left,
+.clear-right {
+	&::after {
+		content: '';
+		display: block;
+	}
+}
+
+.clear {
+	&::after {
+		clear: both;
+	}
+}
+
+.clear-left {
+	&::after {
+		clear: left;
+	}
+}
+
+.clear-right {
+	&::after {
+		clear: right;
+	}
+}
diff --git a/assets/utilities/_fullsize-background.scss b/assets/utilities/_fullsize-background.scss
@@ -1,5 +1,3 @@
-// Fullsize Background
-
 .fullsize-background {
 	background-repeat: no-repeat;
 	background-position: 50% 50%;
diff --git a/assets/utilities/_hidden.scss b/assets/utilities/_hidden.scss
@@ -1,6 +1,4 @@
-// Hidden
-
 .hidden,
 [hidden] {
-	display: none !important; // scss-lint:disable ImportantRule
+	@include display;
 }
diff --git a/assets/utilities/_responsive-utilities.scss b/assets/utilities/_responsive-utilities.scss
diff --git a/assets/utilities/_text-align.scss b/assets/utilities/_text-align.scss
diff --git a/demo/index.html b/demo/index.html
diff --git a/index.scss b/index.scss
diff --git a/main.css b/main.css
diff --git a/package.json b/package.json
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,3 @@`
`1`		`-// Buttons`
`2`		`-`
`3`	`1`	`.c-btn {`
`4`	`2`	`text-align: center;`
`5`	`3`	`text-decoration: none;`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,3 @@`
`1`		`-// Lists`
`2`		`-`
`3`	`1`	`[class^='c-list-'] {`
`4`	`2`	`padding: 0;`
`5`	`3`	`margin: 0;`
Original file line number	Diff line number	Diff line change
`@@ -1,8 +1,5 @@`
`1`		`-// Document`
`2`		`-`
`3`	`1`	`html {`
`4`	`2`	`-webkit-tap-highlight-color: rgba($color-black, 0);`
`5`		`- tap-highlight-color: rgba($color-black, 0);`
`6`	`3`	`}`
`7`	`4`
`8`	`5`	`body {`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,3 @@`
`1`		`-// Headings`
`2`		`-`
`3`	`1`	`h1 {`
`4`	`2`	`font-size: $font-size-h1;`
`5`	`3`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,3 @@`
`1`		`-// Links`
`2`		`-`
`3`	`1`	`a {`
`4`	`2`	`color: $color-action;`
`5`	`3`	`text-decoration: underline;`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,3 @@`
`1`		`-// Texts`
`2`		`-`
`3`	`1`	`p,`
`4`	`2`	`ul,`
`5`	`3`	`ol,`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,3 @@`
`1`		`-// Form Elements`
`2`		`-`
`3`	`1`	`fieldset {`
`4`	`2`	`padding: 0;`
`5`	`3`	`}`
`@@ -65,7 +63,6 @@ textarea {`
`65`	`63`	`color: inherit;`
`66`	`64`	`-moz-osx-font-smoothing: grayscale;`
`67`	`65`	`-webkit-font-smoothing: antialiased;`
`68`		`- font-smoothing: antialiased;`
`69`	`66`	`text-rendering: optimizeLegibility;`
`70`	`67`	`}`
`71`	`68`