joshua/dash-website
1
0
Fork 0
mirror of https://github.com/seigler/dash-website synced 2025-07-27 07:16:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

(Refactor) Fonts / SCSS: Add Typography Mixins / Global Functions / Variables / Structure

Browse source
This commit is contained in:
0xfff 2016-09-26 14:34:58 +02:00
parent 8c19d705dd
commit 586b9b9ef3
17 changed files with 317 additions and 119 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/scss/_buttons.scss
View file

@ -3,10 +3,11 @@
border: 0px solid;
padding: 5px 15px;
margin-right: 10px;
margin-bottom: 10px;
line-height: 30px;
height: 40px;
display: inline-block;
font-weight: 300;
@include font-base();
background-color: $color-blue;
color: $color-white;
box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.08), 0px 4px 6px 0px rgba(49,49,93,0.13);
@ -26,7 +27,6 @@
@extend .btn;
border-color: $color-white;
background-color: darken($color-white, 3);
margin-bottom: 10px;
color: lighten($color-black, 5) !important;
text-decoration: none;
&:hover {

9
src/scss/_header.scss
View file

@ -13,18 +13,13 @@
}
&__title {
@include font-title-xxlarge();
margin-bottom: 15px; /*optical*/
font-size: 80px;
line-height: 1.2;
font-weight: 200;
letter-spacing: -0.025em;
margin-left: -7px; /*optical*/
}
&__lead {
font-weight: 200;
font-size: 24px;
line-height: 1.25;
@include font-lead();
}
&__text {

68
src/scss/_typography.scss
View file

@ -1,68 +0,0 @@
// @import "fonts/worksans/bold";
// @import "fonts/worksans/medium";
// @import "fonts/open-sans/regular";
// @import "fonts/open-sans/italic";
@import "fonts/montserrat/montserrat";
$font-family-body: 'Montserrat', 'Open Sans', Helvetica, Arial, sans-serif;
$font-family-heading: $font-family-body;
$font-size-base: 17px;
$font-size-base-plus: 19px;
$font-size-medium: 24px;
$font-size-large: 30px;
$font-size-xlarge: 40px;
$font-size-xxlarge: 80px;
$line-height-base: 1.5;
$line-height-heading: 1.1;
body {
font-family: $font-family-body;
font-size: ($font-size-base / 16px * 100%);
line-height: $line-height-base;
font-weight: 300;
}
a {
color: $color-blue;
text-decoration: none;
&:hover, &:focus {
}
&:active {
}
&:visited {
color: $color-blue;
}
}
h1, h2, h3 {
font-family: $font-family-heading;
line-height: $line-height-heading;
font-weight: 300;
}
h1 {
font-size: $font-size-xlarge;
font-weight: 300;
}
h2 {
font-size: $font-size-large;
color: $color-blue;
}
h3 {
font-size: $font-size-medium;
color: $color-black;
}
a {
text-decoration: none;
color: $color-blue;
}

7
src/scss/fonts/montserrat/_extralight.scss Normal file
View file

@ -0,0 +1,7 @@
@font-face {
font-family: 'Montserrat'; //extralight';
src: url('../fonts/montserrat/montserrat-extralight-webfont.woff2') format('woff2'),
url('../fonts/montserrat/montserrat-extralight-webfont.woff') format('woff');
font-weight: 200;
font-style: normal;
}

7
src/scss/fonts/montserrat/_light.scss Normal file
View file

@ -0,0 +1,7 @@
@font-face {
font-family: 'Montserrat'; //light';
src: url('../fonts/montserrat/montserrat-light-webfont.woff2') format('woff2'),
url('../fonts/montserrat/montserrat-light-webfont.woff') format('woff');
font-weight: 300;
font-style: normal;
}

7
src/scss/fonts/montserrat/_medium.scss Normal file
View file

@ -0,0 +1,7 @@
@font-face {
font-family: 'Montserrat'; //medium';
src: url('../fonts/montserrat/montserrat-medium-webfont.woff2') format('woff2'),
url('../fonts/montserrat/montserrat-medium-webfont.woff') format('woff');
font-weight: 500;
font-style: normal;
}

32
src/scss/fonts/montserrat/_montserrat.scss
View file

@ -1,32 +0,0 @@
@font-face {
font-family: 'Montserrat'; //extralight';
src: url('../fonts/montserrat/montserrat-extralight-webfont.woff2') format('woff2'),
url('../fonts/montserrat/montserrat-extralight-webfont.woff') format('woff');
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: 'Montserrat'; //light';
src: url('../fonts/montserrat/montserrat-light-webfont.woff2') format('woff2'),
url('../fonts/montserrat/montserrat-light-webfont.woff') format('woff');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Montserrat'; //regular';
src: url('../fonts/montserrat/montserrat-regular-webfont.woff2') format('woff2'),
url('../fonts/montserrat/montserrat-regular-webfont.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Montserrat'; //medium';
src: url('../fonts/montserrat/montserrat-medium-webfont.woff2') format('woff2'),
url('../fonts/montserrat/montserrat-medium-webfont.woff') format('woff');
font-weight: 500;
font-style: normal;
}

8
src/scss/fonts/montserrat/_regular.scss Normal file
View file

@ -0,0 +1,8 @@
@font-face {
font-family: 'Montserrat'; //regular';
src: url('../fonts/montserrat/montserrat-regular-webfont.woff2') format('woff2'),
url('../fonts/montserrat/montserrat-regular-webfont.woff') format('woff');
font-weight: 400;
font-style: normal;
}

0
src/scss/_colors.scss → src/scss/global/_colors.scss
View file

6
src/scss/_directives.scss → src/scss/global/_directives.scss
View file

@ -1,6 +1,6 @@
/*
This is for time-saving base classes that get @extend -ed
*/
/**
* This is for time-saving base classes that get @extend -ed
*/
%clearfix {
&:after {

20
src/scss/global/_functions.scss Normal file
View file

@ -0,0 +1,20 @@
/**
* Helper Functions
*/
@function pxToEm($px, $ref: $font-size-base) {
@return toEm(toPx($px) / toPx($ref));
}
@function pxToRem($px) {
@return toRem(toPx($px) / toPx($font-size-base));
}
@function toEm($val) {
@return ($val + 0em);
}
@function toRem($val) {
@return ($val + 0rem);
}
@function toPx($val) {
@return ($val + 0px);
}

0
src/scss/_mediaqueries.scss → src/scss/global/_mediaqueries.scss
View file

125
src/scss/global/_mixins.scss Normal file
View file

@ -0,0 +1,125 @@
/**
* Hide visually
*
* See http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
* for discussion of different solutions
*/
@mixin visuallyhidden() {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
@mixin visuallyhiddenReset() {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
@mixin visuallyhiddenFocusable() {
@include visuallyhidden;
&:focus,
&:active {
@include visuallyhiddenReset;
}
}
/**
* Contain floats with clearfix
*
* http://nicolasgallagher.com/micro-clearfix-hack/
*/
@mixin clearfix() {
*zoom: 1; // Only IE7 accepts css properties with an * at the start.
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
/**
* Lists with layout purpose
*/
@mixin resetList() {
list-style: none;
margin: 0;
padding: 0;
}
/**
* Replace text
*/
@mixin replaceText() {
display: block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
/**
* Better font rendering (on OS X)
* http://maximilianhoffmann.com/posts/better-font-rendering-on-osx
*
* Usage:
*
* .var_dark_on_light {
* @include fontSmoothing;
* }
* .var_light_on_dark {
* @include fontSmoothingReset;
* }
*/
@mixin fontSmoothing() {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@mixin fontSmoothingReset() {
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
}
/**
* Placeholder in input fields
*/
@mixin placeholder() {
&::-webkit-input-placeholder {
@content;
}
&:-moz-placeholder { // Firefox 18-
@content;
}
&::-moz-placeholder { // Firefox 19+
@content;
}
&:-ms-input-placeholder {
@content;
}
}

0
src/scss/_reset.scss → src/scss/global/_reset.scss
View file

126
src/scss/global/_typography.scss Normal file
View file

@ -0,0 +1,126 @@
@import "../fonts/montserrat/extralight";
@import "../fonts/montserrat/light";
@import "../fonts/montserrat/regular";
@import "../fonts/montserrat/medium";
$font-family-body: 'Montserrat', 'Open Sans', Helvetica, Arial, sans-serif;
$font-family-heading: $font-family-body;
$font-weight-xlight: 200;
$font-weight-light: 300;
$font-weight-regular: 400;
$font-weight-medium: 500;
$font-size-base: $font-size-base; // This is stored in the _variables.scss because it is required earlier
$font-size-base-plus: 19px;
$font-size-medium: 24px;
$font-size-large: 30px;
$font-size-xlarge: 40px;
$font-size-xxlarge: 80px;
$line-height-base: 1.5;
$line-height-heading: 1.2;
@mixin _addColor($color: false) {
@if ($color == true) {
color: $color-black
} @else if ($color != false) {
color: $color
}
}
@mixin font-base() {
font-weight: $font-weight-light;
font-size: pxToRem($font-size-base);
}
@mixin font-lead() {
font-weight: $font-weight-light;
font-size: pxToRem($font-size-medium);
}
@mixin font-claim() {
font-weight: $font-weight-light;
font-size: pxToRem($font-size-medium);
letter-spacing: 0.017em;
}
@mixin font-title-small() {
font-weight: $font-weight-regular;
font-size: pxToRem($font-size-base-plus);
letter-spacing: 0.016em;
}
@mixin font-title-medium() {
font-weight: $font-weight-light;
font-size: pxToRem($font-size-medium);
letter-spacing: 0.016em;
}
@mixin font-title-large-subline() {
font-weight: $font-weight-xlight;
font-size: pxToRem($font-size-large);
line-height: $line-height-heading;
letter-spacing: 0;
}
@mixin font-title-large() {
font-weight: $font-weight-light;
font-size: pxToRem($font-size-large);
line-height: $line-height-heading;
letter-spacing: -0.007em;
}
@mixin font-title-xlarge-subline() {
font-weight: $font-weight-xlight;
font-size: pxToRem($font-size-xlarge);
line-height: $line-height-heading;
letter-spacing: -0.004em;
}
@mixin font-title-xlarge() {
font-weight: $font-weight-light;
font-size: pxToRem($font-size-xlarge);
line-height: $line-height-heading;
letter-spacing: -0.015em;
}
@mixin font-title-xxlarge() {
font-weight: $font-weight-xlight;
font-size: pxToRem($font-size-xxlarge);
line-height: $line-height-heading;
letter-spacing: -0.025em;
}
@mixin link-style($link: $color-blue-highlight, $visited: lighten($color-blue,25), $hover: lighten($color-blue-highlight,2), $active: lighten($color-blue-highlight,2)) {
color: $link;
text-decoration: none;
&:visited {
color: $visited;
}
&:hover {
color: $hover;
}
&:active {
color: $active;
}
}
html {
font-size: ($font-size-base / 16px * 100%);
}
body {
font-size: ($font-size-base / 16px * 100%);
font-family: $font-family-body;
line-height: $line-height-base;
font-weight: $font-weight-light;
@include fontSmoothing();
}
h1 {
@include font-title-xlarge();
}
h2 {
@include font-title-large();
}
h3 {
@include font-claim();
}
a {
@include link-style();
}

1
src/scss/_variables.scss → src/scss/global/_variables.scss
View file

@ -2,5 +2,6 @@
* Global Variables
**/
$font-size-base: 17px;
$content-max-width: 1280px;
$size-gutter: 20px;

16
src/scss/main.scss
View file

@ -1,12 +1,14 @@
// stuff every page really needs
@import "reset";
@import "grid";
@import "colors";
@import "variables";
@import "typography";
@import "mediaqueries";
@import "global/reset";
@import "global/variables";
@import "global/colors";
@import "global/functions";
@import "global/directives";
@import "global/mixins";
@import "global/mediaqueries";
@import "global/typography";
@import "layout";
@import "directives";
@import "grid";
//stuff every page needss
@import "nav";