Last active
March 20, 2017 05:17
-
-
Save addisonhall/e809e3ebeccaa27131c5 to your computer and use it in GitHub Desktop.
Simple SASS starter files
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Social media fontawesome colors | |
a .fa-square { color: #fff; } | |
a .fa-twitter-square, a .fa-twitter { color: #00aced; } | |
a .fa-facebook-square, a .fa-facebook { color: #3b5998; } | |
a .fa-youtube-square, a .fa-youtube { color: #bb0000; } | |
a .fa-google-plus-square, a .fa-google-plus { color: #dd4b39; } | |
a .fa-linkedin-square, a .fa-linkedin { color: #007bb6; } | |
a .fa-pinterest-square, a .fa-pinterest { color: #cb2027; } | |
a .fa-vimeo-square, a .fa-vimeo { color: #aad450; } | |
a .fa-instagram { color: #517fa4; } | |
// remove gutters from grid columns | |
.no-gutter { | |
padding-left: 0; | |
padding-right: 0; | |
} | |
.no-gutter-left { | |
padding-left: 0; | |
} | |
.no-gutter-right { | |
padding-right: 0; | |
} | |
// reversed out | |
.reverse-hdr, | |
.reverse-link, | |
.reverse-block, | |
.reverse-block h1, .reverse-block h2, .reverse-block h3, .reverse-block h4, .reverse-block h5, | |
.reverse-block .h1, .reverse-block .h2, .reverse-block .h3, .reverse-block .h4, .reverse-block .h5, | |
.reverse-block a, | |
.reverse-link:focus, | |
.reverse-link:hover, | |
.reverse-block a:focus, | |
.reverse-block a:hover { | |
color: #fff !important; | |
} | |
// slightly transparent | |
.ghost { | |
opacity: .6; | |
} | |
a.ghost:focus, a.ghost:hover, | |
a:focus .ghost, a:hover .ghost { | |
opacity: 1; | |
text-decoration: none; | |
} | |
// margins and spacing | |
.no-margin { | |
margin: 0; | |
} | |
.no-margin-top { | |
margin-top: 0; | |
} | |
.no-margin-btm { | |
margin-bottom: 0; | |
} | |
.append-btm { | |
margin-bottom: 2rem; | |
} | |
.append-btm-sm { | |
margin-bottom: 0.5rem; | |
} | |
.append-btm-lg { | |
margin-bottom: 3rem; | |
} | |
.append-btm-xl { | |
margin-bottom: 10rem; | |
} | |
.prepend-top { | |
margin-top: 2rem; | |
} | |
.prepend-top-sm { | |
margin-top: 0.5rem; | |
} | |
.prepend-top-lg { | |
margin-top: 4rem; | |
} | |
.prepend-top-xl { | |
margin-top: 10rem; | |
} | |
// Images | |
.img-inset-right { | |
float: right; | |
margin: 3px 0 6px 14px; | |
} | |
.img-inset-left { | |
float: left; | |
margin: 3px 18px 6px 0; | |
} | |
// Typography | |
.smaller { | |
font-size: 90%; | |
line-height: 1.4; | |
} | |
.bigger { | |
font-size: 185%; | |
} | |
.caps { | |
letter-spacing: 1px; | |
text-transform: uppercase; | |
} | |
.regular { | |
font-weight: normal; | |
} | |
.bold { | |
font-weight: bold; | |
} | |
// Insets | |
.inset-sm { padding: 8px 0.5rem; } | |
.inset { padding: 0.75rem 1rem; } | |
.inset-lg { padding: 1.5rem 2rem; } | |
.inset-xl { padding: 3rem 6rem; } | |
.inset-left { padding-left: 1rem; } | |
.inset-left-sm { padding-left: 0.5rem; } | |
.inset-left-lg { padding-left: 2rem; } | |
.inset-left-lx { padding-left: 6rem; } | |
.inset-right { padding-right: 1rem; } | |
.inset-right-sm { padding-right: 0.5rem; } | |
.inset-right-lg { padding-right: 2rem; } | |
.inset-right-xl { padding-right: 6rem; } | |
.inset-top { padding-top: 1rem; } | |
.inset-top-sm { padding-top: 0.5rem; } | |
.inset-top-lg { padding-top: 2rem; } | |
.inset-top-xl { padding-top: 6rem; } | |
.inset-btm { padding-bottom: 1rem; } | |
.inset-btm-sm { padding-bottom: 0.5rem; } | |
.inset-btm-lg { padding-bottom: 2rem; } | |
.inset-btm-xl { padding-bottom: 6rem; } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ============================================ | |
// General elements and typography | |
// ============================================ | |
html { | |
height: 100%; | |
} | |
body { | |
background-color: #fff; | |
color: $color-gray; | |
@extend %font-text; | |
font-size: 1.8rem; | |
height: 100%; | |
line-height: 1.75; | |
} | |
.lead { | |
color: $color-blue; | |
font-size: 2.4rem; | |
line-height: 1.45; | |
margin-bottom: 0.25rem; | |
} | |
.jumbotron { | |
font-size: 2.6rem; | |
} | |
.jumbotron p { | |
font-size: inherit; | |
} | |
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 { | |
margin: 0 0 0.5rem 0; | |
} | |
h1, .h1, .jumbotron h1, .jumbotron .h1 { | |
@extend %font-display; | |
@extend %enable-kerning; | |
font-size: 6rem; | |
line-height: 1.1; | |
margin-bottom: 0.25rem; | |
text-transform: lowercase; | |
} | |
h2, .h2, .jumbotron h2, .jumbotron .h2 { | |
@extend %font-display; | |
@extend %enable-kerning; | |
font-size: 4.6rem; | |
line-height: 1; | |
margin-bottom: 0.5rem; | |
text-transform: lowercase; | |
} | |
h3, .h3 { | |
font-size: 1.8rem; | |
font-weight: bold; | |
text-transform: uppercase; | |
letter-spacing: 0.12em; | |
} | |
h4, .h4 { | |
font-size: 1.8rem; | |
font-weight: bold; | |
letter-spacing: 0; | |
text-transform: none; | |
} | |
h5, .h5 { | |
font-size: 2rem; | |
font-style: italic; | |
} | |
.hdr-w-accent { | |
text-align: center; | |
} | |
.hdr-w-accent:after { | |
content: ''; | |
display: block; | |
background-color: #222; | |
width: 8rem; | |
height: 1px; | |
margin: 2rem auto; | |
} | |
.hdr-w-accent-reverse:after { | |
background-color: #fff; | |
} | |
p + h1, p + .h1, p + h2, p + .h2, p + h3, p + .h3, p + h4, p + .h4, p + h5, p + .h5, | |
div + h1, div + .h1, div + h2, div + .h2, div + h3, div + .h3, div + h4, div + .h4, div + h5, div + .h5, | |
ul + h1, ul + .h1, ul + h2, ul + .h2, ul + h3, ul + .h3, ul + h4, ul + .h4, ul + h5, ul + .h5, | |
ol + h1, ol + .h1, ol + h2, ol + .h2, ol + h3, ol + .h3, ol + h4, ol + .h4, ol + h5, ol + .h5 { | |
margin-top: 1.2em; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ============================================ | |
// Define fonts | |
// ============================================ | |
%font-text { | |
font-family: "futura-pt",sans-serif; | |
} | |
%font-display { | |
font-family: "futura-pt",sans-serif; | |
font-weight: bold; | |
letter-spacing: -0.025em; | |
} | |
%enable-kerning { | |
text-rendering: optimizeLegibility; | |
font-feature-settings: "kern"; | |
-webkit-font-feature-settings: "kern"; | |
-moz-font-feature-settings: "kern"; | |
-moz-font-feature-settings: "kern=1"; | |
font-kerning: normal; | |
} | |
// ============================================ | |
// Define colors | |
// ============================================ | |
$color-gray: #40474a; // dark gray | |
$color-light-gray: #eee; // light gray | |
$color-green: #89cc03; // green | |
$color-green-2: #86cd2f; // muted green | |
$color-blue: #5ec4c8; // blue |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// include gulp and required node modules | |
var gulp = require('gulp'); | |
var sass = require('gulp-sass'); | |
var cssnano = require('gulp-cssnano'); | |
var sourcemaps = require('gulp-sourcemaps'); | |
// compile sass | |
gulp.task('sass', function () { | |
gulp.src('./src/sass/site.scss') | |
.pipe(sass().on('error', sass.logError)) | |
.pipe(sourcemaps.init()) | |
.pipe(cssnano()) | |
.pipe(sourcemaps.write('.')) | |
.pipe(gulp.dest('./css/')); | |
}); | |
// watch these files | |
gulp.task('watch', function () { | |
gulp.watch(['./src/sass/*.scss', './src/sass/import/*.scss'], ['sass']); | |
}); | |
// run default task | |
gulp.task('default', ['sass', 'watch']); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"name": "sass_starter_packages", | |
"version": "1.0.0", | |
"description": "", | |
"main": "gulpfile.js", | |
"dependencies": { | |
"gulp": "^3.9.0", | |
"gulp-sass": "^2.0.4", | |
"gulp-sourcemaps": "^1.5.2", | |
"gulp-util": "^3.0.6" | |
}, | |
"devDependencies": { | |
"gulp-cssnano": "^2.0.0" | |
}, | |
"scripts": { | |
"test": "echo \"Error: no test specified\" && exit 1" | |
}, | |
"author": "Addison", | |
"license": "ISC" | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import "_variables"; | |
@import "_site"; | |
@import "_helpers"; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment