Client Libraries

Slick's client library stack is built using Gulp, RequireJS, and SCSS for styling. Both JS and CSS are then (mostly) split between author and publish areas of focus. What does this all look like?

dist

This folder is a combination of static assets and JS / CSS that gets compiled from src.

  • css - All CSS to power Slick. Broken out between author.css and publish.css
  • fonts - Slick uses the excellent and free font family, Lato.
  • img - All images to power Slick. This includes favicon.ico
  • js - author.js and publish.js
  • txt - Basically just robots.txt

libs

The libs folder contains all external dependencies. If a dependency is used throughout the site (handlebars, highlight.js, etc.), it's pulled in as a module using a RequireJS config path. If it's used as a one-off for a specific page, it's left as a global object. Each dependency is broken into JS and CSS when needed. This keeps the structure similar to the other client library folders.

  • css
    • colorpicker - Styles the color picker in settings.
    • highlight-github-gist - Used to style 
  • js
    • colorpicker - Color picker functionality
    • handlebars - All client-side templating (mostly used for messaging and comments)
    • highlight - Format pre > code blocks
    • require - AMD library
    • rome - The calendar widget when creating / editing posts
    • wysihtml-toolbar - The editing UI for posts / pages / etc.

src

The src folder is where Slick's JS and SCSS are stored. Any piece of custom functionality will be located here.

  • js
    • author - The folder containing all author JS modules.
    • author.js - Defines what modules to include for authoring.
    • config.js - Our RequireJS configuration.
    • publish - The folder containing all publish JS modules.
    • publish.js - Defines what modules to include for visitors of the site.
  • scss
    • _base.scss - Very base level styles for tags. Also contains misc. utilities.
    • _colors.scss - Our colors file. This has been mostly deprecated in favor of variables.
    • _grid.scss - Slick's custom grid system powered by flexbox.
    • _rome.scss - Our calendar widget styles.
    • _variables.scss - Colors, sizes, etc.
    • author.scss - All author styles.
    • publish.scss - All publish styles.

jsscsscssrequirejsamdfront-end