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

Simpler grid, better headings, some tools, clean stuff

Browse Source
This commit is contained in:
Antoine Boulanger
2015-09-30 14:39:40 -04:00
parent d3ab026728
commit 0f7a40b936
14 changed files with 115 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -3,7 +3,6 @@
"version": "1.0.0",
"author": "Locomotive <info@locomotive.ca>",
"contributors": [
"Stephen Bégay <stephen@locomotive.ca>",
"Antoine Boulanger <antoine@locomotive.ca>"
],
"devDependencies": {

4
www/modules/boilerplate/assets/scripts/dist/app.js vendored
View File

@@ -69,8 +69,8 @@ app.init = function() {
// Globals
// ==========================================================================
if (typeof self.Globals === 'object') {
self.Globals.init();
if (typeof self.globals === 'object') {
self.globals.init();
}
// Modules

4
www/modules/boilerplate/assets/scripts/src/app.js
View File

@@ -24,8 +24,8 @@ app.init = function() {
// Globals
// ==========================================================================
if (typeof self.Globals === 'object') {
self.Globals.init();
if (typeof self.globals === 'object') {
self.globals.init();
}
// Modules

63
www/modules/boilerplate/assets/styles/dist/main.css vendored
View File

@@ -236,7 +236,8 @@ select {
* `input` and others.
*/
button,
html input[type="button"], input[type="reset"],
html input[type="button"],
input[type="reset"],
input[type="submit"] {
cursor: pointer;
/* 3 */
@@ -432,10 +433,12 @@ html {
::-moz-selection {
background: #3297fd;
color: #ffffff;
text-shadow: none; }
::selection {
background: #3297fd;
color: #ffffff;
text-shadow: none; }
hr {
@@ -454,35 +457,27 @@ a {
a:hover {
color: #13097c; }
h1, .h1, .alpha {
font-size: 32px;
.h, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
line-height: 1.2;
margin-top: 0; }
h2, .h2, .beta {
font-size: 24px;
line-height: 1.2;
margin-top: 0; }
h1, .h1 {
font-size: 32px; }
h3, .h3, .gamma {
font-size: 19px;
line-height: 1.2;
margin-top: 0; }
h2, .h2 {
font-size: 24px; }
h4, .h4, .delta {
font-size: 16px;
line-height: 1.2;
margin-top: 0; }
h3, .h3 {
font-size: 19px; }
h5, .h5, .epsilon {
font-size: 13px;
line-height: 1.2;
margin-top: 0; }
h4, .h4 {
font-size: 16px; }
h6, .h6, .zeta {
font-size: 11px;
line-height: 1.2;
margin-top: 0; }
h5, .h5 {
font-size: 13px; }
h6, .h6 {
font-size: 11px; }
.container {
position: relative;
@@ -492,10 +487,17 @@ h6, .h6, .zeta {
padding-left: 0; }
.grid {
margin-left: -20px;
margin-left: 0;
letter-spacing: normal;
font-size: 0; }
.grid_item {
display: inline-block;
padding-left: 0;
width: 100%;
vertical-align: top;
font-size: 1rem; }
.label, .checkbox-label, .radio-label {
display: block;
margin-bottom: 0.25em; }
@@ -603,6 +605,11 @@ h6, .h6, .zeta {
display: inline-block;
vertical-align: middle; }
.clearfix:after {
content: "";
display: table;
clear: both; }
/*
* Hide visually and from screen readers:
* http://juicystudio.com/article/screen-readers-display-none.php
@@ -645,14 +652,6 @@ h6, .h6, .zeta {
.invisible {
visibility: hidden; }
/**
* Contain Floats
*/
.clearfix:after {
content: "";
display: table;
clear: both; }
.left {
float: left !important; }

2
www/modules/boilerplate/assets/styles/src/_imports.scss
View File

@@ -36,7 +36,7 @@
// Components
// ==========================================================================
// @import "components/main-nav";
// @import "components/nav-main";
// Templates
// ==========================================================================

4
www/modules/boilerplate/assets/styles/src/base/_base.scss
View File

@@ -5,22 +5,20 @@ html {
font-family: $font-family;
font-size: $font-size;
line-height: $line-height;
color: $color;
}
::selection {
background: $selection;
color: $selection-text;
text-shadow: none;
}
hr {
display: block;
height: 1px;
margin: 1em 0;
padding: 0;
border: 0;
border-top: 1px solid #cccccc;
}

50
www/modules/boilerplate/assets/styles/src/base/_headings.scss
View File

@@ -1,44 +1,46 @@
// ==========================================================================
// Headings
// ==========================================================================
h1, .h1, .alpha {
@mixin h {
line-height: $heading-line-height;
margin-top: 0;
}
.h {
@include h;
}
h1, .h1 {
@extend .h;
font-size: $heading1;
line-height: $heading-line-height;
margin-top: 0;
}
h2, .h2, .beta {
h2, .h2 {
@extend .h;
font-size: $heading2;
line-height: $heading-line-height;
margin-top: 0;
}
h3, .h3, .gamma {
h3, .h3 {
@extend .h;
font-size: $heading3;
line-height: $heading-line-height;
margin-top: 0;
}
h4, .h4, .delta {
h4, .h4 {
@extend .h;
font-size: $heading4;
line-height: $heading-line-height;
margin-top: 0;
}
h5, .h5, .epsilon {
h5, .h5 {
@extend .h;
font-size: $heading5;
line-height: $heading-line-height;
margin-top: 0;
}
h6, .h6, .zeta {
h6, .h6 {
@extend .h;
font-size: $heading6;
line-height: $heading-line-height;
margin-top: 0;
}

1
www/modules/boilerplate/assets/styles/src/generic/_button.scss
View File

@@ -1,7 +1,6 @@
// ==========================================================================
// Button resets
// ==========================================================================
button,
.button {
display: inline-block;

1
www/modules/boilerplate/assets/styles/src/objects/_button.scss
View File

@@ -1,7 +1,6 @@
// ==========================================================================
// Button objects
// ==========================================================================
.button {
padding: 10px;
background-color: lightgray;

1
www/modules/boilerplate/assets/styles/src/objects/_container.scss
View File

@@ -3,7 +3,6 @@
// ==========================================================================
.container {
position: relative;
max-width: $max-width + ($padding * 2);
margin: 0 auto;
padding-right: $padding;

139
www/modules/boilerplate/assets/styles/src/objects/_grid.scss
View File

@@ -1,8 +1,8 @@
// ==========================================================================
// Grid
// ==========================================================================
@mixin grid {
margin-left: -$gutter;
@mixin grid($grid-gutter: 0) {
margin-left: -$grid-gutter;
letter-spacing: normal;
font-size: 0;
}
@@ -10,138 +10,13 @@
@include grid;
}
@mixin grid__item {
@mixin grid_item($grid-gutter: 0) {
display: inline-block;
box-sizing: border-box;
margin-bottom: $gutter;
padding-left: $gutter;
padding-left: $grid-gutter;
width: 100%;
vertical-align: top;
font-size: 16px;
font-size: 1rem;
}
@mixin whole {
@include grid__item;
width: 100%;
}
@mixin half {
@include grid__item;
@media (min-width: $from-small) {
width: span(1/2);
}
}
@mixin third {
@include grid__item;
@media (min-width: $from-medium) {
width: span(1/3);
}
}
@mixin two-thirds {
@include grid__item;
@media (min-width: $from-medium) {
width: span(2/3);
}
}
@mixin quarter {
@include grid__item;
@media (min-width: $from-medium) {
width: span(1/4);
}
}
@mixin two-quarters {
@include grid__item;
@media (min-width: $from-medium) {
width: span(2/4);
}
}
@mixin three-quarters {
@include grid__item;
@media (min-width: $from-medium) {
width: span(3/4);
}
}
@mixin fifth {
@include grid__item;
@media (min-width: $from-large) {
width: span(1/5);
}
}
@mixin two-fifths {
@include grid__item;
@media (min-width: $from-large) {
width: span(2/5);
}
}
@mixin three-fifths {
@include grid__item;
@media (min-width: $from-large) {
width: span(3/5);
}
}
@mixin four-fifths {
@include grid__item;
@media (min-width: $from-large) {
width: span(4/5);
}
}
@mixin sixth {
@include grid__item;
@media (min-width: $from-huge) {
width: span(1/6);
}
}
@mixin two-sixths {
@include grid__item;
@media (min-width: $from-huge) {
width: span(2/6);
}
}
@mixin three-sixths {
@include grid__item;
@media (min-width: $from-huge) {
width: span(3/6);
}
}
@mixin four-sixths {
@include grid__item;
@media (min-width: $from-huge) {
width: span(4/6);
}
}
@mixin five-sixths {
@include grid__item;
@media (min-width: $from-huge) {
width: span(5/6);
}
.grid_item {
@include grid_item;
}

38
www/modules/boilerplate/assets/styles/src/settings/_settings.scss
View File

@@ -2,21 +2,31 @@
// Settings
// ==========================================================================
// Colors
// ==========================================================================
// Generic
$black: #000000;
$white: #ffffff;
// Specific
$selection: #3297fd;
$selection-text: $white;
$link: #1a0dab;
$link-hover: darken(#1a0dab, 10%);
// 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
$heading4: 16px; // .delta
$heading5: 13px; // .epsilon
$heading6: 11px; // .zeta
$heading1: 32px;
$heading2: 24px;
$heading3: 19px;
$heading4: 16px;
$heading5: 13px;
$heading6: 11px;
$heading-line-height: 1.2;
// Weights
$light: 300;
@@ -24,17 +34,6 @@ $normal: 400;
$medium: 500;
$bold: 700;
// Colors
// ==========================================================================
// Generic
$black: #000000;
$white: #ffffff;
// Specific
$selection: #3297fd;
$link: #1a0dab;
$link-hover: darken(#1a0dab, 10%);
// Container
// ==========================================================================
$max-width: none;
@@ -42,8 +41,7 @@ $padding: 0;
// Spacings
// ==========================================================================
$gutter: 20px;
$margin: 40px;
$unit: 60px;
// Screen widths
// ==========================================================================

35
www/modules/boilerplate/assets/styles/src/tools/_tools.scss
View File

@@ -18,18 +18,6 @@
// Mixins
// ==========================================================================
// Micro clearfix, as per {@link css-101.org/articles/clearfix/latest-new-clearfix-so-far.php CSS Mojo}
//
// @see inuitcss/generic.clearfix
@mixin clearfix {
&:after {
content : "";
display : table;
clear : both;
}
}
@mixin vertical-center {
font-size: 0;
@@ -46,3 +34,26 @@
vertical-align: middle;
}
}
@mixin clearfix {
&:after {
content : "";
display : table;
clear : both;
}
}
@mixin list-reset {
list-style: none;
padding: 0;
margin: 0;
}
@mixin tap-highlight-color {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
@mixin overflow-scrolling {
-webkit-overflow-scrolling: touch;
}

15
www/modules/boilerplate/assets/styles/src/trumps/_helpers.scss
View File

@@ -5,6 +5,10 @@
@include vertical-center;
}
.clearfix {
@include clearfix;
}
/*
* Hide visually and from screen readers:
* http://juicystudio.com/article/screen-readers-display-none.php
@@ -54,14 +58,3 @@
.invisible {
visibility: hidden;
}
/**
* Contain Floats
*/
%clearfix {
@include clearfix;
}
.clearfix {
@extend %clearfix;
}