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
...
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.
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
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 installThe 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:
-
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). -
...html inline images
-
...javascript webpack babel
-
...css postcss
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.
$ 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)