turretcss

Usage


Selectors

Where styles are applied on HTML elements with classes, the structuring of classes is element, modifier, style.

<element class="[element] [element-modifier] [element-style]">...</element>

For example the .button class can extended to button button-block button-primary

<button class="button button-border button-primary">...</button>

Normalize

For improved cross-browser rendering, turretcss includes Normalize.css, a project by Nicolas Gallagher and Jonathan Neal.

Sizes

turretcss uses a generic language for size scale. The scale ranges from xxs to xxl (xxs, xs, s, m, l, xl, xxl) and is applicable for both responsive breakpoints, and the HTML elements themselves.

Device Sizes

Responsive breakpoints are configurable via setting @custom-media queries, by default these are configured to the following pixel sizes:

Breakpoint Min Width Max Width
xxs - - 20rem 320px
xs 20rem 320px 40rem 640rem
s 40rem 640rem 60rem 960px
m 60rem 960px 80rem 1280px
l 80rem 1280px 100rem 1600px
xl 100rem 1600px 120rem 1920px
xxl 120rem 1920px - -

Element Sizes

Each interactive element - such as <input>, <select>, <button>, etc. - have sizes that can be applied with optional classes, for example .button-s.

The height of these elements is set by global height variables.

Element sizes examples:

States

Any element that has states - hover, focus, active, selected etc. - has default options that can be set these include: color, background, border-color, and shadow. These states inherit styles (box-shadow) that are configured globally as well as specific state styles that can be configures per element, and style.

Indicators

Each interactive element - such as <input>, <select>, <button>, etc. - have indicator styles that are applied with global classes:

Class Description
.error Applies error color styles to element
.warning Applies warning color styles to element
.success Applies success color styles to element
.info Applies info color styles to element

Element indicators examples:

Structure

The turretcss source code download includes the precompiled CSS, along with source CSS, and documentation.

The source file structure is as follows:

turret/
  └ dist/
    └ turret.min.css
  └ docs/
  └ turret/

The turret directory contains the source code CSS. The dist directory includes precompiled CSS. The docs directory includes the source code for our documentation. Any other included file provides support for packages, license information, and development.

Build Tools

PostCSS

turretcss makes use of PostCSS and postcss-preset-env to compile modern CSS into browser compatible CSS. Each element of turretcss is inlcuded in individual CSS files that include variables set at the root scope. To use turretcss with PostCSS in your project you will need to import turretcss/turret/turret.css to include styles for all elements.

postcss-preset-env

To use turretcss with postcss-preset-env in your project you will need to import turret.css to include styles for all elements.

Autoprefixer

turretcss uses Autoprefixer as part of postcss-preset-env to automatically add vendor prefixes to some CSS properties at build time.

Styling

To theme turretcss you can override default style variables either within your own project styles or included as variables.css to @import in your styles.

@import "turretcss/turret/turret.css";

/* Override Primary Color */
:root {
  --primary: red;
}

Documentation

View full documentation at: https://turretcss.com/

turretcss’s documentation, included in this repo in the docs directory, is built with Jekyll and publicly hosted on GitHub Pages at https://turretcss.com. The docs may also be run locally.

Tooling

To use and run the documentation locally, you’ll need a copy of turretcss’s source files, and Node. To install the required tools follow these steps:

  1. Download and install Node, which we use to manage our dependencies.
  2. Navigate to the root /turret directory and run npm install to install our local dependencies listed in package.json.
  3. Install Ruby, install Bundler with gem install bundler, and finally run bundle install. This will install all Ruby dependencies, such as Jekyll and plugins.

When completed, you’ll be able to run the various scripts provided from the command line.

Scripts

turretcss includes the following commands and tasks:

Task Description
start Run npm run watch
watch Run npm run watch:turret & npm run watch:docs
watch:turret Watches changes to the /turret directory and builds turret CSS npm run compile:turret -- --verbose --watch
watch:docs Watches changes to the /docs directory and builds docs CSS npm run compile:docs -- --verbose --watch
compile:turret Builds turret CSS using PostCSS, postcss-preset-env, and CSSNano with config in postcss.config.js
compile:docs Builds docs CSS using PostCSS, postcss-preset-env, and CSSNano with config in postcss.config.js
format Run npm run format:css & npm run format:md
format:css Prettier CSS files prettier --single-quote --print-width 180 --write '*.css'
format:md Prettier Markdown files prettier --print-width 180 --write '*.md'

Running documentation locally

  1. Install Install Ruby, install Bundler with gem install bundler.
  2. Install Jekyll (the site builder) and other Ruby dependencies with bundle install. This will install all Ruby dependencies, such as Jekyll and plugins.
  3. Run npm start or yarn start to rebuild CSS.
  4. From the /docs directory, run bundle exec jekyll serve in the command line.
  5. Open https://0.0.0.0:2001 in your browser.

Learn more about using Jekyll by reading its documentation.