novoland-developer-networks/OfficialSite
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Change structure/import order of the SCSS to properly follow ITCSS. Add layer description to README.

Browse Source 
We were doing it wrong.
This commit is contained in:
Antoine Boulanger
2015-02-15 15:44:11 -05:00
parent a0ccfc62d3
commit 8a335ab020
21 changed files with 511 additions and 366 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
README.md
View File

@@ -2,3 +2,20 @@ Charcoal-Boilerplate
======================
Boilerplate for [`Charcoal`](#http://charcoal.locomotive.ca) projects by Locomotive.
## SCSS
### Import order
* **Settings:** Global variables, site-wide settings, config switches, etc.
* **Tools:** Site-wide mixins and functions.
* **Generic:** Low-specificity, far-reaching rulesets (e.g. resets).
* **Base:** Unclassed HTML elements (e.g. `a {}`, `blockquote {}`, `address {}`).
* **Objects:** Objects, abstractions, and design patterns (e.g. `.media {}`).
* **Components:** Discrete, complete chunks of UI (e.g. `.carousel {}`). This is
the one layer that inuitcss doesn’t get involved with.
* **Trumps:** High-specificity, very explicit selectors. Overrides and helper
classes (e.g. `.hidden {}`).
*From [ITCSS](https://twitter.com/itcss_io)*

3
project-x/modules/boilerplate/Gruntfile.js
View File

@@ -88,6 +88,9 @@ module.exports = function(grunt) {
// csscomb: Sort CSS properties in specific order.
csscomb: {
options: {
config: 'grunt_tasks/.csscomb.json'
},
build: {
expand: true,
cwd: 'assets/styles/src/',

318
project-x/modules/boilerplate/assets/styles/dist/main.css vendored
View File

@@ -9,23 +9,22 @@
========================================================================== */
/* Typography
========================================================================== */
/* Colour Palette
/* Colors
========================================================================== */
/* Container
========================================================================== */
/* Spacings
========================================================================== */
/* Z-index
========================================================================== */
/* Screen widths
========================================================================== */
/* Transitions
========================================================================== */
/* ==========================================================================
Functions
Tools
========================================================================== */
/* ==========================================================================
Mixins
/* Functions
========================================================================== */
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
@@ -34,9 +33,9 @@
html {
font-family: sans-serif;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */ }
/**
@@ -49,10 +48,11 @@ body {
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block; }
/**
@@ -86,7 +86,7 @@ audio:not([controls]) {
* Remove the gray background color from active links in IE 10.
*/
a {
background: transparent; }
background-color: transparent; }
/**
* Improve readability when focused and also mouse hovered in all browsers.
@@ -127,7 +127,7 @@ h1 {
*/
mark {
color: #000000;
background: #FFFF00; }
background: #ffff00; }
/**
* Address inconsistent and variable font size in all browsers.
@@ -306,7 +306,7 @@ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webki
fieldset {
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
border: 1px solid #C0C0C0; }
border: 1px solid #c0c0c0; }
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
@@ -343,28 +343,49 @@ table {
td, th {
padding: 0; }
/* ==========================================================================
Generic
========================================================================== */
html {
box-sizing: border-box; }
*, *:before, *:after {
box-sizing: inherit; }
audio, canvas, iframe, img, svg, video {
vertical-align: middle; }
fieldset {
margin: 0;
padding: 0;
border: 0; }
textarea {
resize: vertical; }
button {
border: none;
outline: none;
background-color: none; }
/* ==========================================================================
Fonts
========================================================================== */
/* ==========================================================================
Base
========================================================================== */
*, *:before, *:after {
box-sizing: inherit; }
html {
font-family: sans-serif;
font-size: 16px;
line-height: 1.4;
box-sizing: border-box;
color: #222222; }
::-moz-selection {
background: #B3D4FC;
background: #3297fd;
text-shadow: none; }
::selection {
background: #B3D4FC;
background: #3297fd;
text-shadow: none; }
hr {
@@ -373,85 +394,16 @@ hr {
margin: 1em 0;
padding: 0;
border: 0;
border-top: 1px solid #CCCCCC; }
border-top: 1px solid #cccccc; }
img, svg {
max-width: 100%;
vertical-align: middle; }
textarea {
resize: vertical; }
max-width: 100%; }
a {
color: #1A0DAB; }
color: #1a0dab; }
a:hover {
color: #13097c; }
button {
outline: none;
border: none;
background-color: none; }
.container {
position: relative;
margin: 0 auto; }
/* ==========================================================================
Grid
========================================================================== */
.grid {
font-size: 0;
letter-spacing: normal;
position: relative;
margin-left: -20px; }
.grid--full {
margin-left: 0; }
.grid--full > .grid__item, .grid--full > .whole, .grid--full > .half, .grid--full > .third, .grid--full > .two-thirds, .grid--full > .quarter, .grid--full > .three-quarters, .grid--full > .fifth {
margin-bottom: 0;
padding-left: 0; }
.grid__item, .whole, .half, .third, .two-thirds, .quarter, .three-quarters, .fifth {
font-size: 16px;
display: inline-block;
width: 100%;
margin-bottom: 20px;
padding-left: 20px;
vertical-align: top; }
@media (min-width: 1024px) {
.half {
width: 50%; } }
@media (min-width: 1024px) {
.third {
width: 33.3333333333%; } }
@media (min-width: 1024px) {
.two-thirds {
width: 66.6666666667%; } }
@media (min-width: 768px) and (max-width: 1023px) {
.quarter {
width: 50%; } }
@media (min-width: 1024px) {
.quarter {
width: 25%; } }
@media (min-width: 768px) and (max-width: 1023px) {
.three-quarters {
width: 50%; } }
@media (min-width: 1024px) {
.three-quarters {
width: 75%; } }
@media (min-width: 768px) and (max-width: 1023px) {
.fifth {
width: 50%; } }
@media (min-width: 1024px) {
.fifth {
width: 20%; } }
/* ==========================================================================
Headings
========================================================================== */
@@ -497,7 +449,7 @@ h6, .h6, .zeta {
border: none;
border-radius: 0;
outline: none;
background-color: #CCCCCC;
background-color: #cccccc;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; }
@@ -516,7 +468,7 @@ h6, .h6, .zeta {
height: 100%;
content: "";
pointer-events: none;
background-color: #CCCCCC;
background-color: #cccccc;
background-image: url("../../images/select-arrow.svg");
background-repeat: no-repeat;
background-position: center; }
@@ -550,16 +502,77 @@ h6, .h6, .zeta {
background-repeat: no-repeat;
background-position: center; }
/* ==========================================================================
Container
========================================================================== */
.container {
position: relative;
max-width: none0;
margin: 0 auto;
padding-right: 0;
padding-left: 0; }
/* ==========================================================================
Grid
========================================================================== */
.grid {
font-size: 0;
position: relative;
margin-left: -20px;
letter-spacing: normal; }
.grid--full {
margin-left: 0; }
.grid--full > .grid__item, .grid--full > .whole, .grid--full > .half, .grid--full > .third, .grid--full > .two-thirds, .grid--full > .quarter, .grid--full > .three-quarters, .grid--full > .fifth {
margin-bottom: 0;
padding-left: 0; }
.grid__item, .whole, .half, .third, .two-thirds, .quarter, .three-quarters, .fifth {
font-size: 16px;
display: inline-block;
margin-bottom: 20px;
padding-left: 20px;
vertical-align: top; }
.whole {
width: 100%; }
@media (min-width: 1024px) {
.half {
width: 50%; } }
@media (min-width: 1024px) {
.third {
width: 33.3333333333%; } }
@media (min-width: 1024px) {
.two-thirds {
width: 66.6666666667%; } }
@media (min-width: 768px) and (max-width: 1023px) {
.quarter {
width: 50%; } }
@media (min-width: 1024px) {
.quarter {
width: 25%; } }
@media (min-width: 768px) and (max-width: 1023px) {
.three-quarters {
width: 50%; } }
@media (min-width: 1024px) {
.three-quarters {
width: 75%; } }
@media (min-width: 768px) and (max-width: 1023px) {
.fifth {
width: 50%; } }
@media (min-width: 1024px) {
.fifth {
width: 20%; } }
/* ==========================================================================
Helpers
========================================================================== */
.clearfix:before, .clearfix:after {
display: table;
content: " "; }
.clearfix:after {
clear: both; }
.vertical-center {
height: 100%;
text-align: center; }
@@ -572,6 +585,67 @@ h6, .h6, .zeta {
display: inline-block;
vertical-align: middle; }
/*
* Hide visually and from screen readers:
* http://juicystudio.com/article/screen-readers-display-none.php
*/
.hidden {
display: none !important;
visibility: hidden; }
/*
* Hide only visually, but have it available for screen readers:
* http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px; }
/*
* Extends the .visuallyhidden class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto; }
/*
* Hide visually and from screen readers, but maintain layout
*/
.invisible {
visibility: hidden; }
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before, .clearfix:after {
content: " ";
/* 1 */
display: table;
/* 2 */ }
.clearfix:after {
clear: both; }
/* ==========================================================================
Trumps
========================================================================== */
@@ -590,6 +664,8 @@ h6, .h6, .zeta {
.align-center {
text-align: center !important; }
/* States
========================================================================== */
.is-visible {
visibility: visible !important;
opacity: 1 !important; }
@@ -597,43 +673,3 @@ h6, .h6, .zeta {
.is-hidden {
visibility: hidden !important;
opacity: 0 !important; }
/* Accessibility
========================================================================== */
/*
* Hide visually and from screen readers: h5bp.com/u
*/
.hidden {
display: none !important;
visibility: hidden; }
/*
* Hide only visually, but have it available for screen readers: h5bp.com/v
*/
.visuallyhidden {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0; }
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
position: static;
overflow: visible;
clip: auto;
width: auto;
height: auto;
margin: 0; }
/*
* Hide visually and from screen readers, but maintain layout
*/
.invisible {
visibility: hidden; }

47
project-x/modules/boilerplate/assets/styles/src/_imports.scss
View File

@@ -1,21 +1,48 @@
/* ==========================================================================
Imports
========================================================================== */
@import
"settings"
/* Settings
========================================================================== */
"settings/settings"
, "vendors/jacket"
/* Tools
========================================================================== */
, "tools/jacket"
, "tools/tools"
, "tools/functions"
, "tools/mixins"
/* Generic
========================================================================== */
, "generic/normalize"
, "generic/generic"
, "base/normalize"
/* Base
========================================================================== */
, "base/fonts"
, "base/base"
, "base/grid"
, "base/headings"
, "base/forms"
, "base/forms" //*
, "generic/helpers"
, "generic/trumps"
;
/* Objects
========================================================================== */
, "objects/container"
, "objects/grid"
/* Vendors
========================================================================== */
// , "vendors/slick"
/* Components
========================================================================== */
// , "components/main-nav"
/* Templates
========================================================================== */
// , "templates/home"
/* Trumps
========================================================================== */
, "trumps/helpers"
, "trumps/trumps"
;

30
project-x/modules/boilerplate/assets/styles/src/base/_base.scss
View File

@@ -1,24 +1,16 @@
/* ==========================================================================
Base
========================================================================== */
*, *:before, *:after {
box-sizing: inherit;
}
html {
font-family: $font-family;
font-size: $font-size;
line-height: $line-height;
box-sizing: border-box;
color: $color;
}
::selection {
background: #B3D4FC;
background: $selection;
text-shadow: none;
}
@@ -30,17 +22,11 @@ hr {
padding: 0;
border: 0;
border-top: 1px solid #CCCCCC;
border-top: 1px solid #cccccc;
}
img, svg {
max-width: 100%;
vertical-align: middle;
}
textarea {
resize: vertical;
}
a {
@@ -51,16 +37,4 @@ a {
}
}
button {
outline:none;
border:none;
background-color:none;
}
.container {
position: relative;
margin: 0 auto;
}

6
project-x/modules/boilerplate/assets/styles/src/base/_forms.scss
View File

@@ -13,7 +13,7 @@
border: none;
border-radius: 0;
outline: none;
background-color: #CCCCCC;
background-color: #cccccc;
-webkit-appearance: none;
-moz-appearance: none;
@@ -41,7 +41,7 @@
content: "";
pointer-events: none;
background-color: #CCCCCC;
background-color: #cccccc;
background-image: url("../../images/select-arrow.svg");
background-repeat: no-repeat;
background-position: center;
@@ -99,4 +99,4 @@
background-repeat: no-repeat;
background-position: center;
}
}
}

0
project-x/modules/boilerplate/assets/styles/src/objects/.gitkeep → project-x/modules/boilerplate/assets/styles/src/components/.gitkeep
View File

36
project-x/modules/boilerplate/assets/styles/src/generic/_generic.scss Normal file
View File

@@ -0,0 +1,36 @@
/* ==========================================================================
Generic
========================================================================== */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
fieldset {
margin: 0;
padding: 0;
border: 0;
}
textarea {
resize: vertical;
}
button {
border: none;
outline: none;
background-color: none;
}

33
project-x/modules/boilerplate/assets/styles/src/generic/_helpers.scss
View File

@@ -1,33 +0,0 @@
/* ==========================================================================
Helpers
========================================================================== */
.clearfix:before, .clearfix:after {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
}
.vertical-center {
height: 100%;
text-align: center;
&:before {
display: inline-block;
height: 100%;
content: "";
vertical-align: middle;
}
> * {
display: inline-block;
vertical-align: middle;
}
}

82
project-x/modules/boilerplate/assets/styles/src/base/_normalize.scss → project-x/modules/boilerplate/assets/styles/src/generic/_normalize.scss
View File

@@ -1,4 +1,4 @@
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
* 1. Set default font family to sans-serif.
@@ -9,8 +9,8 @@
html {
font-family: sans-serif; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
@@ -26,11 +26,24 @@ body {
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
@@ -39,7 +52,10 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav,
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio, canvas, progress, video {
audio,
canvas,
progress,
video {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
@@ -61,7 +77,8 @@ audio:not([controls]) {
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
*/
[hidden], template {
[hidden],
template {
display: none;
}
@@ -73,14 +90,15 @@ audio:not([controls]) {
*/
a {
background: transparent;
background-color: transparent;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active, a:hover {
a:active,
a:hover {
outline: 0;
}
@@ -99,7 +117,8 @@ abbr[title] {
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b, strong {
b,
strong {
font-weight: bold;
}
@@ -128,7 +147,7 @@ h1 {
mark {
color: #000000;
background: #FFFF00;
background: #ffff00;
}
/**
@@ -143,7 +162,8 @@ small {
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub, sup {
sub,
sup {
font-size: 75%;
line-height: 0;
@@ -212,7 +232,10 @@ pre {
* Address odd `em`-unit font size rendering in all browsers.
*/
code, kbd, pre, samp {
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
@@ -232,7 +255,11 @@ code, kbd, pre, samp {
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/
button, input, optgroup, select, textarea {
button,
input,
optgroup,
select,
textarea {
font: inherit; /* 2 */
margin: 0; /* 3 */
@@ -255,7 +282,8 @@ button {
* Correct `select` style inheritance in Firefox.
*/
button, select {
button,
select {
text-transform: none;
}
@@ -267,8 +295,10 @@ button, select {
* `input` and others.
*/
button, html input[type="button"], /* 1 */
input[type="reset"], input[type="submit"] {
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
cursor: pointer; /* 3 */
-webkit-appearance: button; /* 2 */
@@ -278,7 +308,8 @@ input[type="reset"], input[type="submit"] {
* Re-set default cursor for disabled elements.
*/
button[disabled], html input[disabled] {
button[disabled],
html input[disabled] {
cursor: default;
}
@@ -286,7 +317,8 @@ button[disabled], html input[disabled] {
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner, input::-moz-focus-inner {
button::-moz-focus-inner,
input::-moz-focus-inner {
padding: 0;
border: 0;
@@ -309,7 +341,8 @@ input {
* 2. Remove excess padding in IE 8/9/10.
*/
input[type="checkbox"], input[type="radio"] {
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
@@ -320,7 +353,8 @@ input[type="checkbox"], input[type="radio"] {
* decrement button to change from `default` to `text`.
*/
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
@@ -344,7 +378,8 @@ input[type="search"] {
* padding (and `textfield` appearance).
*/
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
@@ -356,7 +391,7 @@ fieldset {
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
border: 1px solid #C0C0C0;
border: 1px solid #c0c0c0;
}
/**
@@ -399,6 +434,7 @@ table {
border-collapse: collapse;
}
td, th {
td,
th {
padding: 0;
}

87
project-x/modules/boilerplate/assets/styles/src/generic/_trumps.scss
View File

@@ -1,87 +0,0 @@
/* ==========================================================================
Trumps
========================================================================== */
.left {
float: left !important;
}
.right {
float: right !important;
}
.align-left {
text-align: left !important;
}
.align-right {
text-align: right !important;
}
.align-center {
text-align: center !important;
}
.is-visible {
visibility: visible !important;
opacity: 1 !important;
}
.is-hidden {
visibility: hidden !important;
opacity: 0 !important;
}
/* Accessibility
========================================================================== */
/*
* Hide visually and from screen readers: h5bp.com/u
*/
.hidden {
display: none !important;
visibility: hidden;
}
/*
* Hide only visually, but have it available for screen readers: h5bp.com/v
*/
.visuallyhidden {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
}
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
position: static;
overflow: visible;
clip: auto;
width: auto;
height: auto;
margin: 0;
}
/*
* Hide visually and from screen readers, but maintain layout
*/
.invisible {
visibility: hidden;
}

2
project-x/modules/boilerplate/assets/styles/src/main.scss
View File

@@ -3,4 +3,4 @@
========================================================================== */
$jacket: vanilla;
@import "imports";
@import "_imports.scss";

10
project-x/modules/boilerplate/assets/styles/src/tools/_mixins.scss → project-x/modules/boilerplate/assets/styles/src/objects/_container.scss
View File

@@ -1,3 +1,11 @@
/* ==========================================================================
Mixins
Container
========================================================================== */
.container {
position: relative;
max-width: $max-width + ($padding * 2);
margin: 0 auto;
padding-right: $padding;
padding-left: $padding;
}

15
project-x/modules/boilerplate/assets/styles/src/base/_grid.scss → project-x/modules/boilerplate/assets/styles/src/objects/_grid.scss
View File

@@ -3,11 +3,12 @@
========================================================================== */
.grid {
font-size: 0;
letter-spacing: normal;
position: relative;
margin-left: -$margin20;
margin-left: -$margin;
letter-spacing: normal;
}
.grid--full {
@@ -21,16 +22,18 @@
.grid__item {
font-size: $font-size;
display: inline-block;
width: 100%;
margin-bottom: $margin20;
padding-left: $margin20;
margin-bottom: $margin;
padding-left: $margin;
vertical-align: top;
}
.whole {
width: 100%;
@extend .grid__item;
}
@@ -72,7 +75,7 @@
.three-quarters {
@extend .grid__item;
@media (min-width: $from-small) and (max-width: $to-medium) {
width: 50%;
}

41
project-x/modules/boilerplate/assets/styles/src/_settings.scss → project-x/modules/boilerplate/assets/styles/src/settings/_settings.scss
View File

@@ -4,11 +4,12 @@
/* Typography
========================================================================== */
// Base
$font-size: 16px;
$line-height: 1.4;
$font-family: sans-serif;
$color: #222222;
//
// Headings
$heading1: 32px; // .alpha
$heading2: 24px; // .beta
$heading3: 19px; // .gamma
@@ -16,33 +17,30 @@ $heading4: 16px; // .delta
$heading5: 13px; // .epsilon
$heading6: 11px; // .zeta
$heading-line-height: 1.2;
//
$milli-size: 10px !default;
$micro-size: 8px !default;
// Weights
$light: 300;
$normal: 400;
$medium: 500;
$bold: 700;
/* Colour Palette
/* Colors
========================================================================== */
// Generic
$black: #000000;
$white: #FFFFFF;
//
$link: #1A0DAB;
$link-hover: darken(#1A0DAB, 10%);
$white: #ffffff;
// Specific
$selection: #3297fd;
$link: #1a0dab;
$link-hover: darken(#1a0dab, 10%);
/* Container
========================================================================== */
$max-width: none;
$padding: 0;
/* Spacings
========================================================================== */
$margin10: 10px;
$margin20: 20px;
$margin30: 30px;
$margin40: 40px;
/* Z-index
========================================================================== */
$z-index1: 50;
$z-index2: 150;
$z-index3: 250;
$margin: 20px;
/* Screen widths
========================================================================== */
@@ -60,3 +58,4 @@ $to-huge: $from-huge - 1;
/* Transitions
========================================================================== */
$speed: 0.3s;
$easing: linear;

0
project-x/modules/boilerplate/assets/styles/src/vendors/_jacket.scss → project-x/modules/boilerplate/assets/styles/src/tools/_jacket.scss
View File

7
project-x/modules/boilerplate/assets/styles/src/tools/_functions.scss → project-x/modules/boilerplate/assets/styles/src/tools/_tools.scss
View File

@@ -1,5 +1,8 @@
/* ==========================================================================
Functions
Tools
========================================================================== */
/* Functions
========================================================================== */
@function em($px, $base: $font-size) {
@return ($px / $base) * 1em;
@@ -11,4 +14,4 @@
@function span($fraction) {
@return $fraction * 100%;
}
}

95
project-x/modules/boilerplate/assets/styles/src/trumps/_helpers.scss Normal file
View File

@@ -0,0 +1,95 @@
/* ==========================================================================
Helpers
========================================================================== */
.vertical-center {
height: 100%;
text-align: center;
&:before {
display: inline-block;
height: 100%;
content: "";
vertical-align: middle;
}
> * {
display: inline-block;
vertical-align: middle;
}
}
/*
* Hide visually and from screen readers:
* http://juicystudio.com/article/screen-readers-display-none.php
*/
.hidden {
display: none !important;
visibility: hidden;
}
/*
* Hide only visually, but have it available for screen readers:
* http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screen readers, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}

36
project-x/modules/boilerplate/assets/styles/src/trumps/_trumps.scss Normal file
View File

@@ -0,0 +1,36 @@
/* ==========================================================================
Trumps
========================================================================== */
.left {
float: left !important;
}
.right {
float: right !important;
}
.align-left {
text-align: left !important;
}
.align-right {
text-align: right !important;
}
.align-center {
text-align: center !important;
}
/* States
========================================================================== */
.is-visible {
visibility: visible !important;
opacity: 1 !important;
}
.is-hidden {
visibility: hidden !important;
opacity: 0 !important;
}

0
project-x/modules/boilerplate/assets/styles/src/vendors/.gitkeep vendored Normal file
View File

12
project-x/.csscomb.json → project-x/modules/boilerplate/grunt_tasks/.csscomb.json
View File

@@ -1,19 +1,11 @@
{
"exclude": [
".git/**",
"node_modules/**",
"bower_components/**"
],
"remove-empty-rulesets": true,
"always-semicolon": true,
"color-case": "upper",
"color-case": "lower",
"block-indent": "\t",
"color-shorthand": false,
"element-case": "lower",
"eof-newline": true,
"leading-zero": true,
"quotes": "double",
"sort-order-fallback": "abc",
"space-before-colon": "",
"space-after-colon": " ",
"space-before-combinator": " ",
@@ -21,7 +13,7 @@
"space-between-declarations": "\n",
"space-before-opening-brace": " ",
"space-after-opening-brace": "\n",
"space-after-selector-delimiter": " ",
"space-before-selector-delimiter": "",
"space-before-closing-brace": "\n",
"strip-spaces": true,
"unitless-zero": true,