CSS styles refactored in SASS language
Pokémon Central Wiki CSS styles, refactored in SCSS language.
This started as a refactoring of the original Common.css:
it was getting huge and messy; moreover, writing plain old CSS is a pain.
In addition to that, flexbox styles from a specific extension have been merged
here.
npm install gulpjs/gulp-cli -gnpm install.The build process is powered by gulp v4.
It consists of four main steps:
However, the actual tasks don’t match these steps. In fact, it would not be
worth the effort to split the build process in this way, since the steps are
hardly ever executed individually.
There are two main tasks in the gulpfile.js, plus a watch and default
tasks that are mere aliases. These are:
icons: This task downloads the SVG icons straight from Pokémon Central
website, minifies them (even though I’m pretty sure this doesn’t really
reduce the size significantly), and finally inlines them in the SCSS. The
output of the whole process is a couple of SCSS files in the _icons
directory: the reason for this seemingly weird outcome is the use of
gulp-sass-inline-svg
plugin. It was chosen to split this task from the main compile one, as
it operates on different inputs and produces other outputs: moreover,
SCSS files should have been added later to the pipeline, as the plugin
only handles SVG inputs.
compile: This task carries out the main job: it produces the CSS files
that can be loaded on Pokémon Central Wiki. This implies: executing the
icons task; compiling SCSS files to CSS (including the output of
icons); adding vendor prefixes. For more information on the SCSS
compilation, read the ** section.
watch: Watcher for compile: it executes compile whenever its inputs
change.
default: alias for watch.
However, the inclusion of files is SCSS based, and the import scheme is based
on an _all.scss file located in each sub-directory, that in turn imports all
the files in the directory. This was chosen in order to minimize git conflicts.