ViMaSter/hackertours-theme
Watch
0
0
Fork
You've already forked hackertours-theme
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implement Hugo Pipes to process sass and js. Gulp now only for lint.

Browse source
This commit is contained in:
Fredrik Jonsson 2019-03-09 16:38:53 +01:00
commit 336b3156ca
41 changed files with 1343 additions and 1668 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.eslintignore Normal file
View file

@ -0,0 +1 @@
*.min.js

87
.eslintrc
View file

@ -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
}]
}
}

142
.eslintrc.yaml Normal file
View file

@ -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

61
README.md
View file

@ -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 <strong>content</strong> 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.

17
assets/lib/typey/stylesheets/_typey.scss Normal file
View file

@ -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";

181
assets/lib/typey/stylesheets/typey/_defaults.scss Normal file
View file

@ -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";
}
}
}
}
}

4
assets/lib/typey/stylesheets/typey/_font-stacks.scss Normal file
View file

@ -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;

55
assets/lib/typey/stylesheets/typey/functions/_depreciated.scss Normal file
View file

@ -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);
}

41
assets/lib/typey/stylesheets/typey/functions/_em-calculators.scss Normal file
View file

@ -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);
}
}

34
assets/lib/typey/stylesheets/typey/functions/_extras.scss Normal file
View file

@ -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);
}

59
assets/lib/typey/stylesheets/typey/functions/_helpers.scss Normal file
View file

@ -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;
}

83
assets/lib/typey/stylesheets/typey/functions/_outputters.scss Normal file
View file

@ -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;
}

91
assets/lib/typey/stylesheets/typey/functions/_sizers.scss Normal file
View file

@ -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;
}
}

82
assets/lib/typey/stylesheets/typey/functions/_validators.scss Normal file
View file

@ -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})";
}
}

41
assets/lib/typey/stylesheets/typey/mixins/_debug.scss Normal file
View file

@ -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;
}
}
}

45
assets/lib/typey/stylesheets/typey/mixins/_define-type-sizing.scss Normal file
View file

@ -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"
}
}
}

24
assets/lib/typey/stylesheets/typey/mixins/_font-size.scss Normal file
View file

@ -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);
}

23
assets/lib/typey/stylesheets/typey/mixins/_line-height.scss Normal file
View file

@ -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);
}

89
assets/lib/typey/stylesheets/typey/mixins/_spacing.scss Normal file
View file

@ -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);
}

15
assets/lib/typey/stylesheets/typey/mixins/_type-layout.scss Normal file
View file

@ -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);
}

Some files were not shown because too many files have changed in this diff Show more