Spektrum Media front-end workflow
Upon first installation, the front-end document architecture will be generated automatically.
- NodeJS | < 5.11.x
- JDK | To check if you have a JDK installed:
- FontForge and its dependencies (batik, ttf2svg) | To install with homebrew:
brew install fontforge batik ttf2svg
In your terminal, run
npm init from your project's front-end folder and fill in the fields appropriately.
npm install spk-workflow --save-dev.
The main tasks are
gulplaunch browserSync and gulp-watch
gulp devlaunch only gulp-watch
gulp buildprocess Sass/PostCSS and run JSHint
gulp build-fullprocess Sass/PostCSS, build fonts and icons and run JSHint
gulp imagesoptimize images through the TinyPNG API (requires free API key)
Settings are set at the top of
gulpfile.js in the
The settings are:
browserSync.useBrowser######string | array Leave as
defaultto use your default browser. You can also assign an array if you want to open multiple browsers at once, eg.
['google chrome', 'firefox'].
browserSync.useProxy######string | boolean To use BrowserSync and serve your files from a dev server, you need to set your local proxy URL such as
localhost/project. Leave as false if you are just serving static files.
errors.sounds######boolean Use system notifications and/or sounds when errors occur that prevent successful completion of a task.
keys.tinypng######string | boolean Input your TinyPNG API key if you wish to use the image optimization feature.
./ ├─ Fonts/ │ ├─ Icons/ │ └─ _Src/ │ ├─ Images/ │ ├─ Sass/ │ ├─ site.scss │ │ │ ├─ Assets/ │ │ ├─ _fontface.scss │ │ └─ _icon.scss │ │ │ ├─ Components/ │ │ │ ├─ Settings/ │ │ ├─ _body.scss │ │ ├─ _color.scss │ │ ├─ _easing.scss │ │ ├─ _font.scss │ │ └─ _mediaquery.scss │ │ │ └─ Tools/ │ ├─ _mixin.scss │ └─ _reset.scss │ ├─ Scripts/ │ └─ site.js │ └─ Stylesheets/
For full documentation, see the BrowserSync website.
gulp task will launch BrowserSync on port
:3010 and will reload the page on save for
PostCSS processes Sass' output to add a few extra features and shortcuts.
PostCSS features include:
- autoprefixer - automatic vendor prefixes
- css-declaration-sorter - sort css properties for better gzipping and OCD
- css-mqpacker - concatenate media queries
- postcss-custom-media - custom media query aliases
- postcss-position-alt - shorthand position property
- postcss-pxtorem - transforms
rembased on 16px root size
- postcss-short-color - shorthand color property
- postcss-size - shorthand size property
The SPK Workflow includes three team-sourced tools:
A collection of mixins and a reset stylesheet that are maintained by the team. The goal is to reduce the amount of obfuscated code and apply a CSS reset that everyone is familiar with.
During each project's post-mortem, any additions or modifications will be discussed to help these tools evolve.
The last file is contains all the team-sourced Sass functions.
cc() ColorControl function allows great centralized control and coordination of your color palettes and variations.
Colors are set in
Sass/Settings/_color.scss as a Sass map. All colors should be set in the default sub-map
default. Any modifications should be created in a relevant sub-map.
To call your colors, use the
cc() function. The first parameter, the color you want, is mandatory and will be pulled from the default palette. The second parameter can be either the sub-palette you want or the alpha-channel. If you specify a sub-palette, you can pass the alpha-channel as the third option.
/* _color.scss */$),));/* _body.scss *//* _about.scss */
As mentioned above, Sass is used as a first layer of processing. Using usual Sass syntax as you are used to will work perfectly.
The PostCSS layer offers extra features and is intended to stay completely out of the way when not called upon. Using these is completely optional.
Custom Media Queries
Set media query aliases and use them with a much more natural syntax.
@); // >= 768&__}}
There are 3 property shortcuts available:
/* size */&--}/* color */}/* position */
/* size *//* color *//* position */
Simply drop any
.otf files in the
eot, ttf, svg, woff, woff2 font files are generated in their own sub-directories.
@fontface declarations are also generated automatically and added to
.svg files into
The first step will create an SVG-Spritesheet with
<symbol> elements in
./Icons/. You can then add the spritesheet to the top of the document's body using AJAX, leveraging the browser's cache for future visits.
You can use these as icons with the SVG
<use> element, setting the reference to the filename of the original SVG file. For example, if you had a file named
You can style the icon through CSS. Instead you using
color: blue; for it's color, you would use
The second step will generate
eot, ttf, svg, woff, woff2 font files and the necessary CSS
@fontface declarations and classes, which are added to
Again, the original file name is used to identify the icon you want by class prefixed with
using the same example as above:
Each task is individually accessible through
gulp icons-sprite for the svg icons and
gulp icons-font for the icon fonts.
Note: this task requires an Internet connection.
.png, .jpg, .jpeg file in
./Images/ will be optimized, but only once to prevent making unnecessary calls to the TinyPNG API, for which you need a free API key.
If a filename is changed, it will be optimized again.
JS processing consists only of linting your scripts with JSHint and outputting any errors and warnings to your terminal.