Embed Size (px)
Citation preview
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
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
