Skip to content

Commit

Permalink
Use Jekyll native Sass/SCSS preprocessor
Browse files Browse the repository at this point in the history 
- Move .scss files to default `_sass` folder
- Configure Sass/SCSS in `_config.yml`
- Run .scss files through Autoprefixer
- Remove unnecessary npm scripts for building CSS
- Close #333
  • Loading branch information
@mmistakes
mmistakes committed Aug 8, 2016
1 parent b6be3aa commit 4cc9fcb
Show file tree
Hide file tree
Showing 111 changed files with 127 additions and 85 deletions.
6 changes: 6 additions & 0 deletions _config.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,12 @@ kramdown:
enable_coderay: false


# Sass/SCSS
sass:
sass_dir: _sass
style: compressed # http://sass-lang.com/documentation/file.SASS_REFERENCE.html#output_style


# Outputting
permalink: /:categories/:title/
paginate: 5 # amount of posts to show
Expand Down
9 changes: 9 additions & 0 deletions assets/_scss/_animations.scss → _sass/_animations.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,15 @@
ANIMATIONS
========================================================================== */

@-webkit-keyframes intro {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

@keyframes intro {
0% {
opacity: 0;
Expand Down
6 changes: 3 additions & 3 deletions assets/_scss/_archive.scss → _sass/_archive.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
}
}

// remove border
/* remove border*/
.page__content {

.archive__item-title {
Expand Down Expand Up @@ -129,8 +129,8 @@
}

@include breakpoint($medium) {
margin-left: 0; // reset before mixin does its thing
margin-right: 0; // reset before mixin does its thing
margin-left: 0; /* reset before mixin does its thing*/
margin-right: 0; /* reset before mixin does its thing*/
@include gallery(2.5 of 10);

.archive__item-teaser {
Expand Down
14 changes: 10 additions & 4 deletions assets/_scss/_base.scss → _sass/_base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ tt, code, kbd, samp, pre {
}

pre {
overflow-x: auto; // add scrollbars to wide code blocks
overflow-x: auto; /* add scrollbars to wide code blocks*/
}

p > code,
Expand All @@ -147,7 +147,7 @@ td > code {

&:before, &:after {
letter-spacing: -0.2em;
content: "\00a0"; // non-breaking space
content: "\00a0"; /* non-breaking space*/
}
}

Expand Down Expand Up @@ -179,9 +179,12 @@ li ol {
/* Figures and images */

figure {
display: -webkit-box;
display: flex;
justify-content: space-between;
align-items: flex-start;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
align-items: flex-start;
flex-wrap: wrap;
margin: 2em 0;

Expand All @@ -194,6 +197,7 @@ figure {
img {
width: 100%;
border-radius: $border-radius;
-webkit-transition: $global-transition;
transition: $global-transition;
}

Expand Down Expand Up @@ -240,6 +244,7 @@ figcaption {
color: inherit;
text-decoration: none;
border-bottom: 1px solid $light-gray;
-webkit-transition: $global-transition;
transition: $global-transition;

&:hover {
Expand Down Expand Up @@ -305,5 +310,6 @@ nav {
========================================================================== */

b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a, tr, td, form button, input[type="submit"], .btn, .highlight, .archive__item-teaser {
-webkit-transition: $global-transition;
transition: $global-transition;
}
7 changes: 3 additions & 4 deletions assets/_scss/_buttons.scss → _sass/_buttons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
}

.icon + .hidden {
margin-left: -0.5em; // override for hidden text
margin-left: -0.5em; /* override for hidden text*/
}

/* fills width of parent container */
Expand All @@ -49,7 +49,7 @@

&--inverse {
color: $gray !important;
border: 1px solid $light-gray !important; // override
border: 1px solid $light-gray !important; /* override*/
background-color: #fff;

&:hover {
Expand All @@ -61,7 +61,7 @@
/* light outline */

&--light-outline {
border: 1px solid #fff !important; // override
border: 1px solid #fff !important; /* override*/
background-color: transparent;
}

Expand Down Expand Up @@ -111,7 +111,6 @@
pointer-events: none;
cursor: not-allowed;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
opacity: 0.65;
}
Expand Down
6 changes: 4 additions & 2 deletions assets/_scss/_footer.scss → _sass/_footer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,10 @@
/* sticky footer fix end */
margin-top: 3em;
color: mix(#fff, $gray, 25%);
animation: intro 0.3s both;
animation-delay: 0.45s;
-webkit-animation: intro 0.3s both;
animation: intro 0.3s both;
-webkit-animation-delay: 0.45s;
animation-delay: 0.45s;
background-color: $lighter-gray;
border-top: 1px solid $light-gray;

Expand Down
0 assets/_scss/_forms.scss → _sass/_forms.scss
View file
File renamed without changes.
6 changes: 4 additions & 2 deletions assets/_scss/_masthead.scss → _sass/_masthead.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,10 @@
.masthead {
position: relative;
border-bottom: 1px solid $border-color;
animation: intro 0.3s both;
animation-delay: 0.15s;
-webkit-animation: intro 0.3s both;
animation: intro 0.3s both;
-webkit-animation-delay: 0.15s;
animation-delay: 0.15s;
z-index: 20;

&__inner-wrap {
Expand Down
37 changes: 20 additions & 17 deletions assets/_scss/_mixins.scss → _sass/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@
========================================================================== */

%tab-focus {
// Default
/* Default*/
outline: thin dotted $warning-color;
// Webkit
/* Webkit*/
outline: 5px auto $warning-color;
outline-offset: -2px;
}
Expand All @@ -23,21 +23,24 @@
Bourbon clearfix
========================================================================== */

// Provides an easy way to include a clearfix for containing floats.
//
// @link http://cssmojo.com/latest_new_clearfix_so_far/
//
// @example scss - Usage
// .element {
// @include clearfix;
// }
//
// @example css - CSS Output
// .element::after {
// clear: both;
// content: "";
// display: table;
// }
/*
* Provides an easy way to include a clearfix for containing floats.
* link http://cssmojo.com/latest_new_clearfix_so_far/
*
* example scss - Usage
*
* .element {
* @include clearfix;
* }
*
* example css - CSS Output
*
* .element::after {
* clear: both;
* content: "";
* display: table;
* }
*/

@mixin clearfix {
clear: both;
Expand Down
17 changes: 12 additions & 5 deletions assets/_scss/_navigation.scss → _sass/_navigation.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,10 @@
padding-left: 2em;
padding-right: 2em;
font-family: $sans-serif;
animation: intro 0.3s both;
animation-delay: 0.30s;
-webkit-animation: intro 0.3s both;
animation: intro 0.3s both;
-webkit-animation-delay: 0.30s;
animation-delay: 0.30s;

@include breakpoint($large) {
padding-left: 1em;
Expand Down Expand Up @@ -232,12 +234,17 @@
height: 4px;
background: mix(#fff, $primary-color, 50%);
width: 100%;
-webkit-transition: $global-transition;
transition: $global-transition;
transform: scaleX(0); // hide
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0); /* hide*/
}

&:hover:before {
transform: scaleX(1); // reveal
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1); /* reveal*/
}
}
}
Expand Down Expand Up @@ -414,7 +421,7 @@
font-weight: normal;
}

// hide sub sub links on small screens
/* hide sub sub links on small screens*/
li > ul li {
display: none;

Expand Down
14 changes: 7 additions & 7 deletions assets/_scss/_notices.scss → _sass/_notices.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,34 +11,34 @@
*/

@mixin notice($notice-color) {
margin: 2em 0 !important; // override
margin: 2em 0 !important; /* override*/
padding: 1em;
font-family: $global-font-family;
font-size: $type-size-6 !important;
text-indent: initial; // override
text-indent: initial; /* override*/
background-color: mix(#fff, $notice-color, 90%);
border-radius: $border-radius;
box-shadow: 0 1px 1px rgba($notice-color, 0.25);

h4 {
margin-top: 0 !important; // override
margin-top: 0 !important; /* override*/
margin-bottom: 0.75em;
}

@at-root .page__content #{&} h4 {
// using at-root to override .page-content h4 font size
/* using at-root to override .page-content h4 font size*/
margin-bottom: 0;
font-size: 1em;
}

p {
&:last-child {
margin-bottom: 0 !important; // override
margin-bottom: 0 !important; /* override*/
}
}

h4 + p {
// remove space above paragraphs that appear directly after notice headline
/* remove space above paragraphs that appear directly after notice headline*/
margin-top: 0;
padding-top: 0;
}
Expand All @@ -57,7 +57,7 @@

ul {
&:last-child {
margin-bottom: 0; // override
margin-bottom: 0; /* override*/
}
}
}
Expand Down
20 changes: 13 additions & 7 deletions assets/_scss/_page.scss → _sass/_page.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,10 @@
margin-top: 2em;
padding-left: 1em;
padding-right: 1em;
animation: intro 0.3s both;
animation-delay: 0.35s;
-webkit-animation: intro 0.3s both;
animation: intro 0.3s both;
-webkit-animation-delay: 0.35s;
animation-delay: 0.35s;

@include breakpoint($x-large) {
max-width: $x-large;
Expand Down Expand Up @@ -63,7 +65,7 @@
p {
margin: 0 0 $indent-var;

// sibling indentation
/* sibling indentation*/
@if $paragraph-indent == true {
& + p {
text-indent: $indent-var;
Expand Down Expand Up @@ -111,8 +113,10 @@
position: relative;
margin-bottom: 2em;
@include clearfix;
animation: intro 0.3s both;
animation-delay: 0.25s;
-webkit-animation: intro 0.3s both;
animation: intro 0.3s both;
-webkit-animation-delay: 0.25s;
animation-delay: 0.25s;

&--overlay {
position: relative;
Expand All @@ -122,8 +126,10 @@
background-size: cover;
background-repeat: no-repeat;
background-position: center;
animation: intro 0.3s both;
animation-delay: 0.25s;
-webkit-animation: intro 0.3s both;
animation: intro 0.3s both;
-webkit-animation-delay: 0.25s;
animation-delay: 0.25s;

a {
color: #fff;
Expand Down
0 assets/_scss/_print.scss → _sass/_print.scss
View file
File renamed without changes.
Loading

2 comments on commit 4cc9fcb

@mmistakes
Copy link
Owner Author

@mmistakes mmistakes commented on 4cc9fcb Aug 8, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@JHabdas I moved back to using Jekyll's native SCSS compiler since it's easier for those who want to make changes and aren't comfortable installing Node and running an extra build step.

The prefixing has been added directly to the partials since I can't do that after the fact without the help of a plugin. I'd like to use Jekyll Assets or the Jekyll Autoprefixer plugins but they aren't white listed for use with GitHub Pages. The alternative I came up with is a Autoprefixer Sublime Text plugin that I run the files through to prefix and remove any outdated declarations.

Not as elegant as piping through PostCSS but it gets the job done. Just trying to get my ducks in a row so I can convert the theme into a gemified version with the new Jekyll hotness in 3.2. Once asset support is more fleshed out to include JS, fonts, and images, I'll be ready to roll.

@mmistakes
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very throughough and well written article. Thanks for sharing!

Please sign in to comment.