On Functional CSS
Recreating a Medium style article/blog post using Tachyons, the css toolkit.
https://klazich.github.io/on-functional-css/ (built from
gh-pagesbranch.)
Code Louisville Mentor/Reviewer,
My readme is a bit out of sorts right now so i'll point out the relavent parts real quick.
You can view the production build here. Or, after cloning the repo and installing the dependencies you can start a local server that serves the production build by running:
$ yarn serve
# or
$ npm run serveIf you are really intrested you can build from source and start the development server with:
$ yarn start
# or
$ npm run startMy unprocessed code can be found in the src\ directory:
- Html -
src/index.html - Javascript -
src/js/with entry atsrc/js/index.js - Css -
src/css/styles.css- there is some future css syntax
Table of Contents
Introduction
About
...
Background
Examples of the layout and style I want to recreate:
The content I will use for the blog post:
The tools I will use:
- I will stick to using Tachyons as much as possible. When extending Tachyons I will use these guidelines: Extending Basscss.
What is Functional CSS?
If you haven't heard of it, functional CSS (or atomic CSS/utility classes/immutable CSS - I could go on forever. There's not a good name) is the idea that instead of writing big, monolith components in my CSS, I write small, single property, immutable classes that can be assembled into a larger component in HTML.
— Marcelo Somers, Rationalizing Functional CSS
For information on what functional/atomic css means see Additional Information and read "Let’s Define Exactly What Atomic CSS is. "
Project Requirements
Follow this link to the wiki
Development
Requirements
Clone & Install
Clone the project from Github,
here. Then cd into the new
directory...
$ git clone https://github.com/klazich/on-functional-css.git
$ cd on-functional-cssThen install packages with npm or yarn...
$ yarn
# or
$ npm installBuilding The Webpage
The website is built from the source directory: src/, where the code is
written. With the environment variable NODE_ENV=development (default), files
will be built to the tmp/ directory where a local dev server can serve from.
With NODE_ENV=production files will be built to the dist/ directory and
ready to deploy.
There are roughly 4 build processes used in this order:
-
Assets
The Assets task involves processing and copying the image and icon files from
src/img/(and copyingmanifest.json). gulp-imagemin is used to compress and optimize images and add them to the destination directory. gulp-newer make sure only new or changed files are processed (This is very useful when running the dev server). -
Content
...html inline images
-
Scripts
...javascript webpack babel
-
Styles
...css postcss
NPM scripts (package.json)
I like to use yarn for package management but
npmwill also work.
The "start" and "build" scripts simply run the start and
build Gulp tasks but sets the NODE_ENV environment variable before
hand.
Start developing
$ yarn run start
Sets the NODE_ENV environment variable to development with
cross-env.
Builds the source files to the dist/ directory before starting a local server
to serve them to the browser. The src/ directory will be watched for changes
and rebuilt when detected. The browser will be reloaded or streamed to after
changes have been built.
Build production files
$ yarn run build
Sets the NODE_ENV environment variable to production with
cross-env.
Builds the production ready files to docs.
Push build to GitHub Pages
$ yarn run publish-gh-page
I use this when I want to push the current build to the GitHub Pages site. It
stages changes in the docs/ directory, commits them then pushes to the remote.
Make the code look nice
$ yarn run prettier
Runs prettier on the project root. Files
with these extensions are processed: .js, .css, .json, .md.
A precommit script is also set that will run prettier on staged files when
they are committed.
Gulp Tasks (gulpfile.js)
Note: <dest> is dist or docs depending on development or production
builds.
Images
$ gulp images
Optimizes images from src/img/ and copies them to <dest>/img/.
Misc
$ gulp misc
Copies manifest.json to <dest>/.
Content
$ gulp content
Copies index.html from src/ to <dest> and inlines <img> tags. If
building production files, it is also minified.
Scripts
$ gulp scripts
Javascript is written in ES6 and compiled with babel and
bundled with webpack. Javascript files are read from
src/js/ and bundled together to <dest>/js/bundle.js.
Styles
$ gulp styles
Uses various postcss processors to compile
the css (see the PostCSS section for details on the plugins used).
Builds two files to <dest>/css/: the stylesheet and a minified stylesheet.
Server
$ gulp server
Initiates a development server using Browsersync.
Browsersync will watch js/, css/, index.html at the <dest> directory and
reload or stream to the browser.
Watchers
$ gulp watchers
Watches for changes in the src/ directory and executes a build function if
something is changed.
Grouped tasks:
Assets
$ gulp assets
Runs the images and misc tasks in parallel.
Build
$ gulp build
Using the clean, assets, content, scripts, and styles tasks (in that
order) build creates the files needed for the site to work.
Start
$ gulp start
Runs the build task before running the watchers and server tasks. This
builds the files and also starts up the development server.
PostCSS
Additional Information
Functional CSS
- The Case for Atomic CSS (A great collection of links)
Frameworks/Tool-kits
Writings
- Challenging CSS Best Practices
- Css and Scalability by Adam Morse
- Full re-write in 10 days with tachyons and functional CSS: A case study
- Rationalizing Functional CSS