From baa09514092bc43b56de4e6e9a6769049f31a8dd Mon Sep 17 00:00:00 2001 From: Tixie Date: Sat, 15 Feb 2020 18:58:20 +0100 Subject: [PATCH] add css skeleton --- .csscomb.json | 249 ++++++++++++++++++ .postcssrc | 6 + package-lock.json | 50 ++++ package.json | 2 + src/assets/scss/1-core/_00-mixins.scss | 14 + src/assets/scss/1-core/_01-reset.scss | 48 ++++ src/assets/scss/1-core/_02-typography.scss | 28 ++ src/assets/scss/1-core/_03-helpers.scss | 29 ++ src/assets/scss/1-core/_04-layout.scss | 27 ++ src/assets/scss/1-core/_05-flexgrid.scss | 124 +++++++++ src/assets/scss/1-core/_06-rwd.scss | 84 ++++++ src/assets/scss/1-core/_debug.scss | 41 +++ src/assets/scss/2-helpers/_alignment.scss | 46 ++++ src/assets/scss/2-helpers/_colors.scss | 11 + src/assets/scss/2-helpers/_spacing.scss | 179 +++++++++++++ src/assets/scss/2-helpers/_state.scss | 7 + src/assets/scss/2-helpers/_text.scss | 45 ++++ src/assets/scss/2-helpers/_width.scss | 18 ++ src/assets/scss/3-components/_buttons.scss | 93 +++++++ src/assets/scss/3-components/_forms.scss | 205 ++++++++++++++ .../scss/3-components/_notifications.scss | 36 +++ src/assets/scss/3-components/_pagination.scss | 54 ++++ src/assets/scss/3-components/_radiobox.scss | 71 +++++ src/assets/scss/3-components/_switch.scss | 49 ++++ src/assets/scss/3-components/_tables.scss | 56 ++++ src/assets/scss/3-components/_tooltips.scss | 51 ++++ src/assets/scss/4-base/_01-fonts.scss | 3 + src/assets/scss/4-base/_02-icons.scss | 3 + src/assets/scss/4-base/_03-grids.scss | 44 ++++ src/assets/scss/4-base/_04-main.scss | 78 ++++++ src/assets/scss/4-base/_05-layout.scss | 0 src/assets/scss/4-base/_06-header.scss | 6 + src/assets/scss/4-base/_07-navigation.scss | 6 + src/assets/scss/4-base/_08-content.scss | 6 + src/assets/scss/4-base/_09-footer.scss | 19 ++ src/assets/scss/5-modules/.gitkeep | 0 src/assets/scss/6-pages/.gitkeep | 0 src/assets/scss/7-vendors/.gitkeep | 0 src/assets/scss/8-rwd/_rwd-large.scss | 6 + src/assets/scss/8-rwd/_rwd-medium.scss | 6 + src/assets/scss/8-rwd/_rwd-small.scss | 6 + src/assets/scss/8-rwd/_rwd-xsmall.scss | 6 + src/assets/scss/8-rwd/_rwd.scss | 3 + src/assets/scss/_colors.scss | 34 +++ src/assets/scss/_config.scss | 29 ++ src/assets/scss/style.scss | 92 +++++++ src/index.html | 2 +- src/main.css | 8 - 48 files changed, 1971 insertions(+), 9 deletions(-) create mode 100644 .csscomb.json create mode 100644 .postcssrc create mode 100755 src/assets/scss/1-core/_00-mixins.scss create mode 100755 src/assets/scss/1-core/_01-reset.scss create mode 100755 src/assets/scss/1-core/_02-typography.scss create mode 100755 src/assets/scss/1-core/_03-helpers.scss create mode 100755 src/assets/scss/1-core/_04-layout.scss create mode 100755 src/assets/scss/1-core/_05-flexgrid.scss create mode 100755 src/assets/scss/1-core/_06-rwd.scss create mode 100755 src/assets/scss/1-core/_debug.scss create mode 100755 src/assets/scss/2-helpers/_alignment.scss create mode 100755 src/assets/scss/2-helpers/_colors.scss create mode 100755 src/assets/scss/2-helpers/_spacing.scss create mode 100755 src/assets/scss/2-helpers/_state.scss create mode 100755 src/assets/scss/2-helpers/_text.scss create mode 100755 src/assets/scss/2-helpers/_width.scss create mode 100755 src/assets/scss/3-components/_buttons.scss create mode 100755 src/assets/scss/3-components/_forms.scss create mode 100755 src/assets/scss/3-components/_notifications.scss create mode 100755 src/assets/scss/3-components/_pagination.scss create mode 100755 src/assets/scss/3-components/_radiobox.scss create mode 100755 src/assets/scss/3-components/_switch.scss create mode 100755 src/assets/scss/3-components/_tables.scss create mode 100755 src/assets/scss/3-components/_tooltips.scss create mode 100755 src/assets/scss/4-base/_01-fonts.scss create mode 100755 src/assets/scss/4-base/_02-icons.scss create mode 100755 src/assets/scss/4-base/_03-grids.scss create mode 100755 src/assets/scss/4-base/_04-main.scss create mode 100755 src/assets/scss/4-base/_05-layout.scss create mode 100755 src/assets/scss/4-base/_06-header.scss create mode 100755 src/assets/scss/4-base/_07-navigation.scss create mode 100755 src/assets/scss/4-base/_08-content.scss create mode 100755 src/assets/scss/4-base/_09-footer.scss create mode 100755 src/assets/scss/5-modules/.gitkeep create mode 100755 src/assets/scss/6-pages/.gitkeep create mode 100755 src/assets/scss/7-vendors/.gitkeep create mode 100755 src/assets/scss/8-rwd/_rwd-large.scss create mode 100755 src/assets/scss/8-rwd/_rwd-medium.scss create mode 100755 src/assets/scss/8-rwd/_rwd-small.scss create mode 100755 src/assets/scss/8-rwd/_rwd-xsmall.scss create mode 100755 src/assets/scss/8-rwd/_rwd.scss create mode 100755 src/assets/scss/_colors.scss create mode 100755 src/assets/scss/_config.scss create mode 100755 src/assets/scss/style.scss delete mode 100644 src/main.css diff --git a/.csscomb.json b/.csscomb.json new file mode 100644 index 0000000..d993f29 --- /dev/null +++ b/.csscomb.json @@ -0,0 +1,249 @@ +{ + "remove-empty-rulesets": true, + "always-semicolon": true, + "color-case": "lower", + "block-indent": " ", + "color-shorthand": true, + "element-case": "lower", + "eof-newline": true, + "leading-zero": false, + "quotes": "double", + "space-after-colon": " ", + "space-before-combinator": " ", + "space-after-combinator": " ", + "space-between-declarations": "\n", + "space-before-opening-brace": " ", + "space-after-opening-brace": "\n", + "space-after-selector-delimiter": "\n", + "space-before-selector-delimiter": "", + "space-before-closing-brace": "\n", + "strip-spaces": true, + "sort-order": [ + [ + "position", + "top", + "right", + "bottom", + "left", + "z-index", + "display", + "visibility", + "-moz-appearance", + "-webkit-appearance", + "appearance", + "flex-direction", + "flex-wrap", + "flex-flow", + "justify-content", + "align-items", + "align-content", + "flex-grow", + "flex-shrink", + "flex-basis", + "flex", + "order", + "align-self", + "flex-pack", + "flex-align", + "flex-item-align", + "float", + "clear", + "overflow", + "overflow-x", + "overflow-y", + "-webkit-overflow-scrolling", + "clip", + "box-sizing", + "margin", + "margin-top", + "margin-right", + "margin-bottom", + "margin-left", + "padding", + "padding-top", + "padding-right", + "padding-bottom", + "padding-left", + "min-width", + "min-height", + "max-width", + "max-height", + "width", + "height", + "outline", + "outline-width", + "outline-style", + "outline-color", + "outline-offset", + "border", + "border-spacing", + "border-collapse", + "border-width", + "border-style", + "border-color", + "border-top", + "border-top-width", + "border-top-style", + "border-top-color", + "border-right", + "border-right-width", + "border-right-style", + "border-right-color", + "border-bottom", + "border-bottom-width", + "border-bottom-style", + "border-bottom-color", + "border-left", + "border-left-width", + "border-left-style", + "border-left-color", + "border-radius", + "border-top-left-radius", + "border-top-right-radius", + "border-bottom-right-radius", + "border-bottom-left-radius", + "border-image", + "border-image-source", + "border-image-slice", + "border-image-width", + "border-image-outset", + "border-image-repeat", + "border-top-image", + "border-right-image", + "border-bottom-image", + "border-left-image", + "border-corner-image", + "border-top-left-image", + "border-top-right-image", + "border-bottom-right-image", + "border-bottom-left-image", + "background", + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader", + "background-color", + "background-image", + "background-attachment", + "background-position", + "background-position-x", + "background-position-y", + "background-clip", + "background-origin", + "background-size", + "background-repeat", + "box-decoration-break", + "box-shadow", + "fill", + "color", + "table-layout", + "caption-side", + "empty-cells", + "list-style", + "list-style-position", + "list-style-type", + "list-style-image", + "quotes", + "content", + "counter-increment", + "counter-reset", + "-ms-writing-mode", + "vertical-align", + "text-align", + "text-align-last", + "text-decoration", + "text-emphasis", + "text-emphasis-position", + "text-emphasis-style", + "text-emphasis-color", + "text-indent", + "-ms-text-justify", + "text-justify", + "text-outline", + "text-transform", + "text-wrap", + "-ms-text-overflow", + "text-overflow", + "text-overflow-ellipsis", + "text-overflow-mode", + "text-shadow", + "white-space", + "word-spacing", + "-ms-word-wrap", + "word-wrap", + "-ms-word-break", + "word-break", + "-moz-tab-size", + "-o-tab-size", + "tab-size", + "-webkit-hyphens", + "-moz-hyphens", + "hyphens", + "letter-spacing", + "font", + "font-display", + "font-weight", + "font-style", + "font-variant", + "font-size-adjust", + "font-stretch", + "font-size", + "font-family", + "src", + "line-height", + "opacity", + "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha", + "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity", + "-ms-interpolation-mode", + "-webkit-filter", + "-ms-filter", + "filter", + "resize", + "cursor", + "nav-index", + "nav-up", + "nav-right", + "nav-down", + "nav-left", + "transition", + "transition-delay", + "transition-timing-function", + "transition-duration", + "transition-property", + "transform", + "transform-origin", + "animation", + "animation-name", + "animation-duration", + "animation-play-state", + "animation-timing-function", + "animation-delay", + "animation-iteration-count", + "animation-direction", + "pointer-events", + "unicode-bidi", + "direction", + "columns", + "column-span", + "column-width", + "column-count", + "column-fill", + "column-gap", + "column-rule", + "column-rule-width", + "column-rule-style", + "column-rule-color", + "break-before", + "break-inside", + "break-after", + "page-break-before", + "page-break-inside", + "page-break-after", + "orphans", + "widows", + "-ms-zoom", + "zoom", + "max-zoom", + "min-zoom", + "user-zoom", + "orientation" + ] + ] +} diff --git a/.postcssrc b/.postcssrc new file mode 100644 index 0000000..0e58c48 --- /dev/null +++ b/.postcssrc @@ -0,0 +1,6 @@ +{ + "modules": false, + "plugins": { + "autoprefixer": true + } +} diff --git a/package-lock.json b/package-lock.json index c934cfe..a431aa2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2889,6 +2889,35 @@ "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==", "dev": true }, + "autoprefixer": { + "version": "9.7.4", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.7.4.tgz", + "integrity": "sha512-g0Ya30YrMBAEZk60lp+qfX5YQllG+S5W3GYCFvyHTvhOki0AEQJLPEcIuGRsqVwLi8FvXPVtwTGhfr38hVpm0g==", + "dev": true, + "requires": { + "browserslist": "^4.8.3", + "caniuse-lite": "^1.0.30001020", + "chalk": "^2.4.2", + "normalize-range": "^0.1.2", + "num2fraction": "^1.2.2", + "postcss": "^7.0.26", + "postcss-value-parser": "^4.0.2" + }, + "dependencies": { + "caniuse-lite": { + "version": "1.0.30001027", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001027.tgz", + "integrity": "sha512-7xvKeErvXZFtUItTHgNtLgS9RJpVnwBlWX8jSo/BO8VsF6deszemZSkJJJA1KOKrXuzZH4WALpAJdq5EyfgMLg==", + "dev": true + }, + "postcss-value-parser": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz", + "integrity": "sha512-LmeoohTpp/K4UiyQCwuGWlONxXamGzCMtFxLq4W1nZVGIQLYvMCJx3yAF9qyyuFpflABI9yVdtJAqbihOsCsJQ==", + "dev": true + } + } + }, "aws-sign2": { "version": "0.7.0", "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz", @@ -6592,6 +6621,12 @@ "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", "dev": true }, + "normalize-range": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz", + "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=", + "dev": true + }, "normalize-url": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz", @@ -6607,6 +6642,12 @@ "boolbase": "~1.0.0" } }, + "num2fraction": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz", + "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=", + "dev": true + }, "nwsapi": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.0.tgz", @@ -7930,6 +7971,15 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true }, + "sass": { + "version": "1.25.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.25.0.tgz", + "integrity": "sha512-uQMjye0Y70SEDGO56n0j91tauqS9E1BmpKHtiYNQScXDHeaE9uHwNEqQNFf4Bes/3DHMNinB6u79JsG10XWNyw==", + "dev": true, + "requires": { + "chokidar": ">=2.0.0 <4.0.0" + } + }, "sax": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", diff --git a/package.json b/package.json index ea6e0ed..687a218 100644 --- a/package.json +++ b/package.json @@ -14,8 +14,10 @@ "devDependencies": { "@babel/core": "^7.7.7", "@babel/preset-env": "^7.8.3", + "autoprefixer": "^9.7.4", "parcel": "^1.12.4", "parcel-plugin-svelte": "^4.0.5", + "sass": "^1.25.0", "svelte": "^3.16.7" }, "dependencies": { diff --git a/src/assets/scss/1-core/_00-mixins.scss b/src/assets/scss/1-core/_00-mixins.scss new file mode 100755 index 0000000..7310092 --- /dev/null +++ b/src/assets/scss/1-core/_00-mixins.scss @@ -0,0 +1,14 @@ +// -------------------------------------------------------------- +// == mixins */ +// -------------------------------------------------------------- + +@mixin flow($font-size, $bf: $base-font, $lh: $line-height) { + $lh-value: $base-font * $lh; + $coeff: ceil($font-size / $lh-value); + $new-lh: ($lh-value / $font-size) * $coeff; + $margin-bottom: $new-lh / $coeff; + + margin-bottom: $margin-bottom + em; + font-size: $font-size / 10 + rem; + line-height: $new-lh; +} diff --git a/src/assets/scss/1-core/_01-reset.scss b/src/assets/scss/1-core/_01-reset.scss new file mode 100755 index 0000000..713446c --- /dev/null +++ b/src/assets/scss/1-core/_01-reset.scss @@ -0,0 +1,48 @@ +/* ----------------------------------------------------------- */ +/* == reset */ +/* ----------------------------------------------------------- */ + +html { + box-sizing: border-box; +} + +*, +*:after, +*:before { + box-sizing: inherit; +} + +body { + margin: 0; +} + +img, +table, +td, +blockquote, +code, +pre, +textarea, +input, +video, +svg { + max-width: 100%; +} + +img { + height: auto; + border-style: none; + vertical-align: middle; +} + +/* fix input no style on Safari */ +input[type="search"] { + -webkit-appearance: textfield; +} + +button, +input, +select, +textarea { + font: inherit; +} diff --git a/src/assets/scss/1-core/_02-typography.scss b/src/assets/scss/1-core/_02-typography.scss new file mode 100755 index 0000000..81a8cf0 --- /dev/null +++ b/src/assets/scss/1-core/_02-typography.scss @@ -0,0 +1,28 @@ +/* ----------------------------------------------------------- */ +/* == typography */ +/* ----------------------------------------------------------- */ + +html { + font-size: 62.5%; + /* IE9-11 calculation fix */ + font-size: calc(1em * .625); +} + +body { + font-size: $base-font / 10 + em; + line-height: $line-height; +} + +p, +ul, +ol, +dl, +blockquote, +pre, +td, +th, +label, +textarea, +caption { + margin: 0 0 ($line-height + em) 0; +} diff --git a/src/assets/scss/1-core/_03-helpers.scss b/src/assets/scss/1-core/_03-helpers.scss new file mode 100755 index 0000000..34cc374 --- /dev/null +++ b/src/assets/scss/1-core/_03-helpers.scss @@ -0,0 +1,29 @@ +/* ----------------------------------------------------------- */ +/* == helpers */ +/* ----------------------------------------------------------- */ + +/* screen readers +-------------------------------------------------------------- */ + +/* Hide only visually, but have it available for screen readers (from HTML5 Boilerplate) */ + +.visually-hidden { + position: absolute; + overflow: hidden; + clip: rect(0 0 0 0); + margin: -1px; + padding: 0; + width: 1px; + height: 1px; + border: 0; +} + +.visually-hidden.focusable:active, +.visually-hidden.focusable:focus { + position: static; + overflow: visible; + clip: auto; + margin: 0; + width: auto; + height: auto; +} diff --git a/src/assets/scss/1-core/_04-layout.scss b/src/assets/scss/1-core/_04-layout.scss new file mode 100755 index 0000000..129be97 --- /dev/null +++ b/src/assets/scss/1-core/_04-layout.scss @@ -0,0 +1,27 @@ +/* ----------------------------------------------------------- */ +/* == layout */ +/* ----------------------------------------------------------- */ + +/* BFC to the rescue */ +.mod { + overflow: hidden; +} + +.clear, +.line, +.row { + clear: both; +} + +/* blocks that must contain floats */ +.clearfix:after, +.line:after, +.mod:after { + display: table; + clear: both; + content: ""; +} + +.inbl { + display: inline-block; +} diff --git a/src/assets/scss/1-core/_05-flexgrid.scss b/src/assets/scss/1-core/_05-flexgrid.scss new file mode 100755 index 0000000..2ae2a34 --- /dev/null +++ b/src/assets/scss/1-core/_05-flexgrid.scss @@ -0,0 +1,124 @@ +// important: nth-child(n) is used to keep same specificity between grid (equal and unequal) + +.grid { + display: flex; + flex-direction: row; + + flex-wrap: wrap; + align-items: stretch; +} + +.grid > * { + display: block; /* IE fix */ + + flex: 0 0 auto; +} + + +// equal grid +@mixin grid($number:$number, $gutter:$default-gutter, $mb:$gutter) { + + // equal grid no gutter + @if $gutter == 0 { + & { + margin-bottom: -$mb; + } + + & > *:nth-child(n) { + margin-bottom: $mb; + width: calc(100% * 1 / #{$number} - .01px); + } + } + + // one column mode + @if $number == 1 { + & { + margin-bottom: -$mb; + margin-left: 0; + } + + & > *:nth-child(n) { + margin-bottom: $mb; + margin-left: 0; + width: 100%; + } + } + + // with gutter (avoid percentage since it doesn't work well with margin bottom) + @if $number>1 and $gutter>0 { + & { + margin-bottom: -$mb; /* avoid unwanted margin on last line */ + margin-left: -$gutter; + } + + & > *:nth-child(n) { + margin-bottom: $mb; + margin-left: $gutter; + width: calc(100% * 1 / #{$number} - #{$gutter} - .01px); // .01px = $bugfix IE + } + } +} + +// unequal grid +@mixin unequalGrid($column1, $column2, $gutter:$default-gutter, $mb:$gutter) { + + // no gutter (when gutter = 0) + @if $gutter == 0 { + & > *:nth-child(odd) { + width: calc(#{$size}); + + $size : ($column1 * 100%) / ($column1 + $column2); + } + + & > *:nth-child(even) { + width: calc(#{$size}); + + $size : ($column2 * 100%) / ($column1 + $column2); + } + } + + // with gutter + @else { + $g : $gutter / 2; + + &>* { + margin-bottom: $mb; + } + + & > *:nth-child(odd) { + $size : ($column1 * 100%) / ($column1 + $column2); + + width: calc(#{$size} - #{$g} - .01px); // .01px = $bugfix IE + } + + & > *:nth-child(even) { + $size : ($column2 * 100%) / ($column1 + $column2); + + margin-left: $gutter; + width: calc(#{$size} - #{$g} - .01px); // .01px = $bugfix IE + + } + } +} + +/* vertical align +-------------------------------------------------------------- */ + +[class*="grid-top"] { + align-items: flex-start; +} + +[class*="grid-bottom"] { + align-items: flex-end; +} + +[class*="grid-center"] { + align-items: center; +} + +/* helpers +-------------------------------------------------------------- */ + +[class*="grid-"].grid-noMargin > * { + margin-bottom: 0; +} diff --git a/src/assets/scss/1-core/_06-rwd.scss b/src/assets/scss/1-core/_06-rwd.scss new file mode 100755 index 0000000..e405276 --- /dev/null +++ b/src/assets/scss/1-core/_06-rwd.scss @@ -0,0 +1,84 @@ +/* ----------------------------------------------------------- */ +/* == rwd */ +/* ----------------------------------------------------------- */ + +/* responsive iframe http://www.smashingmagazine.com/2014/02/27/making-embedded-content-work-in-responsive-design/ */ + +.responsive-iframe { + position: relative; + overflow: hidden; + padding-top: 3rem; + padding-bottom: 56.25%; + height: 0; +} + +.responsive-iframe iframe, +.responsive-iframe object, +.responsive-iframe embed { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + + +/* utilities +-------------------------------------------------------------- */ + +.hidden { + display: none; +} + +@media (min-width: ($large + 1)) { + [class*="-l+"][class*="hidden-"]:not([class*="up"]) { + display: none !important; + } +} + +@media (min-width: ($medium + 1)) and (max-width: $large) { + [class*="-l"][class*="hidden-"]:not([class*="up"]) { + display: none !important; + } +} + +@media (min-width: ($small + 1)) and (max-width: $medium) { + [class*="-m"][class*="hidden-"]:not([class*="up"]) { + display: none !important; + } +} + +@media (min-width: ($xsmall + 1)) and (max-width: $small) { + [class*="-s"][class*="hidden-"]:not([class*="up"]) { + display: none !important; + } +} + +@media ( max-width: $xsmall) { + [class*="-xs"][class*="hidden-"]:not([class*="up"]) { + display: none !important; + } +} + +@media ( min-width: $small) { + .hidden-s-up { + display: none !important; + } +} + +@media ( min-width: $xsmall) { + .hidden-xs-up { + display: none !important; + } +} + +/* xsmall +-------------------------------------------------------------- */ + +@media (max-width: $xsmall) { + .mod { + display: block !important; + float: none !important; + width: auto !important; + } +} diff --git a/src/assets/scss/1-core/_debug.scss b/src/assets/scss/1-core/_debug.scss new file mode 100755 index 0000000..7a70c6f --- /dev/null +++ b/src/assets/scss/1-core/_debug.scss @@ -0,0 +1,41 @@ +/* ----------------------------------------------------------- */ +/* == debug */ +/* ----------------------------------------------------------- */ + +/* + * Generates a random color + * + */ + +@mixin randomColor { + $red: round(random()*222); + $green: round(random()*222); + $blue: round(random()*222); +} + + +/* + * Easily debug an element + * + */ + +@mixin debug() { + @include randomColor; + border: .3rem dotted rgb($red, $green, $blue); + background-color: rgba($red, $green, $blue, 30%); +} + + +/* + * Display grid for vertical rhythm + * + */ + +@mixin debug-rythm($bh: $line-height) { + background: linear-gradient(to bottom, #ba9b9a .1em, transparent .1em ) !important; + background-size: 100% ($bh + em) !important; +} + +.debug-rythm { + @include debug-rythm(); +} diff --git a/src/assets/scss/2-helpers/_alignment.scss b/src/assets/scss/2-helpers/_alignment.scss new file mode 100755 index 0000000..8c55f96 --- /dev/null +++ b/src/assets/scss/2-helpers/_alignment.scss @@ -0,0 +1,46 @@ +/* ----------------------------------------------------------- */ +/* == alignment */ +/* ----------------------------------------------------------- */ + +/* block +-------------------------------------------------------------- */ + +.left { + float: left; +} + +.right { + float: right; +} + +.center { + margin-right: auto; + margin-left: auto; +} + +/* text/inline +-------------------------------------------------------------- */ + +.txtright { + text-align: right; +} + +.txtcenter { + text-align: center; +} + +.txtleft { + text-align: left; +} + +.vtop { + vertical-align: top; +} + +.vbottom { + vertical-align: bottom; +} + +.vmiddle { + vertical-align: middle; +} diff --git a/src/assets/scss/2-helpers/_colors.scss b/src/assets/scss/2-helpers/_colors.scss new file mode 100755 index 0000000..50f8cad --- /dev/null +++ b/src/assets/scss/2-helpers/_colors.scss @@ -0,0 +1,11 @@ +/* ----------------------------------------------------------- */ +/* == colors */ +/* ----------------------------------------------------------- */ + +.color-primary { + color: $color-primary; +} + +.color-secondary { + color: $color-secondary; +} diff --git a/src/assets/scss/2-helpers/_spacing.scss b/src/assets/scss/2-helpers/_spacing.scss new file mode 100755 index 0000000..61fe540 --- /dev/null +++ b/src/assets/scss/2-helpers/_spacing.scss @@ -0,0 +1,179 @@ +/* ----------------------------------------------------------- */ +/* == spacings */ +/* ----------------------------------------------------------- */ + +.ma0 { + margin: 0; +} + +.pa0 { + padding: 0; +} + +.ma1 { + margin: 1rem; +} + +.ma2 { + margin: 2rem; +} + +.ma3 { + margin: 3rem; +} + +.pa1 { + padding: 1rem; +} + +.pa2 { + padding: 2rem; +} + +.pa3 { + padding: 3rem; +} + +.mt0 { + margin-top: 0; +} + +.mt1 { + margin-top: 1rem; +} + +.mt2 { + margin-top: 2rem; +} + +.mt3 { + margin-top: 3rem; +} + +.mt4 { + margin-top: 4rem; +} + +.mt5 { + margin-top: 5rem; +} + +.mr0 { + margin-right: 0; +} + +.mr1 { + margin-right: 1rem; +} + +.mr2 { + margin-right: 2rem; +} + +.mr3 { + margin-right: 3rem; +} + +.mb0 { + margin-bottom: 0; +} + +.mb1 { + margin-bottom: 1rem; +} + +.mb2 { + margin-bottom: 2rem; +} + +.mb3 { + margin-bottom: 3rem; +} + +.mb4 { + margin-bottom: 4rem; +} + +.mb5 { + margin-bottom: 5rem; +} + +.ml0 { + margin-left: 0; +} + +.ml1 { + margin-left: 1rem; +} + +.ml2 { + margin-left: 2rem; +} + +.ml3 { + margin-left: 3rem; +} + +.pt0 { + padding-top: 0; +} + +.pt1 { + padding-top: 1rem; +} + +.pt2 { + padding-top: 2rem; +} + +.pt3 { + padding-top: 3rem; +} + +.pr0 { + padding-right: 0; +} + +.pr1 { + padding-right: 1rem; +} + +.pr2 { + padding-right: 2rem; +} + +.pr3 { + padding-right: 3rem; +} + +.pb0 { + padding-bottom: 0; +} + +.pb1 { + padding-bottom: 1rem; +} + +.pb2 { + padding-bottom: 2rem; +} + +.pb3 { + padding-bottom: 3rem; +} + +.pl0 { + padding-left: 0; +} + +.pl1 { + padding-left: 1rem; +} + +.pl2 { + padding-left: 2rem; +} + +.pl3 { + padding-left: 3rem; +} diff --git a/src/assets/scss/2-helpers/_state.scss b/src/assets/scss/2-helpers/_state.scss new file mode 100755 index 0000000..e872f35 --- /dev/null +++ b/src/assets/scss/2-helpers/_state.scss @@ -0,0 +1,7 @@ +/* ----------------------------------------------------------- */ +/* == state */ +/* ----------------------------------------------------------- */ + +.is-disabled { + cursor: not-allowed; +} diff --git a/src/assets/scss/2-helpers/_text.scss b/src/assets/scss/2-helpers/_text.scss new file mode 100755 index 0000000..0d0ae0e --- /dev/null +++ b/src/assets/scss/2-helpers/_text.scss @@ -0,0 +1,45 @@ +/* ----------------------------------------------------------- */ +/* == text */ +/* ----------------------------------------------------------- */ + +.bold { + font-weight: bold; +} + +.italic { + font-style: italic; +} + +/* font size +-------------------------------------------------------------- */ + +.txtsmaller { + @include flow($base-font - 4); +} + +.txtsmall { + @include flow($base-font - 2); +} + +.txtbig { + @include flow($base-font + 2); +} + +.txtbigger { + @include flow($base-font + 4); +} + +/* transformations +-------------------------------------------------------------- */ + +.uppercase { + text-transform: uppercase;; +} + +.capitalize { + text-transform: capitalize; +} + +.lowercase { + text-transform: lowercase; +} diff --git a/src/assets/scss/2-helpers/_width.scss b/src/assets/scss/2-helpers/_width.scss new file mode 100755 index 0000000..0783b4e --- /dev/null +++ b/src/assets/scss/2-helpers/_width.scss @@ -0,0 +1,18 @@ +/* ----------------------------------------------------------- */ +/* == width */ +/* ----------------------------------------------------------- */ + +.w10 { width: 10%; } +.w20 { width: 20%; } +.w25 { width: 25%; } +.w30 { width: 30%; } +.w33 { width: 33.3333%; } +.w40 { width: 40%; } +.w50 { width: 50%; } +.w60 { width: 60%; } +.w66 { width: 66.6666%; } +.w70 { width: 70%; } +.w75 { width: 75%; } +.w80 { width: 80%; } +.w90 { width: 90%; } +.w100 { width: 100%; } diff --git a/src/assets/scss/3-components/_buttons.scss b/src/assets/scss/3-components/_buttons.scss new file mode 100755 index 0000000..9209774 --- /dev/null +++ b/src/assets/scss/3-components/_buttons.scss @@ -0,0 +1,93 @@ +/** +* Button Module +* namespace : .btn +*/ + +/* ----------------------------------------------------------- */ +/* == configuration */ +/* ----------------------------------------------------------- */ + + +$btn-primary: $color-primary; +$btn-secondary: $color-secondary; +$btn-success: #1cb841; +$btn-danger: #c53a3a; +$btn-hover: 5%; +$btn-radius: .2rem; + + +/* ----------------------------------------------------------- */ +/* == module */ +/* ----------------------------------------------------------- */ + +.btn { + display: inline-block; + padding: .8em 1.6em; + border: none; + border-radius: $btn-radius; + background-color: $btn-primary; + box-shadow: none; + color: #fff; + vertical-align: middle; + text-align: center; + text-decoration: none !important; + line-height: normal; + cursor: pointer; + transition: background-color .4s; +} + +.btn:active, +.btn:focus { + outline: none; + box-shadow: $focus-ring; +} + +/* colors +-------------------------------------------------------------- */ + +.btn--primary, +.btn--primary:link, +.btn--primary:visited { + background-color: $btn-primary; + color: #fff; +} + +.btn--primary:hover, +.btn--primary:active, +.btn--primary:focus { + background-color: darken($btn-primary, $btn-hover); +} + +.btn--secondary, +.btn--secondary:link, +.btn--secondary:visited { + background-color: $btn-secondary; + color: #fff; +} + +.btn--secondary:hover, +.btn--secondary:active, +.btn--secondary:focus { + background-color: darken($btn-secondary, $btn-hover); +} + +.btn--danger, +.btn--danger:link, +.btn--danger:visited { + background-color: $btn-danger; + color: #fff; +} + + +.btn--danger:hover, +.btn--danger:active, +.btn--danger:focus { + background-color: darken($btn-danger, $btn-hover); +} + +/* size +-------------------------------------------------------------- */ + +.btn--big { + font-size: $base-font + 4; +} diff --git a/src/assets/scss/3-components/_forms.scss b/src/assets/scss/3-components/_forms.scss new file mode 100755 index 0000000..e14218d --- /dev/null +++ b/src/assets/scss/3-components/_forms.scss @@ -0,0 +1,205 @@ +/** + * Form Module + * Namespace : .form + */ + + +/* ----------------------------------------------------------- */ +/* == configuration */ +/* ----------------------------------------------------------- */ + + +$input-border-radius: .4rem; +$input-border: .1rem solid #d8d8d8; +$input-background-color: #fff; +$input-hover: 5%; +$input-placeholder-color: #c4c1be; +$input-error: #ff3860; +$input-required: #ff3860; + + +/* ----------------------------------------------------------- */ +/* == module */ +/* ----------------------------------------------------------- */ + +/* placeholders +-------------------------------------------------------------- */ + +input::-webkit-input-placeholder { + color: $input-placeholder-color; +} +input:-moz-placeholder { + color: $input-placeholder-color; +} +textarea::-webkit-input-placeholder { + color: $input-placeholder-color; +} +textarea:-moz-placeholder { + color: $input-placeholder-color; +} + +/* block form +-------------------------------------------------------------- */ + +label, +.label { + display: block; + margin-top: 1.3em; + margin-bottom: .8em; + vertical-align: middle; + cursor: pointer; +} + +/* inline form +-------------------------------------------------------------- */ + +.f-inline label, +.f-inline .label { + display: inline-block; + margin: 0 1rem; +} + +.f-inline { + display: inline-block; +} + +.f-inline input, +.f-inline .btn { + height: 4rem; +} + +.f-inline .btn { + vertical-align: middle; +} + + +/* basics style +-------------------------------------------------------------- */ + +fieldset { + margin: 2.5rem 0; + padding: 1em; + border: .1rem solid #d8d8d8; +} + +input, +select, +label, +.label { + vertical-align: middle; +} + +select { + margin: 0; + border: .1rem solid #ccc; + background-color: #fff; +} + +textarea { + padding: .4em; + min-width: 32rem; + min-height: 8em; + vertical-align: top; + resize: vertical; +} + +input { + padding: .8em; + max-width: 32rem; + width: 100%; + border: $input-border; + border-radius: $input-border-radius; + background: $input-background-color; + box-shadow: inset 0 1px 2px rgba(10, 10, 10, .08); +} + +textarea:active, +textarea:focus, +select:active, +select:focus, +input:active, +input:focus { + outline: none; + box-shadow: $focus-ring; +} + +input[type="radio"] + label, +input[type="checkbox"] + label { + display: inline-block; + margin-right: 1rem; + vertical-align: baseline; +} + +input[type="radio"], +input[type="checkbox"] { + padding: 0; + width: inherit; +} + +/* autogrid +-------------------------------------------------------------- */ + +[class^="f-grid"] { + display: flex; + flex-wrap: nowrap; + align-items: flex-end; +} + +[class^="f-grid"] > * { + display: flex; + flex-direction: column; + flex: 1 0 0; + margin-left: 2rem; +} + +[class^="f-grid"] > *:first-child { + margin-left: 0; +} + +[class^="f-grid"] input { + max-width: 100%; +} + +/* size +-------------------------------------------------------------- */ + +.f-size-1 { + max-width: 10rem; +} + +.f-size-2 { + max-width: 20rem; +} + +.f-size-3 { + max-width: 30rem; +} + +.f-size-4 { + max-width: 40rem; +} + +.f-size-5 { + max-width: 50rem; +} + +.f-size-full { + max-width: 100%; +} + +/* errors +-------------------------------------------------------------- */ + +.f-required { + color: $input-error; + font-weight: bold; +} + +.f-error input { + margin-bottom: .8rem; + border: .1rem solid $input-error; +} + +.f-error-message { + color: $input-error; +} diff --git a/src/assets/scss/3-components/_notifications.scss b/src/assets/scss/3-components/_notifications.scss new file mode 100755 index 0000000..38795c2 --- /dev/null +++ b/src/assets/scss/3-components/_notifications.scss @@ -0,0 +1,36 @@ +/** + * Notification module + * Namespace : .notif + */ + +/* ----------------------------------------------------------- */ +/* == configuration */ +/* ----------------------------------------------------------- */ + +$notif-success: #00d1b2; +$notif-warning: #ffdd57; +$notif-error: #ff3860; + +/* ----------------------------------------------------------- */ +/* == module */ +/* ----------------------------------------------------------- */ + +.notif { + padding: 1em; + border-radius: 4px; +} + +.notif--success { + background-color: $notif-success; + color: #fff; +} + +.notif--warning { + background-color: $notif-warning; + color: #fff; +} + +.notif--error { + background-color: $notif-error; + color: #fff; +} diff --git a/src/assets/scss/3-components/_pagination.scss b/src/assets/scss/3-components/_pagination.scss new file mode 100755 index 0000000..3e74037 --- /dev/null +++ b/src/assets/scss/3-components/_pagination.scss @@ -0,0 +1,54 @@ +/** + * Pagination Module + * namespace : .pagination + */ + +/* ----------------------------------------------------------- */ +/* == configuration */ +/* ----------------------------------------------------------- */ + + +$pagination-border-radius: .2rem; +$pagination-border: .1rem solid grey; +$pagination-hover-color: $color-secondary; +$pagination-current-bg: $color-primary; +$pagination-current-color: #fff; + + +/* ----------------------------------------------------------- */ +/* == module */ +/* ----------------------------------------------------------- */ + +.pagination { + display: inline-block; + margin: 2rem 0; + border-radius: .4rem; +} + +.pagination, +.pagination li { + margin: 0; + padding: 0; +} + +.pagination li { + display: inline-block; + margin: 0 .3rem 1em; + list-style-type: none; +} + +.pagination li a, +.pagination li > span { + padding: .3em .6em; + border: $pagination-border; + border-radius: $pagination-border-radius; +} + +.pagination li a:hover { + color: $pagination-hover-color; +} + +.pagination li.current a { + background-color: $pagination-current-bg; + color: $pagination-current-color; +} diff --git a/src/assets/scss/3-components/_radiobox.scss b/src/assets/scss/3-components/_radiobox.scss new file mode 100755 index 0000000..751ffe4 --- /dev/null +++ b/src/assets/scss/3-components/_radiobox.scss @@ -0,0 +1,71 @@ +/** + * Radiobox Module + * Namespace : .radiobox + */ + +/* ----------------------------------------------------------- */ +/* == module */ +/* ----------------------------------------------------------- */ + +.radiobox { + display: inline-flex; + padding: .2rem; + max-width: 32rem; + width: 100%; + border: $input-border; + border-radius: $input-border-radius; +} + +.radiobox--full { + max-width: 100%; + width: 100%; +} + +.radiobox input { + position: absolute; + left: -9999px; +} + +.radiobox input + label { + display: flex; + justify-content: center; + align-items: center; + flex-grow: 1; + margin: 0; + padding: 1rem 1.8rem; + min-height: 4rem; + width: 50%; + text-align: center; + font-weight: normal; + transition: all .05s ease-in; +} + +.radiobox input:first-child + label { + border-radius: ($input-border-radius - .2rem) 0 0 ($input-border-radius - .2rem); +} + +.radiobox label:last-child { + border-radius: 0 ($input-border-radius - .2rem) ($input-border-radius - .2rem) 0; +} + +/* Checked state */ + +.radiobox input:checked + label { + background-color: $color-primary; + color: #fff; +} + +/* Focus state */ + +.radiobox input:focus + label { + box-shadow: $focus-ring; +} + +.radiobox:active, +.radiobox:focus-within { + box-shadow: $focus-ring; +} + +.radiobox:focus-within input:focus + label { + box-shadow: none; +} diff --git a/src/assets/scss/3-components/_switch.scss b/src/assets/scss/3-components/_switch.scss new file mode 100755 index 0000000..d7dbc55 --- /dev/null +++ b/src/assets/scss/3-components/_switch.scss @@ -0,0 +1,49 @@ +/** + * Switch Module + * Namespace: .switch + */ + +/* ----------------------------------------------------------- */ +/* == module */ +/* ----------------------------------------------------------- */ + +.switch[type="checkbox"] { + position: relative; + margin-top: -.05em; + width: 4rem; + height: 2rem; + outline: none; + border: $input-border; + border-radius: 42rem; + background-color: white; + box-shadow: inset -2rem 0 0 .1rem rgba(192, 192, 192, .5); + transition: .2s; + + appearance: none; +} + +.switch[type="checkbox"]::-ms-check { + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; // IE 8 +} + +/* Checked state +-------------------------------------------------------------- */ + +.switch[type="checkbox"]:checked { + border-color: $color-primary; + box-shadow: inset 2rem 0 0 .1rem rgba($color-primary, .7); +} + +/* Focus state +-------------------------------------------------------------- */ + +.switch[type="checkbox"]:active, +.switch[type="checkbox"]:focus { + box-shadow: inset -2rem 0 0 .1rem rgba(192, 192, 192, .5), $focus-ring; +} + +.switch[type="checkbox"]:checked:active, +.switch[type="checkbox"]:checked:focus { + box-shadow: inset 2rem 0 0 .1rem rgba($color-primary, .7), $focus-ring; +} diff --git a/src/assets/scss/3-components/_tables.scss b/src/assets/scss/3-components/_tables.scss new file mode 100755 index 0000000..b3f9edc --- /dev/null +++ b/src/assets/scss/3-components/_tables.scss @@ -0,0 +1,56 @@ +/** + * Table Module + * namespace : .table + */ + + +/* ----------------------------------------------------------- */ +/* == configuration */ +/* ----------------------------------------------------------- */ + + + +/* ----------------------------------------------------------- */ +/* == module */ +/* ----------------------------------------------------------- */ + +.table { + max-width: 100%; + width: 100%; + border: .1rem solid #cbcbcb; + border-spacing: 0; + border-collapse: collapse /* remove spacing between table cells */; + table-layout: fixed /* http://css-tricks.com/fixing-tables-long-strings */; +} + +.table caption { + padding: 1em 0; + color: #000; + text-align: center; + font: italic 85%/1 arial, sans-serif; +} + +.table td, +.table th { + overflow: hidden; + margin: 0; + padding: .5em 1em; + border-width: 0 0 0 .1rem; + border-left: .1rem solid #cbcbcb; + text-overflow: ellipsis; + white-space: nowrap; + word-wrap: break-word; + font-size: inherit; +} + +.table td:first-child, +.table th:first-child { + border-left-width: 0; +} + +.table thead { + background: #e0e0e0; + color: #000; + vertical-align: bottom; + text-align: left; +} diff --git a/src/assets/scss/3-components/_tooltips.scss b/src/assets/scss/3-components/_tooltips.scss new file mode 100755 index 0000000..d186201 --- /dev/null +++ b/src/assets/scss/3-components/_tooltips.scss @@ -0,0 +1,51 @@ +/** + * Tooltip Module + * namespace : .tooltip + */ + + +/* ----------------------------------------------------------- */ +/* == configuration */ +/* ----------------------------------------------------------- */ + + +$tooltip-bg: rgba(0, 0, 0, .80); +$tooltip-color: #fff; +$tooltip-radius: .5em; + + +/* ----------------------------------------------------------- */ +/* == module */ +/* ----------------------------------------------------------- */ + +.tooltip { + position: relative; + cursor: help; +} + +.tooltip:after { + font-family: helvetica, arial, sans-serif; +} + +.tooltip:hover:after { + position: absolute; + bottom: 1.35em; + left: 1em; + padding: .5em 1em; + border-radius: $tooltip-radius; + background: $tooltip-bg; + color: $tooltip-color; + content: attr(data-tooltip); + white-space: nowrap; +} + +.tooltip:hover:before { + position: absolute; + bottom: 1em; + left: 2em; + display: block; + border: solid; + border-width: .4em .4em 0 .4em; + border-color: $tooltip-bg transparent; + content: ""; +} diff --git a/src/assets/scss/4-base/_01-fonts.scss b/src/assets/scss/4-base/_01-fonts.scss new file mode 100755 index 0000000..3d037dd --- /dev/null +++ b/src/assets/scss/4-base/_01-fonts.scss @@ -0,0 +1,3 @@ +/* ----------------------------------------------------------- */ +/* == custom fonts */ +/* ----------------------------------------------------------- */ diff --git a/src/assets/scss/4-base/_02-icons.scss b/src/assets/scss/4-base/_02-icons.scss new file mode 100755 index 0000000..7409ec8 --- /dev/null +++ b/src/assets/scss/4-base/_02-icons.scss @@ -0,0 +1,3 @@ +/* ----------------------------------------------------------- */ +/* == icons */ +/* ----------------------------------------------------------- */ diff --git a/src/assets/scss/4-base/_03-grids.scss b/src/assets/scss/4-base/_03-grids.scss new file mode 100755 index 0000000..6bb9334 --- /dev/null +++ b/src/assets/scss/4-base/_03-grids.scss @@ -0,0 +1,44 @@ +/* ----------------------------------------------------------- */ +/* == grids */ +/* ----------------------------------------------------------- */ + +$grid-gutter: 2rem; +$grid-mb: 2rem; + +/** + * Some grid examples + */ + +.grid-1 { + @include grid(1, $grid-gutter, $grid-mb); +} + +.grid-2 { + @include grid(2, $grid-gutter); +} + +.grid-3 { + @include grid(3, $grid-gutter); +} + +.grid-4 { + @include grid(4, $grid-gutter); +} + +.grid-2-noGutter { + @include grid(2, 0, 0); +} + +.grid-1-3 { + @include unequalGrid(1, 3, $grid-gutter, 2rem); +} + +@media (max-width: $xsmall) { + .grid-1-xs { + @include grid(1); + } + + .grid-2-xs { + @include grid(2); + } +} diff --git a/src/assets/scss/4-base/_04-main.scss b/src/assets/scss/4-base/_04-main.scss new file mode 100755 index 0000000..de84051 --- /dev/null +++ b/src/assets/scss/4-base/_04-main.scss @@ -0,0 +1,78 @@ +/* ----------------------------------------------------------- */ +/* == main */ +/* ----------------------------------------------------------- */ + +body { + background-color: #fff; + color: $color-dark-text; + font-family: $fontstack1; + + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.container { + margin-right: auto; + margin-left: auto; + padding-right: 1rem; + padding-left: 1rem; + max-width: 102.4rem; +} + +/* titles +-------------------------------------------------------------- */ + +h1 { + @include flow(50); +} + +h2 { + @include flow(22); +} + +h3 { + @include flow(18); +} + +h4 { + @include flow(16); +} + +/* links +-------------------------------------------------------------- */ + +a, +a:visited { + color: $color-link; + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +a:focus { + outline: none; + border-radius: .3rem; + box-shadow: $focus-ring; +} + +/* lists +-------------------------------------------------------------- */ + +ul { + padding-left: 2rem; + list-style-type: disc; +} + +/* divers +-------------------------------------------------------------- */ + +hr { + display: block; + margin: 1em 0; + padding: 0; + height: .1rem; + border: 0; + border-top: .1rem solid #ccc; +} diff --git a/src/assets/scss/4-base/_05-layout.scss b/src/assets/scss/4-base/_05-layout.scss new file mode 100755 index 0000000..e69de29 diff --git a/src/assets/scss/4-base/_06-header.scss b/src/assets/scss/4-base/_06-header.scss new file mode 100755 index 0000000..3e586d2 --- /dev/null +++ b/src/assets/scss/4-base/_06-header.scss @@ -0,0 +1,6 @@ +/* ----------------------------------------------------------- */ +/* == header */ +/* ----------------------------------------------------------- */ + +.header { +} diff --git a/src/assets/scss/4-base/_07-navigation.scss b/src/assets/scss/4-base/_07-navigation.scss new file mode 100755 index 0000000..1b7ec3f --- /dev/null +++ b/src/assets/scss/4-base/_07-navigation.scss @@ -0,0 +1,6 @@ +/* ----------------------------------------------------------- */ +/* == navigation */ +/* ----------------------------------------------------------- */ + +.navigation { +} diff --git a/src/assets/scss/4-base/_08-content.scss b/src/assets/scss/4-base/_08-content.scss new file mode 100755 index 0000000..f6b769a --- /dev/null +++ b/src/assets/scss/4-base/_08-content.scss @@ -0,0 +1,6 @@ +/* ----------------------------------------------------------- */ +/* == content */ +/* ----------------------------------------------------------- */ + +.content { +} diff --git a/src/assets/scss/4-base/_09-footer.scss b/src/assets/scss/4-base/_09-footer.scss new file mode 100755 index 0000000..f380232 --- /dev/null +++ b/src/assets/scss/4-base/_09-footer.scss @@ -0,0 +1,19 @@ +/* ----------------------------------------------------------- */ +/* == footer */ +/* ----------------------------------------------------------- */ + +.footer { + padding: 2rem 0; +} + +.footer ul, +.footer li { + margin: 0; + padding: 0; +} + +.footer a, +.footer a:hover, +.footer a:visited { + color: $color-link; +} diff --git a/src/assets/scss/5-modules/.gitkeep b/src/assets/scss/5-modules/.gitkeep new file mode 100755 index 0000000..e69de29 diff --git a/src/assets/scss/6-pages/.gitkeep b/src/assets/scss/6-pages/.gitkeep new file mode 100755 index 0000000..e69de29 diff --git a/src/assets/scss/7-vendors/.gitkeep b/src/assets/scss/7-vendors/.gitkeep new file mode 100755 index 0000000..e69de29 diff --git a/src/assets/scss/8-rwd/_rwd-large.scss b/src/assets/scss/8-rwd/_rwd-large.scss new file mode 100755 index 0000000..b90b88e --- /dev/null +++ b/src/assets/scss/8-rwd/_rwd-large.scss @@ -0,0 +1,6 @@ +/* ----------------------------------------------------------- */ +/* == rwd -> large */ +/* ----------------------------------------------------------- */ + +@media (max-width: $large) { +} diff --git a/src/assets/scss/8-rwd/_rwd-medium.scss b/src/assets/scss/8-rwd/_rwd-medium.scss new file mode 100755 index 0000000..cd19519 --- /dev/null +++ b/src/assets/scss/8-rwd/_rwd-medium.scss @@ -0,0 +1,6 @@ +/* ----------------------------------------------------------- */ +/* == rwd -> medium */ +/* ----------------------------------------------------------- */ + +@media (max-width: $medium) { +} diff --git a/src/assets/scss/8-rwd/_rwd-small.scss b/src/assets/scss/8-rwd/_rwd-small.scss new file mode 100755 index 0000000..7f23ad3 --- /dev/null +++ b/src/assets/scss/8-rwd/_rwd-small.scss @@ -0,0 +1,6 @@ +/* ----------------------------------------------------------- */ +/* == rwd -> small */ +/* ----------------------------------------------------------- */ + +@media (max-width: $small) { +} diff --git a/src/assets/scss/8-rwd/_rwd-xsmall.scss b/src/assets/scss/8-rwd/_rwd-xsmall.scss new file mode 100755 index 0000000..a808596 --- /dev/null +++ b/src/assets/scss/8-rwd/_rwd-xsmall.scss @@ -0,0 +1,6 @@ +/* ----------------------------------------------------------- */ +/* == rwd -> xsmall */ +/* ----------------------------------------------------------- */ + +@media (max-width: $xsmall) { +} diff --git a/src/assets/scss/8-rwd/_rwd.scss b/src/assets/scss/8-rwd/_rwd.scss new file mode 100755 index 0000000..f7595d5 --- /dev/null +++ b/src/assets/scss/8-rwd/_rwd.scss @@ -0,0 +1,3 @@ +/* ----------------------------------------------------------- */ +/* == rwd */ +/* ----------------------------------------------------------- */ diff --git a/src/assets/scss/_colors.scss b/src/assets/scss/_colors.scss new file mode 100755 index 0000000..bdf4921 --- /dev/null +++ b/src/assets/scss/_colors.scss @@ -0,0 +1,34 @@ +// -------------------------------------------------------------- +// == colors */ +// -------------------------------------------------------------- + +// palette +// -------------------------------------------------------------- + +$color-primary: #3498db; +$color-secondary: #1abc9c; +$color-tertiary: #34495e; +$color-info: #2185d0; + +// texts +// -------------------------------------------------------------- + +$color-light-text: #fcfcfc; +$color-dark-text: #000; + +// links +// -------------------------------------------------------------- + +$color-link: $color-primary; + +// brand +// -------------------------------------------------------------- + +$color-twitter: #55acee; +$color-facebook: #3b5998; +$color-google: #dd4b39; +$color-youtube: #e52d27; +$color-pinterest: #cc2127; +$color-vimeo: #1ab7ea; +$color-linkedin: #0976b4; +$color-instagram: #3f729b; diff --git a/src/assets/scss/_config.scss b/src/assets/scss/_config.scss new file mode 100755 index 0000000..29d60af --- /dev/null +++ b/src/assets/scss/_config.scss @@ -0,0 +1,29 @@ +// -------------------------------------------------------------- +// == config */ +// -------------------------------------------------------------- + +// base +// -------------------------------------------------------------- + +$base-font: 14; // px value (without unit), will be converted in em +$line-height: 1.5; +$fontstack1: "Helvetica Neue", Helvetica, Arial, sans-serif; +$fontstack2: Georgia, Times, "Times New Roman", serif; + +// responsive +// -------------------------------------------------------------- + +$xsmall: 480px; +$small: 768px; +$medium: 960px; +$large: 1280px; + +// default gutter +// -------------------------------------------------------------- + +$default-gutter: 2rem; + +// Focus ring +// -------------------------------------------------------------- + +$focus-ring: 0 0 0 .3rem rgba($color-info, .5); diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss new file mode 100755 index 0000000..95037a3 --- /dev/null +++ b/src/assets/scss/style.scss @@ -0,0 +1,92 @@ +// -------------------------------------------------------------- +// == config */ +// -------------------------------------------------------------- + +@import "_colors"; +@import "_config"; + +// -------------------------------------------------------------- +// == core */ +// -------------------------------------------------------------- + +@import "1-core/_00-mixins"; +@import "1-core/_01-reset"; +@import "1-core/_02-typography"; +@import "1-core/_03-helpers"; +@import "1-core/_04-layout"; +@import "1-core/_05-flexgrid"; +@import "1-core/_06-rwd"; +@import "1-core/_debug"; + +// -------------------------------------------------------------- +// == helpers */ +// -------------------------------------------------------------- + +@import "2-helpers/_alignment"; +@import "2-helpers/_colors"; +@import "2-helpers/_spacing"; +@import "2-helpers/_text"; +@import "2-helpers/_width"; + +// -------------------------------------------------------------- +// == components */ +// -------------------------------------------------------------- + +@import "3-components/_forms"; +@import "3-components/_switch"; +@import "3-components/_radiobox"; +@import "3-components/_buttons"; +@import "3-components/_pagination"; +@import "3-components/_tables"; +@import "3-components/_tooltips"; +@import "3-components/_notifications"; + + +// -------------------------------------------------------------- +// == base */ +// -------------------------------------------------------------- + +@import "4-base/_01-fonts"; +@import "4-base/_02-icons"; +@import "4-base/_03-grids"; +@import "4-base/_04-main"; +@import "4-base/_05-layout"; +@import "4-base/_06-header"; +@import "4-base/_07-navigation"; +@import "4-base/_08-content"; +@import "4-base/_09-footer"; + + +// -------------------------------------------------------------- +// == modules */ +// -------------------------------------------------------------- + +//@import '5-modules/...'; + + +// -------------------------------------------------------------- +// == pages */ +// -------------------------------------------------------------- + +// @import '6-pages/...'; + + +// -------------------------------------------------------------- +// == vendors */ +// -------------------------------------------------------------- + +// Tips: load vendor from your package manager and override CSS here (e.g. o-vendor-name.scss) +// In this context, "o" means "override" and you can use it as a convention. + +// @import '7-vendors/o-vendor.scss'; + + +// -------------------------------------------------------------- +// == rwd */ +// -------------------------------------------------------------- + +@import "8-rwd/_rwd-large"; +@import "8-rwd/_rwd-medium"; +@import "8-rwd/_rwd-small"; +@import "8-rwd/_rwd-xsmall"; +@import "8-rwd/_rwd"; diff --git a/src/index.html b/src/index.html index e007ef1..f823c26 100644 --- a/src/index.html +++ b/src/index.html @@ -5,7 +5,7 @@ Eldritch Radio - + diff --git a/src/main.css b/src/main.css deleted file mode 100644 index 1c4e835..0000000 --- a/src/main.css +++ /dev/null @@ -1,8 +0,0 @@ -html, body { - width: 100%; - height: 100%; -} - -body { - margin: 0; -} \ No newline at end of file