Move from demo skeleton to design
Tom Rutgers
committed Aug 17, 2018
commit f936c5343d2b4dbdd8e3417024c95df28b2597d3
Showing 11
changed files with
386 additions
and 246 deletions
source/stylesheets/all.css.scss
+10
-6
| @@ | @@ -2,10 +2,14 @@ |
| @charset 'utf-8'; | |
| @import 'bootstrap-sprockets'; | |
| @import 'bootstrap-setup'; | |
| - | //base |
| - | @import 'base/reset'; |
| - | @import 'base/colors'; |
| - | @import 'base/typography'; |
| - | @import 'base/placeholders'; |
| - | @import 'demo/homepage'; |
| \ No newline at end of file | |
| + | @import 'demo/base/colors'; |
| + | @import 'demo/base/typography'; |
| + | @import 'demo/base/mixins'; |
| + | @import 'demo/base/grid'; |
| + | @import 'demo/base/placeholders'; |
| + | |
| + | @import 'demo/shared/header-primary'; |
| + | @import 'demo/shared/main-content'; |
| + | |
| + | @import 'demo/homepage/hero'; |
| \ No newline at end of file | |
source/stylesheets/base/_colors.scss
+0
-1
| @@ | @@ -1 +0,0 @@ |
| - | $primary-color: rgb(255, 68, 0); |
| \ No newline at end of file | |
source/stylesheets/base/_placeholders.scss
+0
-6
| @@ | @@ -1,6 +0,0 @@ |
| - | %img-responsive{ |
| - | display: block; |
| - | width: 100%; |
| - | max-width: 100%; |
| - | height: auto; |
| - | } |
| \ No newline at end of file | |
source/stylesheets/base/_reset.scss
+0
-213
| @@ | @@ -1,213 +0,0 @@ |
| - | /* ------------------------------------------ |
| - | RESET |
| - | --------------------------------------------- */ |
| - | body, div, |
| - | h1, h2, h3, h4, h5, h6, |
| - | p, blockquote, pre, dl, dt, dd, ol, ul, li, hr, |
| - | fieldset, form, label, legend, th, td, |
| - | article, aside, figure, footer, header, hgroup, menu, nav, section, |
| - | summary, hgroup { |
| - | margin: 0; |
| - | padding: 0; |
| - | border: 0; |
| - | } |
| - | |
| - | h1, h2, h3, h4, h5, h6, small { |
| - | font-size: 1em; |
| - | } |
| - | |
| - | @-webkit-viewport {width:device-width} |
| - | @-moz-viewport {width:device-width} |
| - | @-ms-viewport {width:device-width} |
| - | @-o-viewport {width:device-width} |
| - | @viewport {width:device-width} |
| - | |
| - | img, video { |
| - | width: auto; |
| - | max-width: 100%; |
| - | height: auto; |
| - | } |
| - | |
| - | html { |
| - | -webkit-text-size-adjust: 100%; |
| - | -ms-text-size-adjust: 100%; |
| - | text-size-adjust: 100%; |
| - | } |
| - | |
| - | /* ------------------------------------------ |
| - | CONSISTENCY FIXES |
| - | --------------------------------------------- */ |
| - | article, aside, details, figcaption, figure, footer, |
| - | header, hgroup, main, nav, section, summary { |
| - | display: block; |
| - | } |
| - | |
| - | audio, canvas, video { |
| - | display: inline-block; |
| - | } |
| - | |
| - | audio:not([controls]) { |
| - | display: none; |
| - | height: 0; |
| - | } |
| - | |
| - | [hidden] { |
| - | display: none; |
| - | } |
| - | |
| - | html { |
| - | -webkit-text-size-adjust: 100%; |
| - | -ms-text-size-adjust: 100%; |
| - | text-size-adjust: 100%; |
| - | } |
| - | |
| - | a:active, |
| - | a:hover { |
| - | outline: 0; |
| - | } |
| - | |
| - | abbr[title] { |
| - | border-bottom: 1px dotted; |
| - | } |
| - | |
| - | b, strong { |
| - | font-weight: bold; |
| - | } |
| - | |
| - | dfn { |
| - | font-style: italic; |
| - | } |
| - | |
| - | hr { |
| - | color: transparent; |
| - | background: none; |
| - | -moz-box-sizing: content-box; |
| - | box-sizing: content-box; |
| - | height: 0; |
| - | } |
| - | |
| - | mark { |
| - | background: #ff0; |
| - | color: #000; |
| - | } |
| - | |
| - | code, kbd, pre, samp { |
| - | font-family: monospace, monospace; |
| - | font-size: 1em; |
| - | } |
| - | |
| - | pre { |
| - | white-space: pre-wrap; |
| - | } |
| - | |
| - | q { |
| - | quotes: "\201C" "\201D" "\2018" "\2019"; |
| - | } |
| - | |
| - | small { |
| - | font-size: 80%; |
| - | } |
| - | |
| - | sub, sup { |
| - | font-size: 75%; |
| - | line-height: 0; |
| - | position: relative; |
| - | vertical-align: baseline; |
| - | } |
| - | |
| - | sup { |
| - | top: -0.5em; |
| - | } |
| - | |
| - | sub { |
| - | bottom: -0.25em; |
| - | } |
| - | |
| - | svg:not(:root) { |
| - | overflow: hidden; |
| - | } |
| - | |
| - | ul, ol { |
| - | margin-left: 1.5em; |
| - | } |
| - | |
| - | ul { |
| - | list-style-type: disc; |
| - | } |
| - | |
| - | ol { |
| - | list-style-type: decimal; |
| - | } |
| - | |
| - | nav ol, |
| - | nav ul { |
| - | list-style: none; |
| - | margin: 0; |
| - | padding: 0; |
| - | } |
| - | |
| - | button, input, select, textarea { |
| - | font-family: inherit; |
| - | font-size: 100%; |
| - | margin: 0; |
| - | } |
| - | |
| - | button, input { |
| - | line-height: normal; |
| - | } |
| - | |
| - | button, select { |
| - | text-transform: none; |
| - | } |
| - | |
| - | button, |
| - | html input[type="button"], |
| - | input[type="reset"], |
| - | input[type="submit"] { |
| - | -webkit-appearance: button; |
| - | cursor: pointer; |
| - | } |
| - | |
| - | button[disabled], |
| - | html input[disabled] { |
| - | cursor: default; |
| - | } |
| - | |
| - | input[type="checkbox"], |
| - | input[type="radio"] { |
| - | box-sizing: border-box; |
| - | padding: 0; |
| - | } |
| - | |
| - | input[type="search"] { |
| - | -webkit-appearance: textfield; |
| - | -moz-box-sizing: content-box; |
| - | -webkit-box-sizing: content-box; |
| - | box-sizing: content-box; |
| - | } |
| - | |
| - | input[type="search"]::-webkit-search-cancel-button, |
| - | input[type="search"]::-webkit-search-decoration { |
| - | -webkit-appearance: none; |
| - | } |
| - | |
| - | button::-moz-focus-inner, |
| - | input::-moz-focus-inner { |
| - | border: 0; |
| - | padding: 0; |
| - | } |
| - | |
| - | textarea { |
| - | overflow: auto; |
| - | vertical-align: top; |
| - | } |
| - | |
| - | table { |
| - | border-collapse: collapse; |
| - | border-spacing: 0; |
| - | } |
| - | |
| - | a img, img { |
| - | -ms-interpolation-mode: bicubic; |
| - | border: 0; |
| - | } |
| \ No newline at end of file | |
source/stylesheets/base/_typography.scss
+0
-5
| @@ | @@ -1,5 +0,0 @@ |
| - | body { |
| - | font-family: -apple-system, BlinkMacSystemFont, "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue", "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell", "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic", "Liberation Sans", sans-serif; |
| - | -webkit-font-smoothing: antialiased; |
| - | text-rendering: optimizeLegibility; |
| - | } |
| \ No newline at end of file | |
source/stylesheets/demo/_homepage.scss
+0
-15
| @@ | @@ -1,15 +0,0 @@ |
| - | .hero-homepage { |
| - | width: 100%; |
| - | padding: 20% 0; |
| - | text-align: center; |
| - | background-image: url('../images/coffee.jpg'); |
| - | background-size: cover; |
| - | |
| - | h1 { |
| - | display: inline-block; |
| - | padding: 16px; |
| - | font-size: 48px; |
| - | color: #fff; |
| - | background-color: $primary-color; |
| - | } |
| - | } |
| \ No newline at end of file | |
source/stylesheets/demo/base/_colors.scss
+2
-0
| @@ | @@ -0,0 +1,2 @@ |
| + | $primary-color: rgb(255, 68, 0); |
| + | $text-color: rgb(51,51,51); |
source/stylesheets/demo/base/_grid.sass
+251
-0
| @@ | @@ -0,0 +1,251 @@ |
| + | .container |
| + | @extend %container |
| + | |
| + | .container-fluid |
| + | @extend %container-fluid |
| + | |
| + | .row |
| + | @extend %row |
| + | |
| + | %container |
| + | +container-fixed |
| + | |
| + | @media (min-width: $screen-sm-min) |
| + | width: $container-sm |
| + | |
| + | @media (min-width: $screen-md-min) |
| + | width: $container-md |
| + | |
| + | @media (min-width: $screen-lg-min) |
| + | width: $container-lg |
| + | |
| + | %container-fluid |
| + | +container-fixed |
| + | |
| + | %container-fluid-0 |
| + | +container-fixed(0px) |
| + | %container-fluid-2 |
| + | +container-fixed(2px) |
| + | %container-fluid-8 |
| + | +container-fixed(8px) |
| + | %container-fluid-16 |
| + | +container-fixed(16px) |
| + | |
| + | //base rows |
| + | %row |
| + | +make-row |
| + | %row-0 |
| + | +make-row(0px) |
| + | %row-2 |
| + | +make-row(4px) |
| + | %row-8 |
| + | +make-row(16px) |
| + | |
| + | |
| + | //base column |
| + | %column |
| + | +make-column(30px) |
| + | %column-0 |
| + | +make-column(0) |
| + | %column-2 |
| + | +make-column(2px) |
| + | %column-8 |
| + | +make-column(8px) |
| + | %column-16 |
| + | +make-column(16px) |
| + | %col-xs-12 |
| + | +make-xs-column(12) |
| + | %col-xs-11 |
| + | +make-xs-column(11, left) |
| + | %col-xs-10 |
| + | +make-xs-column(10, left) |
| + | %col-xs-9 |
| + | +make-xs-column(9, left) |
| + | %col-xs-8 |
| + | +make-xs-column(8, left) |
| + | %col-xs-7 |
| + | +make-xs-column(7, left) |
| + | %col-xs-6 |
| + | +make-xs-column(6, left) |
| + | %col-xs-5 |
| + | +make-xs-column(5, left) |
| + | %col-xs-4 |
| + | +make-xs-column(4, left) |
| + | %col-xs-3 |
| + | +make-xs-column(3, left) |
| + | %col-xs-2 |
| + | +make-xs-column(2, left) |
| + | %col-xs-1 |
| + | +make-xs-column(1, left) |
| + | |
| + | //xs offset |
| + | %col-xs-offset-11 |
| + | +make-xs-column-offset(11) |
| + | %col-xs-offset-10 |
| + | +make-xs-column-offset(10) |
| + | %col-xs-offset-9 |
| + | +make-xs-column-offset(9) |
| + | %col-xs-offset-8 |
| + | +make-xs-column-offset(8) |
| + | %col-xs-offset-7 |
| + | +make-xs-column-offset(7) |
| + | %col-xs-offset-6 |
| + | +make-xs-column-offset(6) |
| + | %col-xs-offset-5 |
| + | +make-xs-column-offset(5) |
| + | %col-xs-offset-4 |
| + | +make-xs-column-offset(4) |
| + | %col-xs-offset-3 |
| + | +make-xs-column-offset(3) |
| + | %col-xs-offset-2 |
| + | +make-xs-column-offset(2) |
| + | %col-xs-offset-1 |
| + | +make-xs-column-offset(1) |
| + | |
| + | //sm-column |
| + | %col-sm-12 |
| + | +make-sm-column(12) |
| + | %col-sm-11 |
| + | +make-sm-column(11) |
| + | %col-sm-10 |
| + | +make-sm-column(10) |
| + | %col-sm-9 |
| + | +make-sm-column(9) |
| + | %col-sm-8 |
| + | +make-sm-column(8) |
| + | %col-sm-7 |
| + | +make-sm-column(7) |
| + | %col-sm-6 |
| + | +make-sm-column(6) |
| + | %col-sm-5 |
| + | +make-sm-column(5) |
| + | %col-sm-4 |
| + | +make-sm-column(4) |
| + | %col-sm-3 |
| + | +make-sm-column(3) |
| + | %col-sm-2 |
| + | +make-sm-column(2) |
| + | %col-sm-1 |
| + | +make-sm-column(1) |
| + | |
| + | %col-sm-offset-11 |
| + | +make-sm-column-offset(11) |
| + | %col-sm-offset-10 |
| + | +make-sm-column-offset(10) |
| + | %col-sm-offset-9 |
| + | +make-sm-column-offset(9) |
| + | %col-sm-offset-8 |
| + | +make-sm-column-offset(8) |
| + | %col-sm-offset-7 |
| + | +make-sm-column-offset(7) |
| + | %col-sm-offset-6 |
| + | +make-sm-column-offset(6) |
| + | %col-sm-offset-5 |
| + | +make-sm-column-offset(5) |
| + | %col-sm-offset-4 |
| + | +make-sm-column-offset(4) |
| + | %col-sm-offset-3 |
| + | +make-sm-column-offset(3) |
| + | %col-sm-offset-2 |
| + | +make-sm-column-offset(2) |
| + | %col-sm-offset-1 |
| + | +make-sm-column-offset(1) |
| + | |
| + | //md columns |
| + | %col-md-12 |
| + | +make-md-column(12) |
| + | %col-md-11 |
| + | +make-md-column(11) |
| + | %col-md-10 |
| + | +make-md-column(10) |
| + | %col-md-9 |
| + | +make-md-column(9) |
| + | %col-md-8 |
| + | +make-md-column(8) |
| + | %col-md-7 |
| + | +make-md-column(7) |
| + | %col-md-6 |
| + | +make-md-column(6) |
| + | %col-md-5 |
| + | +make-md-column(5) |
| + | %col-md-4 |
| + | +make-md-column(4) |
| + | %col-md-3 |
| + | +make-md-column(3) |
| + | %col-md-2 |
| + | +make-md-column(2) |
| + | %col-md-1 |
| + | +make-md-column(1) |
| + | |
| + | //md columns-offset |
| + | %col-md-offset-11 |
| + | +make-md-column-offset(11) |
| + | %col-md-offset-10 |
| + | +make-md-column-offset(10) |
| + | %col-md-offset-9 |
| + | +make-md-column-offset(9) |
| + | %col-md-offset-8 |
| + | +make-md-column-offset(8) |
| + | %col-md-offset-7 |
| + | +make-md-column-offset(7) |
| + | %col-md-offset-6 |
| + | +make-md-column-offset(6) |
| + | %col-md-offset-5 |
| + | +make-md-column-offset(5) |
| + | %col-md-offset-4 |
| + | +make-md-column-offset(4) |
| + | %col-md-offset-3 |
| + | +make-md-column-offset(3) |
| + | %col-md-offset-2 |
| + | +make-md-column-offset(2) |
| + | %col-md-offset-1 |
| + | +make-md-column-offset(1) |
| + | |
| + | //lg columns |
| + | %col-lg-12 |
| + | +make-lg-column(12) |
| + | %col-lg-11 |
| + | +make-lg-column(11) |
| + | %col-lg-10 |
| + | +make-lg-column(10) |
| + | %col-lg-9 |
| + | +make-lg-column(9) |
| + | %col-lg-8 |
| + | +make-lg-column(8) |
| + | %col-lg-7 |
| + | +make-lg-column(7) |
| + | %col-lg-6 |
| + | +make-lg-column(6) |
| + | %col-lg-5 |
| + | +make-lg-column(5) |
| + | %col-lg-4 |
| + | +make-lg-column(4) |
| + | %col-lg-3 |
| + | +make-lg-column(3) |
| + | %col-lg-2 |
| + | +make-lg-column(2) |
| + | %col-lg-1 |
| + | +make-lg-column(1) |
| + | |
| + | %col-lg-offset-11 |
| + | +make-lg-column-offset(11) |
| + | %col-lg-offset-10 |
| + | +make-lg-column-offset(10) |
| + | %col-lg-offset-9 |
| + | +make-lg-column-offset(9) |
| + | %col-lg-offset-8 |
| + | +make-lg-column-offset(8) |
| + | %col-lg-offset-7 |
| + | +make-lg-column-offset(7) |
| + | %col-lg-offset-6 |
| + | +make-lg-column-offset(6) |
| + | %col-lg-offset-5 |
| + | +make-lg-column-offset(5) |
| + | %col-lg-offset-4 |
| + | +make-lg-column-offset(4) |
| + | %col-lg-offset-3 |
| + | +make-lg-column-offset(3) |
| + | %col-lg-offset-2 |
| + | +make-lg-column-offset(2) |
| + | %col-lg-offset-1 |
| + | +make-lg-column-offset(1) |
| \ No newline at end of file | |
source/stylesheets/demo/base/_mixins.sass
+111
-0
| @@ | @@ -0,0 +1,111 @@ |
| + | // Grid system |
| + | // |
| + | // Generate semantic grid columns with these mixins. |
| + | |
| + | // Centered container element |
| + | @mixin container-fixed($gutter: $grid-gutter-width) |
| + | margin-right: auto |
| + | margin-left: auto |
| + | padding-left: ($gutter / 2) |
| + | padding-right: ($gutter / 2) |
| + | @include clearfix |
| + | |
| + | |
| + | // Creates a wrapper for a series of columns |
| + | @mixin make-row($gutter: $grid-gutter-width) |
| + | margin-left: ceil(($gutter / -2)) |
| + | margin-right: floor(($gutter / -2)) |
| + | @include clearfix |
| + | |
| + | @mixin make-column($gutter) |
| + | position: relative |
| + | min-height: 1px |
| + | padding-left: ($gutter / 2) |
| + | padding-right: ($gutter / 2) |
| + | |
| + | // Generate the extra small columns |
| + | @mixin make-xs-column($columns, $float: none) |
| + | float: $float |
| + | width: percentage(($columns / $grid-columns)) |
| + | |
| + | @mixin make-xs-column-offset($columns) |
| + | margin-left: percentage(($columns / $grid-columns)) |
| + | |
| + | @mixin make-xs-column-push($columns) |
| + | left: percentage(($columns / $grid-columns)) |
| + | |
| + | @mixin make-xs-column-pull($columns) |
| + | right: percentage(($columns / $grid-columns)) |
| + | |
| + | |
| + | // Generate the small columns |
| + | @mixin make-sm-column($columns) |
| + | |
| + | @media (min-width: $screen-sm-min) |
| + | float: left |
| + | width: percentage(($columns / $grid-columns)) |
| + | |
| + | |
| + | @mixin make-sm-column-offset($columns) |
| + | @media (min-width: $screen-sm-min) |
| + | margin-left: percentage(($columns / $grid-columns)) |
| + | |
| + | |
| + | @mixin make-sm-column-push($columns) |
| + | @media (min-width: $screen-sm-min) |
| + | left: percentage(($columns / $grid-columns)) |
| + | |
| + | |
| + | @mixin make-sm-column-pull($columns) |
| + | @media (min-width: $screen-sm-min) |
| + | right: percentage(($columns / $grid-columns)) |
| + | |
| + | |
| + | |
| + | // Generate the medium columns |
| + | @mixin make-md-column($columns) |
| + | |
| + | @media (min-width: $screen-md-min) |
| + | float: left |
| + | width: percentage(($columns / $grid-columns)) |
| + | |
| + | |
| + | @mixin make-md-column-offset($columns) |
| + | @media (min-width: $screen-md-min) |
| + | margin-left: percentage(($columns / $grid-columns)) |
| + | |
| + | |
| + | @mixin make-md-column-push($columns) |
| + | @media (min-width: $screen-md-min) |
| + | left: percentage(($columns / $grid-columns)) |
| + | |
| + | |
| + | @mixin make-md-column-pull($columns) |
| + | @media (min-width: $screen-md-min) |
| + | right: percentage(($columns / $grid-columns)) |
| + | |
| + | |
| + | |
| + | // Generate the large columns |
| + | @mixin make-lg-column($columns) |
| + | |
| + | @media (min-width: $screen-lg-min) |
| + | float: left |
| + | width: percentage(($columns / $grid-columns)) |
| + | |
| + | |
| + | @mixin make-lg-column-offset($columns) |
| + | @media (min-width: $screen-lg-min) |
| + | margin-left: percentage(($columns / $grid-columns)) |
| + | |
| + | |
| + | @mixin make-lg-column-push($columns) |
| + | @media (min-width: $screen-lg-min) |
| + | left: percentage(($columns / $grid-columns)) |
| + | |
| + | |
| + | @mixin make-lg-column-pull($columns) |
| + | @media (min-width: $screen-lg-min) |
| + | right: percentage(($columns / $grid-columns)) |
| + | |
| + | |
source/stylesheets/demo/base/_placeholders.scss
+6
-0
| @@ | @@ -0,0 +1,6 @@ |
| + | %img-responsive { |
| + | display: block; |
| + | width: 100%; |
| + | max-width: 100%; |
| + | height: auto; |
| + | } |
| \ No newline at end of file | |
source/stylesheets/demo/base/_typography.scss
+6
-0
| @@ | @@ -0,0 +1,6 @@ |
| + | body { |
| + | font-family: -apple-system, BlinkMacSystemFont, "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue", "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell", "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic", "Liberation Sans", sans-serif; |
| + | -webkit-font-smoothing: antialiased; |
| + | text-rendering: optimizeLegibility; |
| + | color: $text-color; |
| + | } |
| \ No newline at end of file | |