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:

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 size of these elements is set by global height variables.

Element sizes examples:

• Input Sizes
• Input Group Sizes
• Control Sizes
• Select Sizes
• Range Sizes
• Progress Sizes
• Button Sizes

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 configured per element, and style.

Indicators

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

Element indicators examples:

• Input Indicators
• Control Indicators
• Select Indicators
• Range Indicators
• Progress Indicators
• Button Indicators

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.

• Windows users: Read this unofficial guide to get Jekyll up and running without problems.

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

Scripts

turretcss includes the following commands and tasks:

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.