On Functional CSS

Recreating a Medium style article/blog post using Tachyons, the css toolkit.

CURRENT BUILD https://klazich.github.io/on-functional-css/

• Introduction
  • Background
  • What is Functional CSS?
  • Code Louisville FEWD Project Requirements
• Development
  • Requirements
  • Clone & Install
  • Building The Webpage
  • NPM scripts
    • Start developing
    • Build production files
    • Push build to GitHub Pages
    • Make the code look nice
  • Gulp Tasks: images, misc, content, scripts, styles, server, watchers, assets, build, start
  • PostCSS
• Additional Information
  • Functional CSS
    • Frameworks/Tool-kits
    • Writings
  • Postcss Resources
  • Gulp/Webpack

...

When considering what to create for a Code Louisville front-end project, my first idea was to make something about cats. But, I decided to go with my second idea: create something informative about front-end development. As a topic I wanted to share Functional CSS. But I suck at writing and after coming across this issue, I decided I would show rather than tell.

For my project I recreated a Medium like blog post using the amazing Tachyons css toolkit. The article is "Css and Scalability" written by Adam Morse (the creator of Tachyons himself!) in 2016. It was his article that first introduced me to Functional/Atomic CSS. With Tachyons, I actually get to spend more time designing, than figuring out how to design.

Examples of the layout and style I want to recreate:

• Making new friends
• Understanding React “Suspense”

The content I will use for the blog post:

• Css and Scalability by Adam Morse

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.

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"

Follow this link to the wiki

• Node JS 9.5.0 or later

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

Then install packages with npm or yarn...

$ yarn
$ npm install

The website is built from the source directory: src/, where the code is written. With the NODE_ENV environment variable set to development, files will be built to the dist/ directory. With NODE_ENV=production files will be built to the docs/ directory (GitHub Pages requires a docs directory to build from). Different packages or options to packages are used depending on how NODE_ENV is set. If NODE_ENV is not set it will run in development by default.

I like to use yarn for package management but npm will also work.

The "start" and "build" scripts simply run the start and build Gulp tasks but sets the NODE_ENV environment variable before hand.

$ 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.

$ yarn run build

Sets the NODE_ENV environment variable to production with cross-env.

Builds the production ready files to docs.

$ 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.

$ 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.

Note: <dest> is dist or docs depending on development or production builds.

$ gulp images

Optimizes images from src/img/ and copies them to <dest>/img/.

$ gulp misc

Copies manifest.json to <dest>/.

$ gulp content

Copies index.html from src/ to <dest> and inlines <img> tags. If building production files, it is also minified.

$ 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.

$ 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.

$ 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.

$ gulp watchers

Watches for changes in the src/ directory and executes a build function if something is changed.

$ gulp assets

Runs the images and misc tasks in parallel.

$ gulp build

Using the clean, assets, content, scripts, and styles tasks (in that order) build creates the files needed for the site to work.

$ gulp start

Runs the build task before running the watchers and server tasks. This builds the files and also starts up the development server.

• The Case for Atomic CSS (A great collection of links)

• Tachyons (GitHub)
• Basscss (GitHub)
• Solid CSS (GitHub)
• Tailwind CSS (GitHub)
• Atomic CSS (GitHub)

• 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