Build Powerful FrontEnd Workflows with PostCSS · Build Powerful FrontEnd Workflows with PostCSS...

Build Powerful FrontEnd Workflows with PostCSS

Guide to writing/generating cutting edge CSS

Key TakeAways

PostCSS - Deep Diveplugins you can usecustom plugins

WorkflowEssential ConceptsPlugins to help with tasks

Drupal ThemeStarter Template

Introduction AdvancedEssential

Introductionwhat - why - how

What is it? Microservice ArchitectureSingle Responsibility PrincipleInstallationGulp Script

Philosopher’s Stone

Alchemy

What is PostCSS?

Transformer!

A Workflow Tool - (post/pre)processor

Language Extender

CSS Wayback/Time Machine

Collection of API &Micro Services

architecture

Architecture

What does PostCSS do?

Parses CSSCreates Node Tree

Provides APIs for processorsPipes between processors

Plugin Design Principle

Single Responsibility PrincipleDo one thing and do well

Node ModulesWritten in JS

You have a plugin for that! PostCSS.parts

200+

Why roll yours in PostCSS?

Choice - freedom to choose

Usage - tailor to your workflow

Modular/ lightweight hence faster

Limitations of pre-processors

@extend across media queries

Automatically fix errors

Feature Requests and how it is handled

Installation and First Task

Required Tools

Node.js

NPM - Dependency Management System

Gulp/Grunt - The task runner

Workflow Anatomy

Installation

Install Node

Gulp Task

Essential PostCSS

Build custom workflow

Requirements of a Workflow?AutoprefixerLintingfutureCSSQuantity QueriesContainer QueriesCSS ModulesPacks

Workflow Goals

ENVIRONMENT

Mechanical Rules EnforcementDebugLintingEasy SetUp

CODE HELPERS

Future ProofingFallback SupportLanguage ExtensionsShortcutsUtilities

Toolchain

ENVIRONMENT

Mechanical Rules Enforcement - stylelintDebug - sourcemapsLinting - stylelintEasy SetUp - npmI/O - import/cssnano

CODE HELPERS

Fallback Support - oldieFuture Proofing - cssnextLanguage Extensions precssShortcuts - shortUtilities - lot

ENVIRONMENT

Importer - postcss-importBefore

PostCSS - CSS

Linters - Stylelint

StyleLintMechanical Rules EnforcementOver 100 RulesChoose the ones you want

Linters - Stylelint

PackerscssnanoDoes minify and some errors.

postcss-css-mqpackerConcats all styles of same media query.

postcss-cachebusterBusts assets cache using url params.

postcss-data-packerembedded base64 to separate file.

Source Maps

Style Guides

postcss-style-guide, psg-theme-default

Provides KSS Style Living GuidesUses Annotation to generate HTML

Style Guides

CODE HELPERS

Future CSS

Future CSSpostcss-custom-mediapostcss-custom-propertiespostcss-extendpostcss-initialpostcss-media-minmaxcq-prolyfill

PostCSS Extend

example from plugin page

Container Queries

cq-prolyfill

Quantity Queries

postcss-quantity-queries

:at-least(count):at-most(count):between(start,end):exactly(count)

CSS Modules

postcss-initial

{all:initial}

CODE HELPERS

Language Extenders

Pre/post compiler

PRE COMPILER

write code in scss/less/stylus, gets converted into css.

precss

POST COMPILER

write CSS Code, gets converted into CSS.

cssnext

Pre/post compiler

PRE COMPILER

mixins needs to be learned, their APIs

provides sass like mixins, functions etc.

POST COMPILER

plain CSS, which is parsed by Autoprefixers

uses W3C css Variables

CODE HELPERS

Utility Plugins

Utility Plugins

autoprefixerpxtorempostcss-sortingperfectionistpostcss-font-packpostcss-fontpath

Utility Plugins - AutoPrefixer

refers caniuse.com to generatedoes not generate for border-radius etc…http://autoprefixer.github.io/

Utility Plugins - pxtorem

Packs

Curated plugins

Takes care of interplay

Does heavy lifting

Packscssnano - packer, optimizer for productionrucksack - new features and shortcutsshort - shorthand propertiesprecss - language extendercssnext - language extender (W3C)

https://github.com/timaschew/postcss-compare-packs

AdvancedBeyond the Basics

Write your own pluginCSS ArchitectureBEM / SMACSS OrganizationPutting it all together

PostCSS Boilerplatepostcss-plugin-boilerplate

Wizard to help creationClean git historyWrite index.js and test.jsDocument

Examine a plugin

Anatomy of a Plugin

this is postcss-currency plugin

CSS Architecture

Architecture Challenges

AbstractionMaintainabilityChange Management

DebuggingDocumentation

SMACSSCategorizing / Organizing CSS Rules

Base - base level CSSLayout - layout based classes (l-)Module - reusable modules State - state of an item is-activeTheme - related to colors

Reduced dependency on structureThinking in Components

Block Element ModifierRules to Name selectors

Theming Process

Component Inventory - pptComponent Library - code

Layout Pages Composition of Components

Oddball ComponentsContext based alignment/changes

End To End Workflow

CLASSY THEMEConfigure with postCSSFolder StructuresPlugins

Code OrganizationDebugging - source mapsLinting

DEMO & CODE WALKTHROUGH

SummaryWhat is PostCSSArchitectureWhy PostCSSHow To start coding in PostCSS

Workflow GoalsPostCSS Tools that supportUseful Plugins

Write PluginSMACSS/BEMAll together

Appendix - UseFul LinksPostCSS Page

Plugins ListPostCSS.parts

cssnextprecss

compare css packs

BEMSMACSS