Move gulp tasks to separate files. Replace grid. Add autoprefixer.
Glen Cheney
8 years ago
parent
6ea5491dca
commit
244f89aaba
@ -1,5 +1,5 @@
|
||||
<footer class="site-footer light-text-dark-box">
|
||||
<div class="container-fluid">
|
||||
<div class="container">
|
||||
<p class="site-footer__credit">Photos and drawings by <a href="https://www.facebook.com/EightfoldStudios" target="_blank">Eightfold Studios</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,159 @@
|
||||
$grid-gutter-width: 16px;
|
||||
$grid-columns: 12;
|
||||
$grid-container: 'container';
|
||||
$grid-row: 'row';
|
||||
$grid-prefix: 'col';
|
||||
$grid-sizes: (xs, sm, md, lg);
|
||||
$grid-ratio-name: 'aspect';
|
||||
$grid-ratio-inner-name: 'aspect__inner';
|
||||
$grid-container-padding: (
|
||||
xs: 3.5%,
|
||||
sm: 7%
|
||||
);
|
||||
$grid-max-width--desktop: 1200px;
|
||||
$grid-ratios: (
|
||||
(16, 9),
|
||||
(9, 16),
|
||||
(4, 3),
|
||||
(3, 4),
|
||||
(3, 2),
|
||||
(3, 1),
|
||||
(2, 3),
|
||||
(2, 1),
|
||||
(1, 2),
|
||||
(1, 1)
|
||||
);
|
||||
|
||||
// 7% => 0.07
|
||||
$_grid-padding-pct: map-get($grid-container-padding, "sm") / 100%;
|
||||
// 0.07 => 0.14 => 0.86
|
||||
$_grid-padding-value: 1 - $_grid-padding-pct * 2;
|
||||
|
||||
// Size of the window when the grid row has hit max-width.
|
||||
$_viewport-at-max-grid-width: $grid-max-width--desktop / $_grid-padding-value;
|
||||
$viewport-at-max-grid-width: round($_viewport-at-max-grid-width) + 0px;
|
||||
$padding-at-max-grid-width: round($_viewport-at-max-grid-width * $_grid-padding-pct) + 0px;
|
||||
|
||||
@function get-column-selector($number, $breakpoint) {
|
||||
@return ".#{$grid-prefix}-#{$number}\\@#{$breakpoint}";
|
||||
}
|
||||
|
||||
@function get-grid-breakpoint-selectors($breakpoint) {
|
||||
$selectors: ();
|
||||
@for $i from 1 through $grid-columns {
|
||||
$selectors: append($selectors, get-column-selector($i, $breakpoint), comma);
|
||||
}
|
||||
|
||||
@return $selectors;
|
||||
}
|
||||
|
||||
@function get-all-grid-breakpoint-selectors() {
|
||||
$selectors: ();
|
||||
@each $breakpoint in $grid-sizes {
|
||||
$selectors: append($selectors, get-grid-breakpoint-selectors($breakpoint), comma);
|
||||
}
|
||||
|
||||
@return $selectors;
|
||||
}
|
||||
|
||||
|
||||
@mixin make-grid-columns() {
|
||||
$selectors: get-all-grid-breakpoint-selectors();
|
||||
|
||||
#{$selectors} {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
// Prevent columns from collapsing when empty
|
||||
min-height: 1px;
|
||||
// Inner gutter via padding
|
||||
padding-left: ($grid-gutter-width / 2);
|
||||
padding-right: ($grid-gutter-width / 2);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin float-grid-columns($breakpoint) {
|
||||
$selectors: get-grid-breakpoint-selectors($breakpoint);
|
||||
|
||||
#{$selectors} {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin grid-ratios($breakpoint: "") {
|
||||
// If there is a grid breakpoint class here, prepend a @.
|
||||
// e.g. "@sm" or "" when there isn't a class.
|
||||
@if $breakpoint != "" {
|
||||
$breakpoint: "\\@" + $breakpoint;
|
||||
}
|
||||
|
||||
// Note @extend isn't used because it cannot be used within @media directives.
|
||||
@each $list in $grid-ratios {
|
||||
$top: nth($list, 1);
|
||||
$bottom: nth($list, 2);
|
||||
$name: "#{$top}x#{$bottom}";
|
||||
.#{$grid-ratio-name}--#{$name}#{$breakpoint} {
|
||||
padding-bottom: percentage($bottom / $top);
|
||||
}
|
||||
}
|
||||
|
||||
// A `none` class (eg `aspect--none@xs`) which removes the aspect ratio
|
||||
.#{$grid-ratio-name}--none#{$breakpoint} {
|
||||
@include no-aspect();
|
||||
|
||||
> .#{$grid-ratio-inner-name} {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin calc-grid-column($index, $columns, $breakpoint, $type) {
|
||||
@if ($type == "width") and ($index > 0) {
|
||||
.#{$grid-prefix}-#{$index}\@#{$breakpoint} {
|
||||
width: percentage(($index / $columns));
|
||||
}
|
||||
}
|
||||
@if ($type == "push") and ($index > 0) {
|
||||
.#{$grid-prefix}-push-#{$index}\@#{$breakpoint} {
|
||||
left: percentage(($index / $columns));
|
||||
}
|
||||
}
|
||||
@if ($type == "push") and ($index == 0) {
|
||||
.#{$grid-prefix}-push-0\@#{$breakpoint} {
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
@if ($type == "pull") and ($index > 0) {
|
||||
.#{$grid-prefix}-pull-#{$index}\@#{$breakpoint} {
|
||||
right: percentage(($index / $columns));
|
||||
}
|
||||
}
|
||||
@if ($type == "pull") and ($index == 0) {
|
||||
.#{$grid-prefix}-pull-0\@#{$breakpoint} {
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
@if ($type == "offset") {
|
||||
.#{$grid-prefix}-offset-#{$index}\@#{$breakpoint} {
|
||||
margin-left: percentage(($index / $columns));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin loop-grid-columns($columns, $breakpoint, $type) {
|
||||
@for $i from 0 through $columns {
|
||||
@include calc-grid-column($i, $columns, $breakpoint, $type);
|
||||
}
|
||||
}
|
||||
|
||||
// Create grid for specific class
|
||||
@mixin make-grid($breakpoint, $columns: $grid-columns) {
|
||||
@include float-grid-columns($breakpoint);
|
||||
@include grid-ratios($breakpoint);
|
||||
|
||||
@include loop-grid-columns($columns, $breakpoint, "width");
|
||||
@include loop-grid-columns($columns, $breakpoint, "pull");
|
||||
@include loop-grid-columns($columns, $breakpoint, "push");
|
||||
@include loop-grid-columns($columns, $breakpoint, "offset");
|
||||
}
|
||||
@ -0,0 +1,126 @@
|
||||
@import "grid-framework";
|
||||
|
||||
// .container
|
||||
.#{$grid-container} {
|
||||
padding-left: map-get($grid-container-padding, "xs");
|
||||
padding-right: map-get($grid-container-padding, "xs");
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
// .row
|
||||
.#{$grid-row} {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
@include clearfix();
|
||||
|
||||
.#{$grid-row} {
|
||||
margin-left: $grid-gutter-width / -2;
|
||||
margin-right: $grid-gutter-width / -2;
|
||||
}
|
||||
|
||||
&--centered {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
// .aspect--16x9 etc.
|
||||
@include grid-ratios();
|
||||
|
||||
// .aspect > div or .aspect__inner
|
||||
.#{$grid-ratio-name} > div,
|
||||
.#{$grid-ratio-inner-name} {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
// Create basic styles for every grid class.
|
||||
@include make-grid-columns();
|
||||
|
||||
// Only the extra small grid takes effect at all times. Mobile first!
|
||||
@include make-grid(xs, 6);
|
||||
|
||||
@include breakpoint(sm) {
|
||||
|
||||
@include make-grid(sm);
|
||||
|
||||
// Add more padding to the container class.
|
||||
.#{$grid-container} {
|
||||
padding-left: map-get($grid-container-padding, "sm");
|
||||
padding-right: map-get($grid-container-padding, "sm");
|
||||
}
|
||||
|
||||
.#{$grid-row} {
|
||||
max-width: $grid-max-width--desktop;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $viewport-at-max-grid-width) {
|
||||
|
||||
.#{$grid-container} {
|
||||
}
|
||||
|
||||
.#{$grid-row} {
|
||||
}
|
||||
}
|
||||
|
||||
.code-block {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
margin-left: calc(-3.5vw - #{($grid-gutter-width / 2)});
|
||||
margin-right: calc(-3.5vw - #{($grid-gutter-width / 2)});
|
||||
|
||||
pre {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding-left: calc(3.5vw + #{($grid-gutter-width / 2)});
|
||||
padding-right: calc(3.5vw + #{($grid-gutter-width / 2)});
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(sm) {
|
||||
|
||||
.code-block {
|
||||
margin-left: calc(-7vw - #{($grid-gutter-width / 2)});
|
||||
margin-right: calc(-7vw - #{($grid-gutter-width / 2)});
|
||||
|
||||
pre {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding-left: calc(7vw + #{($grid-gutter-width / 2)});
|
||||
padding-right: calc(7vw + #{($grid-gutter-width / 2)});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// @include breakpoint(md) {
|
||||
//
|
||||
// .code-block {
|
||||
// margin-left: calc(-3.5vw - #{($grid-gutter-width / 2)});
|
||||
// margin-right: calc(-3.5vw - #{($grid-gutter-width / 2)});
|
||||
//
|
||||
// pre {
|
||||
// position: relative;
|
||||
// z-index: 1;
|
||||
// padding-left: calc(3.5vw + #{($grid-gutter-width / 2)});
|
||||
// padding-right: calc(3.5vw + #{($grid-gutter-width / 2)});
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
@media (min-width: $viewport-at-max-grid-width) {
|
||||
|
||||
.code-block {
|
||||
margin-left: calc(((100vw - #{$grid-max-width--desktop}) / -2) - #{$grid-gutter-width / 2});
|
||||
margin-right: calc(((100vw - #{$grid-max-width--desktop}) / -2) - #{$grid-gutter-width / 2});
|
||||
|
||||
pre {
|
||||
padding-left: calc(((100vw - #{$grid-max-width--desktop}) / 2) + #{$grid-gutter-width / 2});
|
||||
padding-right: calc(((100vw - #{$grid-max-width--desktop}) / 2) + #{$grid-gutter-width / 2});
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,61 @@
|
||||
|
||||
// @param {string} bp Breakpoint value. One of `xs, sm, md, lg`.
|
||||
// @param {boolean} isMaxWidth By default, the media queries are mobile first,
|
||||
// so they use `min-width: __px`. By passing `true`, the mixin will subtract
|
||||
// one pixel from the breakpoint value and make it `max-width: __px`.
|
||||
// @param {boolean} isScreenOnly Whether to hide this media query from print styles.
|
||||
//
|
||||
// Note: For print media, we want the default styles and the xs breakpoint to take effect.
|
||||
@mixin breakpoint($bp, $isMaxWidth: false, $isScreenOnly: true) {
|
||||
$media-query: get-breakpoint-query($bp, $isMaxWidth);
|
||||
|
||||
@if $isScreenOnly {
|
||||
$media-query: "screen and #{$media-query}";
|
||||
}
|
||||
|
||||
@media #{$media-query} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin clearfix() {
|
||||
&::after {
|
||||
content: " ";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin keep-aspect() {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
|
||||
@mixin aspect($width, $height) {
|
||||
padding-bottom: percentage($height / $width);
|
||||
}
|
||||
|
||||
@mixin no-aspect() {
|
||||
height: auto;
|
||||
padding-bottom: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
@function get-breakpoint-query($bp, $isMaxWidth: false) {
|
||||
$breakpoint: map-get($breakpoints, $bp);
|
||||
$media: if($isMaxWidth, 'max-width', 'min-width');
|
||||
|
||||
@if $isMaxWidth {
|
||||
$breakpoint: $breakpoint - 1px;
|
||||
}
|
||||
|
||||
@if map-has-key($breakpoints, $bp) {
|
||||
@return "(#{$media}: #{$breakpoint})";
|
||||
} @else {
|
||||
@warn "#{$bp} not recognized. Valid breakpoints: #{map-keys($breakpoints)}";
|
||||
@return "screen";
|
||||
}
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
|
||||
$columns: 6;
|
||||
$gutterWidth: 2; // 2% gutter width
|
||||
$columnWidth: (100 - ( $gutterWidth * ( $columns - 1 ))) / $columns;
|
||||
|
||||
@media ( max-width: 47.9375em ) {
|
||||
.m-row {
|
||||
|
||||
[class*="m-span"] {
|
||||
float: left;
|
||||
margin-left: $gutterWidth + 0%;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 1 through 6 {
|
||||
.m-span#{$i} {
|
||||
width: ($i * $columnWidth) + (($i - 1) * $gutterWidth) + 0%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,4 @@
|
||||
|
||||
module.exports = {
|
||||
watch: false,
|
||||
};
|
||||
@ -0,0 +1,31 @@
|
||||
'use strict';
|
||||
|
||||
const gutil = require('gulp-util');
|
||||
const webpack = require('webpack');
|
||||
const config = require('../config');
|
||||
|
||||
module.exports = function compile(done) {
|
||||
let main = Object.assign({}, require('../../webpack.config.js'));
|
||||
let min = Object.assign({}, require('../../webpack.config.min.js'));
|
||||
let compiler = webpack([main, min]);
|
||||
|
||||
let isDone = false;
|
||||
function callback(err, stats) {
|
||||
if (err) {
|
||||
throw new Error(err);
|
||||
}
|
||||
|
||||
gutil.log(stats.toString({ colors: true }));
|
||||
|
||||
if (!isDone) {
|
||||
isDone = true;
|
||||
done();
|
||||
}
|
||||
}
|
||||
|
||||
if (config.watch) {
|
||||
compiler.watch({}, callback);
|
||||
} else {
|
||||
compiler.run(callback);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,17 @@
|
||||
'use strict';
|
||||
|
||||
const gulp = require('gulp');
|
||||
const sass = require('gulp-sass');
|
||||
const postcss = require('gulp-postcss');
|
||||
const autoprefixer = require('autoprefixer');
|
||||
|
||||
module.exports = function css() {
|
||||
return gulp.src([
|
||||
'./_scss/gallery.scss',
|
||||
'./_scss/shuffle-styles.scss',
|
||||
'./_scss/style.scss',
|
||||
])
|
||||
.pipe(sass())
|
||||
.pipe(postcss([autoprefixer()]))
|
||||
.pipe(gulp.dest('./css/'));
|
||||
};
|
||||
@ -0,0 +1,11 @@
|
||||
'use strict';
|
||||
|
||||
const gulp = require('gulp');
|
||||
const shell = require('gulp-shell');
|
||||
|
||||
module.exports = function jekyll() {
|
||||
let cmd = 'jekyll serve --watch --config _config.yml,_config_dev.yml';
|
||||
|
||||
return gulp.src('_config.yml', { read: false })
|
||||
.pipe(shell([cmd]));
|
||||
};
|
||||
@ -0,0 +1,11 @@
|
||||
'use strict';
|
||||
|
||||
const gulp = require('gulp');
|
||||
const config = require('../config');
|
||||
const cssTask = require('./css');
|
||||
|
||||
module.exports = function setWatching(done) {
|
||||
config.watch = true;
|
||||
gulp.watch('_scss/*.scss', cssTask);
|
||||
done();
|
||||
};
|
||||
Loading…
Reference in New Issue