diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..121531a --- /dev/null +++ b/.eslintignore @@ -0,0 +1 @@ +*.min.js diff --git a/.eslintrc b/.eslintrc deleted file mode 100644 index afad7ef..0000000 --- a/.eslintrc +++ /dev/null @@ -1,87 +0,0 @@ -{ - "extends": "eslint:recommended", - "env": { - "browser": true - }, - "globals": { - "Drupal": true, - "jQuery": true - }, - "rules": { - // Errors. - "array-bracket-spacing": [2, "never"], - "block-scoped-var": 2, - "brace-style": [2, "stroustrup", {"allowSingleLine": true}], - "comma-dangle": [2, "never"], - "comma-spacing": 2, - "comma-style": [2, "last"], - "computed-property-spacing": [2, "never"], - "curly": [2, "all"], - "eol-last": 2, - "eqeqeq": [2, "smart"], - "guard-for-in": 2, - "indent": [2, 2, {"SwitchCase": 1}], - "key-spacing": [2, {"beforeColon": false, "afterColon": true}], - "keyword-spacing": [2, {"before": true, "after": true}], - "linebreak-style": [2, "unix"], - "lines-around-comment": [2, {"beforeBlockComment": true, "afterBlockComment": false}], - "new-parens": 2, - "no-array-constructor": 2, - "no-caller": 2, - "no-catch-shadow": 2, - "no-eval": 2, - "no-extend-native": 2, - "no-extra-bind": 2, - "no-extra-parens": [2, "functions"], - "no-implied-eval": 2, - "no-iterator": 2, - "no-label-var": 2, - "no-labels": 2, - "no-lone-blocks": 2, - "no-loop-func": 2, - "no-multi-spaces": 2, - "no-multi-str": 2, - "no-native-reassign": 2, - "no-nested-ternary": 2, - "no-new-func": 2, - "no-new-object": 2, - "no-new-wrappers": 2, - "no-octal-escape": 2, - "no-process-exit": 2, - "no-proto": 2, - "no-return-assign": 2, - "no-script-url": 2, - "no-sequences": 2, - "no-shadow-restricted-names": 2, - "no-spaced-func": 2, - "no-trailing-spaces": 2, - "no-undef-init": 2, - "no-undefined": 2, - "no-unused-expressions": 2, - "no-unused-vars": [2, {"vars": "all", "args": "none"}], - "no-with": 2, - "object-curly-spacing": [2, "never"], - "one-var": [2, "never"], - "quote-props": [2, "consistent-as-needed"], - "quotes": [2, "single", "avoid-escape"], - "semi": [2, "always"], - "semi-spacing": [2, {"before": false, "after": true}], - "space-before-blocks": [2, "always"], - "space-before-function-paren": [2, {"anonymous": "always", "named": "never"}], - "space-in-parens": [2, "never"], - "space-infix-ops": 2, - "space-unary-ops": [2, { "words": true, "nonwords": false }], - "spaced-comment": [2, "always"], - "strict": 2, - "yoda": [2, "never"], - // Warnings. - "max-nested-callbacks": [1, 3], - "valid-jsdoc": [1, { - "prefer": { - "returns": "return", - "property": "prop" - }, - "requireReturn": false - }] - } -} diff --git a/.eslintrc.yaml b/.eslintrc.yaml new file mode 100644 index 0000000..a88c652 --- /dev/null +++ b/.eslintrc.yaml @@ -0,0 +1,142 @@ +extends: eslint:recommended +env: + browser: true +globals: + jQuery: true +rules: + array-bracket-spacing: + - "error" + - never + block-scoped-var: "error" + brace-style: + - "error" + - stroustrup + - allowSingleLine: true + comma-dangle: + - "error" + - never + comma-spacing: "error" + comma-style: + - "error" + - last + computed-property-spacing: + - "error" + - never + curly: + - "error" + - all + eol-last: "error" + eqeqeq: + - "error" + - smart + guard-for-in: "error" + indent: + - "error" + - 2 + - SwitchCase: 1 + key-spacing: + - "error" + - afterColon: true + beforeColon: false + keyword-spacing: + - "error" + - after: true + before: true + linebreak-style: + - "error" + - unix + lines-around-comment: + - "error" + - afterBlockComment: false + beforeBlockComment: true + max-nested-callbacks: + - "warn" + - 3 + new-parens: "error" + no-array-constructor: "error" + no-caller: "error" + no-catch-shadow: "error" + no-eval: "error" + no-extend-native: "error" + no-extra-bind: "error" + no-extra-parens: + - "error" + - functions + no-implied-eval: "error" + no-iterator: "error" + no-label-var: "error" + no-labels: "error" + no-lone-blocks: "error" + no-loop-func: "error" + no-multi-spaces: "error" + no-multi-str: "error" + no-native-reassign: "error" + no-nested-ternary: "error" + no-new-func: "error" + no-new-object: "error" + no-new-wrappers: "error" + no-octal-escape: "error" + no-process-exit: "error" + no-proto: "error" + no-return-assign: "error" + no-script-url: "error" + no-sequences: "error" + no-shadow-restricted-names: "error" + no-spaced-func: "error" + no-trailing-spaces: "error" + no-undef-init: "error" + no-undefined: "error" + no-unused-expressions: "error" + no-unused-vars: + - "error" + - args: none + vars: all + no-with: "error" + object-curly-spacing: + - "error" + - never + one-var: + - "error" + - never + quote-props: + - "error" + - consistent-as-needed + quotes: + - "error" + - single + - avoid-escape + semi: + - "error" + - always + semi-spacing: + - "error" + - after: true + before: false + space-before-blocks: + - "error" + - always + space-before-function-paren: + - "error" + - anonymous: always + named: never + space-in-parens: + - "error" + - never + space-infix-ops: "error" + space-unary-ops: + - "error" + - nonwords: false + words: true + spaced-comment: + - "error" + - always + strict: "error" + valid-jsdoc: + - "warn" + - prefer: + property: prop + returns: return + requireReturn: false + yoda: + - "error" + - never diff --git a/README.md b/README.md index c728c4f..60f7124 100644 --- a/README.md +++ b/README.md @@ -16,10 +16,10 @@ The [old branch](https://github.com/frjo/hugo-theme-zen/tree/old) has the origin * Automatic linting of css and js * Contact form (PHP) * CSS grid and flex for layout -* Gulp.js +* Gulp.js (only for sass/js lint) * HTML5 +* Hugo Pipes for js and sass * jQuery 3 -* libSass * Micro.blog * Minify css * Meta tags and JSON-LD @@ -37,6 +37,7 @@ The [old branch](https://github.com/frjo/hugo-theme-zen/tree/old) has the origin * [Drejargården](https://www.drejargarden.se/) * [Helmer Grundström](https://www.helmergrundstrom.se/) * [xdeb.org](https://xdeb.org/) +* [xdeb.net](https://xdeb.net/) ## On the large screen @@ -64,22 +65,25 @@ $ git clone https://github.com/frjo/hugo-theme-zen.git zen [Hugo - Installing Hugo](https://gohugo.io/getting-started/installing/) -## Create a zen subtheme +## Customise layouts -Since Hugo 0.42 there is sub them support via [Theme Components](https://gohugo.io/themes/theme-components/). This makes it easy to update the base theme without overwriting customisation. +To customise a layout included in the zen theme, copy it to the root layout directory and edit it there. Make sure to maintain the directory structure inside the layouts directory. -Navigate to the theme folder where you have placed the zen base theme. Run the included "create_sub_theme.sh" script like this. +Add any new layouts to the root layout directory as well. This way they will not be overwritten when updating the theme. + + +## Customise styles and scripts + +Styles and scripts are processed with Hugo pipes that was added in Hugo 0.46. + +To customise a js or sass file, copy it to the root assets directory and edit it there. Make sure to maintain the directory structure inside the assets directory. + +By default the sass files are built for production, compressed with fingerprint. By setting the Hugo enviroment variable to "dev" they will instead be nested with sourcemaps. ``` -$ ./zen/create_sub_theme.sh +§ hugo serve watch --environment=dev ``` -Enter a name for your sub theme when asked for. In the site config file add your sub theme name first and "zen" after it. Hugo will now first look in the sub theme for files and if they are not there look in the zen base theme. - -Edit all css/sass only in the sub theme and add any custom layouts etc. If there is a need to edit e.g. layouts from the zen base theme make sure to copy them over to the sub theme and edit them there. - -This way all customisation are in the sub theme, making it easy to update the base theme. - ## config.yaml example @@ -90,8 +94,6 @@ baseurl: "https://example.org/" title: "SiteTitle" params: - cacheBustCSS: true # Add a cache busting hash on styles.css - cacheBustJS: true # Add a cache busting hash on script.js contact: "info@example.org" copyright: "This site is licensed under a (https://creativecommons.org/licenses/by-sa/4.0/)." @@ -215,18 +217,11 @@ The content that should be wrapped. ``` -## Use Gulp to generate css from sass +## Use Gulp to lint Sass and JavaScript -Your new Zen theme uses Gulp.js as a task runner, so that it can do many -different tasks automatically: - -* Build your CSS from your Sass using libSass and node-sass. -* Add vendor prefixes for the browsers you want to support using Autoprefixer. -* Build a style guide of your components based on the KSS comments in your Sass -source files. * Lint your Sass using sass-lint. * Lint your JavaScript using eslint. -* Minify the css. +* Will lint files in the theme as well as the root assets directory. * Watch all of your files as you develop and re-build everything on the fly. Set up your front-end development build tools: @@ -249,8 +244,7 @@ To install gulp's global wrapper, run: npm install -g gulp-cli -5. The default gulp task will build your production minified CSS, -build your style guide, and lint your Sass and JavaScript. +5. The default gulp task will lint your Sass and JavaScript. To run the default gulp task, type: gulp @@ -259,8 +253,17 @@ To run the default gulp task, type: gulp watch - or just type: - gulp watch:css - - to only watch the css files. +## Create a zen subtheme + +Since Hugo 0.42 there is sub them support via [Theme Components](https://gohugo.io/themes/theme-components/). A nice feature if you want to extend an existing theme, like zen. + +If all you want is customise layouts, styles and scripts for a site it's easier to copy the needed files to the root layout and assets directories and edit them there. See instructions above. + +The included "create_sub_theme.sh" script makes it easy to get started on a sub theme. Navigate to the theme directory where you have placed the zen base theme and run the script like this. + +``` +$ ./zen/create_sub_theme.sh +``` + +Enter a name for your sub theme when asked for. In the site config file add your sub theme name first and "zen" after it. Hugo will now first look in the sub theme for files and if they are not there look in the zen base theme. diff --git a/assets/lib/typey/stylesheets/_typey.scss b/assets/lib/typey/stylesheets/_typey.scss new file mode 100644 index 0000000..72d48f3 --- /dev/null +++ b/assets/lib/typey/stylesheets/_typey.scss @@ -0,0 +1,17 @@ +@import "typey/functions/helpers"; +@import "typey/functions/validators"; +@import "typey/functions/em-calculators"; +@import "typey/functions/outputters"; +@import "typey/functions/sizers"; +@import "typey/functions/extras"; +@import "typey/functions/depreciated"; +@import "typey/font-stacks"; +@import "typey/defaults"; +@import "typey/mixins/debug"; +@import "typey/mixins/define-type-sizing"; +@import "typey/mixins/font-size"; +@import "typey/mixins/line-height"; +@import "typey/mixins/spacing"; +@import "typey/mixins/typeface"; +@import "typey/mixins/typeset"; +@import "typey/mixins/type-layout"; diff --git a/assets/lib/typey/stylesheets/typey/_defaults.scss b/assets/lib/typey/stylesheets/typey/_defaults.scss new file mode 100644 index 0000000..29b9728 --- /dev/null +++ b/assets/lib/typey/stylesheets/typey/_defaults.scss @@ -0,0 +1,181 @@ +// The browser font size default. No need to change this. +// Allowed units: px +$browser-font-size: 16px !default; + +// Allowed units: rem, em or px +$base-unit: rem !default; + +// The base font size will be used for most calculations involving font-size. +// Allowed units: px +$base-font-size: 16px !default; + +// The base line height will be used for most calculations involving height. +// Allowed units: px +$base-line-height: 24px !default; + +// The method to calculate line-height. Allowed values: rhythm or ratio. +// Rhytm uses a vertical rhythm approach where line-height is specified as +// a multiple of the $base-line-height. +// Ratio uses a ratio approach where line-height is specified as a ratio +// of the elements font-size. +$line-height-method: rhythm !default; + +// The default ratio of line-height to font-size. +$base-line-height-ratio: 1.5 !default; + +// By default we will provide fallbacks when rem is the base unit. +$rem-fallback: true !default; + +// By default, when rem or em are the base unit we will output a print suitable +// media query with the define-type-sizing() mixin. This will take care of all +// print media type sizing effortlessly. +$auto-print-sizing: true !default; + +// The pt font-size to be used with the print media query when +// $auto-print-sizing is enabled. +// Allowed units: pt +$print-font-size: 12pt !default; + +// Default font sizes +// Once you redefine the $font-size map it will overwrite all sizes here. +// Allowed units: px +$font-size: ( + xxxl: 60px, + xxl: 46px, + xl: 32px, + l: 24px, + m: 16px, + s: 14px, + xs: 12px +) !default; + +// Default font weights +// This map and accompanying function help provide granular control over +// setting and retrieving static font weights. +$font-weight: ( + bold: 700, + normal: 400, + lighter: 200 +) !default; + +// Declare typefaces +// These can use any key you like, and allow you to set global letter-spacing, +// weight and case for font-families. You can then use the +// font-family mixin to embed your font families anywhere you like. +// +// Each key in the $typefaces map can either be a keyed map of settings +// using any combination of the keys below, or it can be a shorthand list +// of each property value. When using shorthand it doesn't matter what order +// each value is arranged in, but best practice is to do it in the order: +// [font-family] [letter-spacing] [weight] [case] +// +// @setting list font-family +// Any standard CSS font-family. Use typey pre-written stacks or roll your own. +// @setting number letter-spacing +// CSS letter-spacing. Specified as a px value when font-size is the +// $base-font-size. +// @setting string weight +// A key from the $font-weight map. Only specify this if you want a consistant +// font-weight used accross the board with this typeface. +// @setting string case +// A value for CSS text-transform. Only specify this if you want a consistant +// case used accross the board with this typeface. +$typefaces: () !default; + +// Declare typestyles +// These can use any key you like, and allow you to set an easily reusable type +// style. They can be as simple as a font-size and line-height, or can go on +// to encompass a full range of css type properties. +// +// Each key in the $typestyles map can either be a keyed map of settings +// using any combination of the keys below, or it can be a shorthand list +// of each property value. When using shorthand for $typestyles, the first value +// must always be font-size. After that it doesn't matter what order each value +// is arranged in, but best practice is to do it in the order: +// [font-size] [line-height] [weight] [case] +// +// @setting number|string font-size +// A size from the $font-size map or px value to be converted +// @setting number $x line-height +// Multiple of line height, ratio or px value to be converted. +// @setting string weight +// A key from the $font-weight map. +// @setting string case +// A value for CSS text-transform. +$typestyles: () !default; + +// Debug grid +// Shows horizontal lines for each elements line height. +$typey-debug: false !default; + +// Debug grid coloring +$typey-debug-color: #4affff !default; + +// Lets store the allowed values for text-transform and font-style so we can +// make shorthand work a little better. +$text-transform-values: ( + lowercase, + uppercase, + capitalize +) !default; + +$font-style-values: ( + normal, + italic, + oblique +) !default; + +// Warnings for $base-unit. +@if $base-unit != px and $base-unit != rem and $base-unit != em { + @error "$base-unit must be one of the following unit types: rem, em or px"; +} + +// Warnings for $base-font-size and $base-line-height. +@if unit($base-font-size) != px { + @error "$base-font-size must be in px"; +} +@if unit($base-line-height) != px { + @error "$base-line-height must be in px"; +} + +// Warnings for $print-font-size. +@if unit($print-font-size) != pt { + @error "$print-font-size must be in pt"; +} + +// Warnings for $font-size. +@each $key, $size in $font-size { + @if unit($size) != px { + @error "Size '#{$key}' in $font-size map is not specified in px"; + } +} + +// Warnings for $font-weight. +$typey-text-transform-properties: none capitalize uppercase lowercase initial inherit; +@each $property in $typey-text-transform-properties { + @if map-has-key($font-weight, $property) { + @warn "'#{$property}' used in $font-weight map is a potential value of the text-transform property and will conflict when using typey shorthand"; + } +} + +// Warnings for $typefaces. +@each $key, $typeface in $typefaces { + @if type-of($typeface) != "map" and type-of($typeface) != "list" { + @error "Typeface '#{$key}' in $typefaces map must be a keyed map or a shorthand list in the format: [font-family] [letter-spacing] [weight] [case]"; + } +} + +// Warnings for $typestyles. +@each $key, $typestyle in $typestyles { + @if type-of($typestyle) == "list" { + @each $value in $typestyle { + @if index($typestyle, $value) == 1 { + $allowed-types: "font-size", "px"; + $type: typey-check-value($value); + @if index($allowed-types, $type) == null { + @error "Incorrect shorthand format used in '#{$key}' in $typestyles map: [font-size] must appear first"; + } + } + } + } +} diff --git a/assets/lib/typey/stylesheets/typey/_font-stacks.scss b/assets/lib/typey/stylesheets/typey/_font-stacks.scss new file mode 100644 index 0000000..a6a86cd --- /dev/null +++ b/assets/lib/typey/stylesheets/typey/_font-stacks.scss @@ -0,0 +1,4 @@ +// Three standard do-all stacks. +$serif-stack: "Calisto MT", "Book Antiqua", serif !default; +$sans-serif-stack: "Helvetica Neue", Helvetica, sans-serif !default; +$monospace-stack: Consolas, "Lucida Console", monospace, monospace !default; diff --git a/assets/lib/typey/stylesheets/typey/functions/_depreciated.scss b/assets/lib/typey/stylesheets/typey/functions/_depreciated.scss new file mode 100644 index 0000000..45d6abc --- /dev/null +++ b/assets/lib/typey/stylesheets/typey/functions/_depreciated.scss @@ -0,0 +1,55 @@ +// DEPRECIATED FUNCTIONS +// The names of these functions have been refined and namespaced (above) to avoid +// potential confusion with functions from other libraries. + +// (Depreciated) Output a number in the $base-unit.. +// +// @param string $weight +// A weight from the $font-weight map. +// +// @return string +// The selected font-weight. +@function output-unit($number) { + @warn "output-unit() is depreciated. Please use typey-output-in-base-unit() instead"; + @return typey-output-in-base-unit($number); +} + +// (Depreciated) Remove the unit from a number. +// +// @param number $number +// The number (with unit) to convert. Allowed units: any +// +// @return number +// The number without the unit. +@function strip-unit($number) { + @warn "strip-unit() is depreciated. Please use typey-strip-unit() instead"; + @return typey-strip-unit($number); +} + +// (Depreciated) Convert px to the $base-unit. +// +// @param number $number +// The number (with unit) to convert. Allowed units: px +// @param number|string $context +// (optional) Only used if em is the $base-unit. The value of the elements/parents +// font-size if it differs from $base-font-size. Specified as a t-shirt size or +// value in px. +// +// @return number +// The number converted to the base unit. +@function convert-unit($number, $context: $base-font-size) { + @warn "convert-unit() is depreciated. Please use output-from-px() instead"; + @return output-from-px($number, $context); +} + +// (Depreciated) Retrieve a font weight. +// +// @param string $weight +// A weight from the $font-weight map. +// +// @return string +// The selected font-weight. +@function font-weight($weight) { + @warn "font-weight() is depreciated. Please use weight() instead"; + @return weight($weight); +} diff --git a/assets/lib/typey/stylesheets/typey/functions/_em-calculators.scss b/assets/lib/typey/stylesheets/typey/functions/_em-calculators.scss new file mode 100644 index 0000000..f46b026 --- /dev/null +++ b/assets/lib/typey/stylesheets/typey/functions/_em-calculators.scss @@ -0,0 +1,41 @@ +// Calculate relative sizing for em when a px value is used. +// +// @param number $number +// The px value +// @param number|string $context +// The relative value to perform the calculation. +// +// @return number +// The calculated value in the base unit. +@function calculate-em-px($x, $context) { + $allowed-types: "font-size", "px"; + $type: typey-validator($context, $allowed-types); + @if $type == "font-size" { + $context-map-size: map-get($font-size, $context); + @return typey-output-in-unit(($x / $context-map-size), em); + } + @if $type == "px" { + @return typey-output-in-unit(($x / $context), em); + } +} + +// Calculate relative sizing for em when a multiplier is used. +// +// @param number $number +// Multiple of line height to be used. +// @param number|string $context +// The relative value to perform the calculation. +// +// @return number +// The calculated value in the base unit. +@function calculate-em-multiplier($x, $context) { + $allowed-types: "font-size", "px"; + $type: typey-validator($context, $allowed-types); + @if $type == "font-size" { + $context-map-size: map-get($font-size, $context); + @return typey-output-in-unit(($x * $base-line-height) / $context-map-size, em); + } + @if $type == "px" { + @return typey-output-in-unit(($x * $base-line-height) / $context, em); + } +} diff --git a/assets/lib/typey/stylesheets/typey/functions/_extras.scss b/assets/lib/typey/stylesheets/typey/functions/_extras.scss new file mode 100644 index 0000000..1ade7f7 --- /dev/null +++ b/assets/lib/typey/stylesheets/typey/functions/_extras.scss @@ -0,0 +1,34 @@ +// Retrieve a font weight. +// +// @param string $weight +// A weight from the $font-weight map. +// +// @return string +// The selected font-weight. +@function weight($weight) { + @if type-of($weight) == "string" { + @if map-has-key($font-weight, $weight) { + @return map-get($font-weight, $weight); + } + @else { + @error "'#{$weight}' not found in $font-weight map"; + } + } + @else { + @error "Weight specified for weight() is not a string"; + } +} + +// Extend a font by adding a web-safe stack to it. +// +// Example usage: +// $new-font-stack: extend-font-stack("Open sans", $sans-serif-stack); +// +// @param string $font +// The name of the font. Use inverted commas if there are spaces in the font +// name. i.e "Open sans" +// @param list $font-stack +// The font stack variable to extend. +@function extend-font-stack($font, $font-stack) { + @return join($font, $font-stack, $separator: comma); +} diff --git a/assets/lib/typey/stylesheets/typey/functions/_helpers.scss b/assets/lib/typey/stylesheets/typey/functions/_helpers.scss new file mode 100644 index 0000000..7c753ff --- /dev/null +++ b/assets/lib/typey/stylesheets/typey/functions/_helpers.scss @@ -0,0 +1,59 @@ +// Output a number in the $base-unit. +// +// @param number $number +// The number (without unit) to output. +// +// @return number +// The number with the base unit +@function typey-output-in-base-unit($number) { + @if $number == 0 { + @return 0; + } + @if $base-unit == rem { + @return $number * 1rem; + } + @if $base-unit == px { + @return $number * 1px; + } + @if $base-unit == em { + @return $number * 1em; + } +} + +// Output a number in a chosen unit. +// +// @param number $number +// The number (without unit) to output. +// @param string $unit +// (optional) The unit to output, either em, px or rem. +// +// @return number +// The number with the base unit +@function typey-output-in-unit($number, $unit: $base-unit) { + @if $number == 0 { + @return 0; + } + @if $unit == rem { + @return $number * 1rem; + } + @if $unit == px { + @return $number * 1px; + } + @if $unit == em { + @return $number * 1em; + } +} + +// Remove the unit from a number. +// +// @param number $number +// The number (with unit) to convert. Allowed units: any +// +// @return number +// The number without the unit. +@function typey-strip-unit($number) { + @if type-of($number) == "number" and not unitless($number) { + @return $number / ($number * 0 + 1); + } + @return $number; +} diff --git a/assets/lib/typey/stylesheets/typey/functions/_outputters.scss b/assets/lib/typey/stylesheets/typey/functions/_outputters.scss new file mode 100644 index 0000000..aa19e98 --- /dev/null +++ b/assets/lib/typey/stylesheets/typey/functions/_outputters.scss @@ -0,0 +1,83 @@ +// Take a px value and output converted value. +// +// @param number $number +// A px value to convert. +// @param number|string $context +// (optional) Only used if em is the $base-unit. The value of the elements/parents +// font-size if it differs from $base-font-size. Specified as a t-shirt size or +// value in px. +// +// @return number +// The number converted to the base unit. +@function output-from-px($number, $context: $base-font-size) { + @if $base-unit == rem { + @return typey-output-in-base-unit(($number / $base-font-size)); + } + @if $base-unit == px { + @return typey-output-in-base-unit(typey-strip-unit($number)); + } + @if $base-unit == em { + @return calculate-em-px($number, $context); + } +} + +// Take a key from the $font-size map and output converted value. +// +// @param string $size +// A size from the $font-size map. +// @param number|string $context +// (optional) Only used if em is the $base-unit. The value of the parent +// font-size if it differs from $base-font-size. Specified as a t-shirt size or +// value in px. +// +// @return number +// The selected font-size in $base-unit. +@function output-from-font-size-map($size, $context: $base-font-size) { + $map-size: map-get($font-size, $size); + @if $base-unit == rem { + @return typey-output-in-base-unit(($map-size / $base-font-size)); + } + @if $base-unit == px { + @return typey-output-in-base-unit(typey-strip-unit($map-size)); + } + @if $base-unit == em { + @return calculate-em-px($map-size, $context); + } +} + +// Take a line-height multipler and output converted value. +// +// @param number $number +// Multiple of line height to be used. +// @param number|string $context +// (optional) Only used if em is the $base-unit. The value of the elements/parents +// font-size if it differs from $base-font-size. Specified as a t-shirt size or +// value in px. +// +// @return number +// The value of the line-height multiple converted to the base unit. +@function output-from-multiplier($x, $context: $base-font-size) { + @if $base-unit == rem { + @return typey-output-in-base-unit(($x * $base-line-height) / $base-font-size); + } + @if $base-unit == px { + @return typey-output-in-base-unit(typey-strip-unit($x * $base-line-height)); + } + @if $base-unit == em { + @return calculate-em-multiplier($x, $context); + } +} + +// Take a line-height ratio and output as em. +// +// @param number $ratio +// Multiple of the $font-size to be used. +// @param number|string $context +// (optional) used to ensure function outputs the ratio regardless of whether +// it is the same as the $base-line-height-ratio. +// +// @return number +// The ratio in em. +@function output-from-ratio($ratio: $base-line-height-ratio) { + @return $ratio; +} diff --git a/assets/lib/typey/stylesheets/typey/functions/_sizers.scss b/assets/lib/typey/stylesheets/typey/functions/_sizers.scss new file mode 100644 index 0000000..75a84b5 --- /dev/null +++ b/assets/lib/typey/stylesheets/typey/functions/_sizers.scss @@ -0,0 +1,91 @@ +// Takes a sizing from the $font-size map (m, xl, xxl, etc) and convert it to +// the base unit. Alternatively convert a px font-size into the base unit. +// +// @param number|string $size +// A size from the $font-size map or px value to be converted +// @param number|string $context +// (optional) Only used if em is the $base-unit. The value of the parent +// font-size if it differs from $base-font-size. Specified as a t-shirt size or +// value in px. +// +// @return number +// The selected font-size in $base-unit. +@function font-size($size, $context: $base-font-size) { + $allowed-types: "font-size", "px"; + $type: typey-validator($size, $allowed-types); + @if $type == "font-size" { + @return output-from-font-size-map($size, $context); + } + @if $type == "px" { + @return output-from-px($size, $context); + } +} + +// Generate a value to be used as line-height from either: +// a) a multiple of $base-line-height +// b) a static px value +// c) a ratio of the font-size +// +// Example usage with multiple: +// line-height: line-height(2); +// Example usage with static value: +// line-height: line-height(18px); +// Example usage with ratio: +// line-height: line-height(1.5); +// +// @param number $x +// Multiple of $base-line-height to be used, px value to be converted, or ratio of +// font-size. +// @param number|string $context +// (optional) Only used if em is the $base-unit. The value of the +// elements/parents font-size if it differs from $base-font-size. +// Specified as a t-shirt size or value in px. +// @return number +// The calculated height in $base-unit. +@function line-height($x, $context: $base-font-size) { + $allowed-types: "multiplier", "px"; + $type: typey-validator($x, $allowed-types); + @if $type == "multiplier" { + @if ($line-height-method == "ratio") { + @return output-from-ratio($x); + } + @else { + @return output-from-multiplier($x, $context); + } + } + @if $type == "px" { + @return output-from-px($x, $context); + } +} + +// Generate a value to be used as some form of height or spacing from either: +// a) a multiple of $base-line-height +// b) a static px value +// +// Example usage with multiple: +// height: spacing(2); +// Example usage with static value: +// margin-bottom: spacing(18px); +// +// @param number $x +// Multiple of $base-line-height to be used or px value to be converted. +// @param number|string $context +// (optional) Only used if em is the $base-unit. The value of the elements/parents +// font-size if it differs from $base-font-size. Specified as a t-shirt size or +// value in px. +// +// @return number +// The calculated spacing in $base-unit. +@function spacing($x, $context: $base-font-size) { + $allowed-types: "multiplier", "px", "auto"; + $type: typey-validator($x, $allowed-types); + @if $type == "multiplier" { + @return output-from-multiplier($x, $context); + } + @if $type == "px" { + @return output-from-px($x, $context); + } + @if $type == "auto" { + @return auto; + } +} diff --git a/assets/lib/typey/stylesheets/typey/functions/_validators.scss b/assets/lib/typey/stylesheets/typey/functions/_validators.scss new file mode 100644 index 0000000..a7b84cd --- /dev/null +++ b/assets/lib/typey/stylesheets/typey/functions/_validators.scss @@ -0,0 +1,82 @@ +// Takes a value and checks to ensure it's expressed correctly then returns +// the type. +// +// @param number|string|list $x +// A multiple of $base-line-height. +// A px value. +// A size from the $font-size map. +// A space seperated list container multiples and/or px values. +// +// @return string +// multiplier, px, font-size, list +@function typey-check-value($x) { + @if type-of($x) == "number" { + @if unitless($x) { + @return "multiplier"; + } + @if not unitless($x) { + @if unit($x) == px { + @return "px"; + } + @else { + @error "All units must be expressed in px"; + } + } + } + @if type-of($x) == "string" { + @if $x == "auto" { + @return "auto"; + } + @if map-has-key($font-size, $x) { + @return "font-size"; + } + @else { + @error "'#{$x}' not found in $font-size map"; + } + } + @if type-of($x) == "list" { + @if list-separator($x) == space { + @each $value in $x { + @if type-of($value) == "number" or $value == "auto" { + @if type-of($value) == "number" { + @if not unitless($value) and unit($value) != px { + @error "All units must be expressed in px"; + } + } + } + @else { + @error "Values specified inside lists must be a number or 'auto'"; + } + } + @return "list"; + } + @else { + @error "All lists must use a space as their seperator"; + } + } + @else { + @return type-of($x); + } +} + +// Takes a value and validates it against a specified type. +// +// @param number|string|list $x +// A multiple of $base-line-height. +// A px value. +// A size from the $font-size map. +// A space seperated list container multiples and/or px values. +// @param string|list $allowed-types +// Either multiplier, px, font-size, list, or a comibation specified in a list. +// +// @return string +// The values type. +@function typey-validator($x, $allowed-types) { + $type: typey-check-value($x); + @if index($allowed-types, $type) != null { + @return $type; + } + @else { + @error "'#{$type}' is not a valid type for this function (allowed types are: #{$allowed-types})"; + } +} diff --git a/assets/lib/typey/stylesheets/typey/mixins/_debug.scss b/assets/lib/typey/stylesheets/typey/mixins/_debug.scss new file mode 100644 index 0000000..5b4c9ad --- /dev/null +++ b/assets/lib/typey/stylesheets/typey/mixins/_debug.scss @@ -0,0 +1,41 @@ +// Output a horizontal grid to help with debugging typography. +// +// @param number $line-height +// Multiple of line height to be used, line-height ratio or px value to be converted. +// @param number|string $context +// (optional) Only used if em is the $base-unit. The value of the +// elements/parents font-size if it differs from $base-font-size. +// Specified as a t-shirt size or value in px. +// @param string $color +// (optional) Use a custom grid color. +@mixin typey-debug-grid($line-height: $base-line-height, $context: $base-font-size, $color: $typey-debug-color) { + @if $typey-debug == true { + $allowed-types: "multiplier", "px"; + $type: typey-validator($line-height, $allowed-types); + $grid-height: 0; + @if $line-height-method == "rhythm" { + $grid-height: line-height($line-height, $context); + } + @if $line-height-method == "ratio" { + @if $line-height == $base-line-height { + $grid-height: line-height($base-line-height-ratio, $context) * 1em; + } + @else { + $grid-height: line-height($line-height, $context) * 1em; + } + } + + position: relative; + background-image: repeating-linear-gradient(180deg, $color, $color 1px, transparent 1px, transparent $grid-height); + + &:after { + content: ""; + position: absolute; + bottom: -1px; + left: 0; + height: 1px; + width: 100%; + background-color: $color; + } + } +} diff --git a/assets/lib/typey/stylesheets/typey/mixins/_define-type-sizing.scss b/assets/lib/typey/stylesheets/typey/mixins/_define-type-sizing.scss new file mode 100644 index 0000000..d444d03 --- /dev/null +++ b/assets/lib/typey/stylesheets/typey/mixins/_define-type-sizing.scss @@ -0,0 +1,45 @@ +// Define defaults (use this in the HTML element). +// +// @param number $size +// (optional) The font-size. Use to set to anything other than $base-font-size. +// @param number $line-height +// (optional) The line-height. Use to set to anything other than $base-line-height. +// Set to a ratio when $line-height-as-ratio is true. Will default to $base-line-height-ratio. +// Set to false if you do not want to change a ratio of line-height already set. +@mixin define-type-sizing($size: $base-font-size, $line-height: $base-line-height) { + @if $base-unit == rem or $base-unit == em { + font-size: $size / $browser-font-size * 100%; + } + @if $base-unit == px { + font-size: $size; + } + + @if $line-height != false { + @if $line-height-method == "ratio" { + @if $line-height == $base-line-height { + $line-height: $base-line-height-ratio; + } + line-height: $line-height; + } + @else { + @if $base-unit == rem or $base-unit == em { + // In the html element, rem means relative to browser default font size; em means relative to html's font size. + line-height: calculate-em-px($line-height, $size); + } + @if $base-unit == px { + line-height: $line-height; + } + } + } + + @if $auto-print-sizing == true { + @if $base-unit == rem or $base-unit == em { + @media print { + font-size: $print-font-size; + } + } + @else { + @warn "As you are not using a relative base unit (rem or em) automatic print media sizing will not work. Set $auto-print-sizing to false to hide this warning" + } + } +} diff --git a/assets/lib/typey/stylesheets/typey/mixins/_font-size.scss b/assets/lib/typey/stylesheets/typey/mixins/_font-size.scss new file mode 100644 index 0000000..06d0325 --- /dev/null +++ b/assets/lib/typey/stylesheets/typey/mixins/_font-size.scss @@ -0,0 +1,24 @@ +// Define font-size (with fallback) +// +// @param number|string $size +// A size from the $font-size map or px value to be converted +// @param number|string $context +// (optional) Only used if em is the $base-unit. The value of the elements/parents +// font-size if it differs from $base-font-size. Specified as a t-shirt size or +// value in px. +@mixin font-size($size, $context: $base-font-size) { + $allowed-types: "font-size", "px"; + $type: typey-validator($size, $allowed-types); + @if $base-unit == rem { + @if $rem-fallback == true { + @if $type == "font-size" { + $map-size: map-get($font-size, $size); + font-size: $map-size; + } + @if $type == "px" { + font-size: $size; + } + } + } + font-size: font-size($size, $context); +} diff --git a/assets/lib/typey/stylesheets/typey/mixins/_line-height.scss b/assets/lib/typey/stylesheets/typey/mixins/_line-height.scss new file mode 100644 index 0000000..1581ceb --- /dev/null +++ b/assets/lib/typey/stylesheets/typey/mixins/_line-height.scss @@ -0,0 +1,23 @@ +// Define line-height (with fallback). +// +// @param number $x +// Multiple of line height to be used or px value to be converted. +// @param number|string $context +// (optional) Only used if em is the $base-unit. The value of the +// elements/parents font-size if it differs from $base-font-size. +// Specified as a t-shirt size or value in px. +@mixin line-height($x, $context: $base-font-size) { + $allowed-types: "multiplier", "px"; + $type: typey-validator($x, $allowed-types); + @if $base-unit == rem and $line-height-method == "rhythm" { + @if $rem-fallback == true { + @if $type == "multiplier" { + line-height: $x * $base-line-height; + } + @if $type == "px" { + line-height: $x; + } + } + } + line-height: line-height($x, $context); +} diff --git a/assets/lib/typey/stylesheets/typey/mixins/_spacing.scss b/assets/lib/typey/stylesheets/typey/mixins/_spacing.scss new file mode 100644 index 0000000..6feb17e --- /dev/null +++ b/assets/lib/typey/stylesheets/typey/mixins/_spacing.scss @@ -0,0 +1,89 @@ +// Define spacing (with fallbacks). +// +// @param string $type +// The type of spacing: margin, padding, margin-top, etc. +// @param number|list|string $spacing +// Multiple of $base-line-height to be used or px value to be converted. +// Can be a SASS list using the same parameters as the CSS margin property: +// i.e. top right bottom left, 1 0 2 0. +// Can also be the string "auto" when used as margin. +// @param number|string $context +// (optional) Only used if em is the $base-unit. The value of the elements/parents +// font-size if it differs from $base-font-size. Specified as a t-shirt size or +// value in px. +@mixin spacing($property, $spacing, $context: $base-font-size) { + $allowed-types: "multiplier", "px", "list"; + $type: typey-validator($spacing, $allowed-types); + + $px-fallback-list: (); + $converted-list: (); + + @each $x in $spacing { + @if $base-unit == rem { + $allowed-types: "multiplier", "px", "auto"; + $type: typey-validator($x, $allowed-types); + @if $type == "multiplier" { + $spacing: $x * $base-line-height; + $px-fallback-list: join($px-fallback-list, $spacing, $separator: space); + } + @if $type == "px" { + $px-fallback-list: join($px-fallback-list, $x, $separator: space); + } + @if $type == "auto" { + $px-fallback-list: join($px-fallback-list, $x, $separator: space); + } + } + $spacing: spacing($x, $context); + $converted-list: join($converted-list, $spacing, $separator: space); + } + + @if $base-unit == rem { + @if $rem-fallback == true { + #{$property}: $px-fallback-list; + } + } + #{$property}: $converted-list; +} + +// Wrapper mixins for various spacing properties. +// These can be used to provide easily sized spacing in the base unit. +// +// @param number|list|string $x +// Multiple of $base-line-height to be used or px value to be converted. +// Can be a SASS list using the same parameters as the CSS margin property: +// i.e. top right bottom left, 1 0 2 0. +// Can also be the string "auto" when used as margin. +// @param number|string $context +// (optional) Only used if em is the $base-unit. The value of the elements/parents +// font-size if it differs from $base-font-size. Specified as a t-shirt size or +// value in px. +@mixin margin($x, $context: $base-font-size) { + @include spacing(margin, $x, $context); +} +@mixin margin-top($x, $context: $base-font-size) { + @include spacing(margin-top, $x, $context); +} +@mixin margin-bottom($x, $context: $base-font-size) { + @include spacing(margin-bottom, $x, $context); +} +@mixin margin-left($x, $context: $base-font-size) { + @include spacing(margin-left, $x, $context); +} +@mixin margin-right($x, $context: $base-font-size) { + @include spacing(margin-right, $x, $context); +} +@mixin padding($x, $context: $base-font-size) { + @include spacing(padding, $x, $context); +} +@mixin padding-top($x, $context: $base-font-size) { + @include spacing(padding-top, $x, $context); +} +@mixin padding-bottom($x, $context: $base-font-size) { + @include spacing(padding-bottom, $x, $context); +} +@mixin padding-left($x, $context: $base-font-size) { + @include spacing(padding-left, $x, $context); +} +@mixin padding-right($x, $context: $base-font-size) { + @include spacing(padding-right, $x, $context); +} diff --git a/assets/lib/typey/stylesheets/typey/mixins/_type-layout.scss b/assets/lib/typey/stylesheets/typey/mixins/_type-layout.scss new file mode 100644 index 0000000..8098a38 --- /dev/null +++ b/assets/lib/typey/stylesheets/typey/mixins/_type-layout.scss @@ -0,0 +1,15 @@ +// Define a type layout (font-size and line-height). +// +// @param number|string $size +// A size from the $font-size map or a px value. +// @param number $line-height +// Multiple of line height to be used or px value to be converted. +// @param number|string $context +// (optional) Only used if em is the $base-unit. The value of the +// elements/parents font-size if it differs from $base-font-size. +// Specified as a t-shirt size or value in px. +@mixin type-layout($size, $line-height, $context: $base-font-size) { + @include font-size($size, $context); + @include line-height($line-height, $size); + @include typey-debug-grid($line-height, $size); +} diff --git a/assets/lib/typey/stylesheets/typey/mixins/_typeface.scss b/assets/lib/typey/stylesheets/typey/mixins/_typeface.scss new file mode 100644 index 0000000..2ecec08 --- /dev/null +++ b/assets/lib/typey/stylesheets/typey/mixins/_typeface.scss @@ -0,0 +1,90 @@ +// Embed a typeface. +// +// @param string $typeface +// A font family from the $typefaces map. +@mixin typeface($typeface) { + $typeface-name: $typeface; + $typeface: map-get($typefaces, $typeface); + + $font-family: false; + $letter-spacing: false; + $weight: false; + $style: false; + $case: false; + + // Assign values to variables when $typeface is a keyed map. + @if type-of($typeface) == "map" { + @if map-has-key($typeface, font-family) { + $font-family: map-get($typeface, font-family); + } + @if map-has-key($typeface, letter-spacing) { + $letter-spacing: map-get($typeface, letter-spacing); + } + @if map-has-key($typeface, weight) { + $weight: map-get($typeface, weight); + } + @if map-has-key($typeface, style) { + $style: map-get($typeface, style); + } + @if map-has-key($typeface, case) { + $case: map-get($typeface, case); + } + } + + // Assign values to variables when $typeface is shorthand. + @if type-of($typeface) == "list" { + @if (list-separator($typeface) == "comma") { + // This shorthand is just a list of fonts. + $font-family: $typeface; + } + @else { + @each $value in $typeface { + // This is a font-family. + @if type-of($value) == "list" { + $font-family: $value; + } + // This is a letter-spacing value. + @if type-of($value) == "number" { + $letter-spacing: $value; + } + // This is a font-weight value. + @if map-has-key($font-weight, $value) { + $weight: $value; + } + // This is a case value. + @else if type-of($value) == "string" and index($text-transform-values, $value) != null { + $case: $value; + } + // This is a style value. + @else if type-of($value) == "string" and index($font-style-values, $value) != null { + $style: $value; + } + } + } + } + + // Output properties. + @if $font-family { + font-family: $font-family; + } + @else { + @error "Typeface '#{$typeface-name}' does not have a font-family"; + } + @if $letter-spacing { + @if ($letter-spacing == 0) { + letter-spacing: 0; + } + @else { + letter-spacing: calculate-em-px($letter-spacing, $base-font-size); + } + } + @if $weight { + font-weight: weight($weight); + } + @if $style { + font-style: $style; + } + @if $case { + text-transform: $case; + } +} diff --git a/assets/lib/typey/stylesheets/typey/mixins/_typeset.scss b/assets/lib/typey/stylesheets/typey/mixins/_typeset.scss new file mode 100644 index 0000000..caa0d10 --- /dev/null +++ b/assets/lib/typey/stylesheets/typey/mixins/_typeset.scss @@ -0,0 +1,100 @@ +// Typeset your type. +// +// @param string $typestyle +// A type style from the $typestyles map. +// @param number|string $context +// (optional) Only used if em is the $base-unit. The value of the +// elements/parents font-size if it differs from $base-font-size. +// Specified as a t-shirt size or value in px. +@mixin typeset($typestyle, $context: $base-font-size) { + $typestyle: map-get($typestyles, $typestyle); + + $font-size: false; + $line-height: false; + $weight: false; + $style: false; + $case: false; + $letter-spacing: false; + + // Assign values to variables when $typestyle is a keyed map. + @if type-of($typestyle) == "map" { + @if map-has-key($typestyle, font-size) { + $font-size: map-get($typestyle, font-size); + } + @if map-has-key($typestyle, line-height) { + $line-height: map-get($typestyle, line-height); + } + @if map-has-key($typestyle, weight) { + $weight: map-get($typestyle, weight); + } + @if map-has-key($typestyle, style) { + $style: map-get($typestyle, style); + } + @if map-has-key($typestyle, case) { + $case: map-get($typestyle, case); + } + @if map-has-key($typestyle, letter-spacing) { + $letter-spacing: map-get($typestyle, letter-spacing); + } + } + + // Assign values to variables when $typestyle is shorthand. + @if type-of($typestyle) == "list" { + @each $value in $typestyle { + // The first value is always font-size. + @if index($typestyle, $value) == 1 { + $font-size: $value; + } + // This is a line-height value. + @else if type-of($value) == "number" and index($typestyle, $value) == 2 { + $line-height: $value; + } + // This is a font-weight value. + @else if map-has-key($font-weight, $value) { + $weight: $value; + } + // This is a case value. + @else if type-of($value) == "string" and index($text-transform-values, $value) != null { + $case: $value; + } + // This is a style value. + @else if type-of($value) == "string" and index($font-style-values, $value) != null { + $style: $value; + } + // This is a letter-spacing value. + @else if type-of($value) == "number" and index($typestyle, $value) != 2 and index($typestyle, $value) != 1 { + $letter-spacing: $value; + } + } + } + + // $typestyle may also be a solitary font-size. + @if type-of($typestyle) != "map" and type-of($typestyle) != "list" { + $font-size: $typestyle; + } + + // Output properties. + @if $font-size { + @include font-size($font-size, $context); + } + @if $line-height { + @include typey-debug-grid($line-height, $font-size); + @include line-height($line-height, $font-size); + } + @else { + // Using default line-height so set debug grid accordingly. + @include typey-debug-grid($base-line-height, $font-size); + } + @if $weight { + font-weight: weight($weight); + } + @if $style { + font-style: $style; + } + @if $case { + text-transform: $case; + } + @if $letter-spacing { + letter-spacing: calculate-em-px($letter-spacing, $font-size); + } +} diff --git a/create_sub_theme.sh b/create_sub_theme.sh index 97950ae..074d42f 100755 --- a/create_sub_theme.sh +++ b/create_sub_theme.sh @@ -25,7 +25,7 @@ mkdir "$themename" cp -p zen/.eslintrc zen/.gitignore zen/.sass-lint.yml $themename/ cp -p zen/gulpfile.js zen/package-lock.json zen/package.json zen/theme.toml $themename/ -cp -pr zen/sass $themename/ +cp -pr zen/assets $themename/ cp -pr zen/static $themename/ sed -e 's/^\(name = \).*$/\1"'"$human"'"/g' -e 's/^\(description = \).*$/\1"A Zen sub-theme"/g' $themename/theme.toml > $themename/theme.toml.temp diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml index d61a195..b29ac1a 100644 --- a/exampleSite/config.yaml +++ b/exampleSite/config.yaml @@ -20,8 +20,6 @@ outputs: section: ["HTML","RSS", "JSON"] params: - cacheBustCSS: false - cacheBustJS: false contact: "info@example.org" copyright: "This site is licensed under a [Creative Commons Attribution-ShareAlike 4.0 International License](https://creativecommons.org/licenses/by-sa/4.0/)." description: "The zen theme for Hugo example site." diff --git a/gulpfile.js b/gulpfile.js index af68ccc..fc53f95 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,7 +1,5 @@ 'use strict'; -var importOnce = require('node-sass-import-once'); - var options = {}; // ############################# @@ -9,38 +7,20 @@ var options = {}; // ############################# // The root paths are used to construct all the other paths in this -// configuration. The "project" root path is where this gulpfile.js is located. -// While Zen distributes this in the theme root folder, you can also put this -// (and the package.json) in your project's root folder and edit the paths -// accordingly. +// configuration. options.rootPath = { - project : __dirname + '/', - theme : __dirname + '/' + projectAssets : '../../assets/', + themeAssets : __dirname + '/assets/' }; -options.theme = { - root : options.rootPath.theme, - sass : options.rootPath.theme + 'assets/sass/', - css : options.rootPath.theme + 'static/css/', - js : options.rootPath.theme + 'assets/js/', - js_dest : options.rootPath.theme + 'static/js/' -}; - -// Define the node-sass configuration. The includePaths is critical! -options.sass = { - importer: importOnce, - includePaths: [ - options.theme.sass, - options.rootPath.project + 'node_modules/typey/stylesheets' +options.path = { + sass : [ + options.rootPath.themeAssets + 'sass/**/*.scss', + options.rootPath.projectAssets + 'sass/**/*.scss' ], - outputStyle: 'expanded' -}; - -// Define the paths to the JS files to lint. -options.eslint = { - files : [ - options.theme.js + '**/*.js', - '!' + options.theme.js + '**/*.min.js' + js : [ + options.rootPath.themeAssets + 'js/**/*.js', + options.rootPath.projectAssets + 'js/**/*.js' ] }; @@ -49,51 +29,20 @@ options.eslint = { options.gulpWatchOptions = {interval: 600}; // options.gulpWatchOptions = {interval: 1000, mode: 'poll'}; - // Load Gulp and tools we will use. -var gulp = require('gulp'), - $ = require('gulp-load-plugins')(), - del = require('del'), - // gulp-load-plugins will report "undefined" error unless you load gulp-sass manually. - sass = require('gulp-sass'), - cleanCSS = require('gulp-clean-css'), - touch = require('gulp-touch-cmd'); - -// The sass files to process. -var sassFiles = [ - options.theme.sass + '**/*.scss', - // Do not open Sass partials as they will be included as needed. - '!' + options.theme.sass + '**/_*.scss' -]; - -// Clean JS files. -gulp.task('clean:js', function clean () { - return del([ - options.theme.js_dest + '**/*.js' - ], {force: true}); -}); - -// Clean CSS files. -gulp.task('clean:css', function clean () { - return del([ - options.theme.css + '**/*.css', - options.theme.css + '**/*.map' - ], {force: true}); -}); - -// Clean all directories. -gulp.task('clean', gulp.series('clean:css')); +var gulp = require('gulp'); +var $ = require('gulp-load-plugins')(); // Lint JavaScript. gulp.task('lint:js', function lint () { - return gulp.src(options.eslint.files) + return gulp.src(options.path.js) .pipe($.eslint()) .pipe($.eslint.format()); }); // Lint JavaScript and throw an error for a CI to catch. gulp.task('lint:js-with-fail', function lint () { - return gulp.src(options.eslint.files) + return gulp.src(options.path.js) .pipe($.eslint()) .pipe($.eslint.format()) .pipe($.eslint.failOnError()); @@ -101,14 +50,14 @@ gulp.task('lint:js-with-fail', function lint () { // Lint Sass. gulp.task('lint:sass', function lint () { - return gulp.src(options.theme.sass + '**/*.scss') + return gulp.src(options.path.sass) .pipe($.sassLint()) .pipe($.sassLint.format()); }); // Lint Sass and throw an error for a CI to catch. gulp.task('lint:sass-with-fail', function lint () { - return gulp.src(options.theme.sass + '**/*.scss') + return gulp.src(options.path.sass) .pipe($.sassLint()) .pipe($.sassLint.format()) .pipe($.sassLint.failOnError()); @@ -117,61 +66,18 @@ gulp.task('lint:sass-with-fail', function lint () { // Lint Sass and JavaScript. gulp.task('lint', gulp.parallel('lint:sass', 'lint:js')); -//Build JS -gulp.task('scripts', gulp.series('clean:js', function js () { - return gulp.src(options.theme.js + '**/*.js') - .pipe(gulp.dest(options.theme.js_dest)) - .pipe(touch()); -})); - -gulp.task('scripts:production', gulp.series('scripts')); - -// Build CSS. -gulp.task('styles', gulp.series('clean:css', function css () { - return gulp.src(sassFiles) - .pipe($.sourcemaps.init()) - .pipe(sass(options.sass).on('error', sass.logError)) - .pipe($.size({showFiles: true})) - .pipe($.sourcemaps.write('./')) - .pipe(gulp.dest(options.theme.css)) - .pipe(touch()); -})); - -gulp.task('styles:production', gulp.series('clean:css', function css () { - return gulp.src(sassFiles) - .pipe(sass(options.sass).on('error', sass.logError)) - .pipe($.size({showFiles: true})) - .pipe(cleanCSS()) - .pipe(gulp.dest(options.theme.css)) - .pipe(touch()); -})); - // Watch for changes and rebuild. -gulp.task('watch:css', gulp.series('styles', function watch () { - return gulp.watch(options.theme.sass + '**/*.scss', options.gulpWatchOptions, gulp.series('styles')); -})); - gulp.task('watch:lint:sass', gulp.series('lint:sass', function watch () { - return gulp.watch(options.theme.sass + '**/*.scss', options.gulpWatchOptions, gulp.series('lint:sass')); -})); - -gulp.task('watch:js', gulp.series('scripts', function watch () { - return gulp.watch(options.eslint.files, options.gulpWatchOptions, gulp.series('scripts')); + return gulp.watch(options.path.sass, options.gulpWatchOptions, gulp.series('lint:sass')); })); gulp.task('watch:lint:js', gulp.series('lint:js', function watch () { - return gulp.watch(options.eslint.files, options.gulpWatchOptions, gulp.series('lint:js')); + return gulp.watch(options.path.js, options.gulpWatchOptions, gulp.series('lint:js')); })); -gulp.task('watch', gulp.parallel('watch:css', 'watch:lint:sass', 'watch:js', 'watch:lint:js')); +gulp.task('watch:lint', gulp.parallel('watch:lint:sass', 'watch:lint:js')); -// Build everything. -gulp.task('build', gulp.parallel('styles:production', 'scripts:production', 'lint')); +gulp.task('watch', gulp.series('watch:lint')); // The default task. -gulp.task('default', gulp.series('build')); - - -// Resources used to create this gulpfile.js: -// - https://github.com/google/web-starter-kit/blob/master/gulpfile.babel.js -// - https://github.com/dlmanning/gulp-sass/blob/master/README.md +gulp.task('default', gulp.series('lint')); diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index d6e2617..c64f8c7 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -6,7 +6,7 @@