turretcss

Getting Started

A introduction to how to get started, download and use turretcss.

Introduction

turretcss makes creating responsive, accessible, mobile-first web interfaces simple. turretcss provides a robust CSS foundation of HTML typography, forms, and elements that are easy to customise and style.

Contents

Quick start

CDN

Include the stylesheet <link> into your <head>.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bigfishtv-turret/4.0.0/turret.min.css" crossorigin="anonymous">

Template

turretcss makes use of HTML5 elements and CSS properties that require the use of the HTML5 doctype. To ensure proper rendering and touch zooming, add the viewport meta tag to your <head>.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <!-- Page Title -->
    <title>turretcss</title>
    
    <!-- turretcss CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bigfishtv-turret/4.0.0/turret.min.css" crossorigin="anonymous">
  </head>
  <body>
    ...
  </body>
</html>

Boilerplate

The turretcss-boilerplate is a basic boilerplate using turretcss, PostCSS, PostCSS CLI, cssnext, and CSSNano.

Download from GitHub View GitHub Repo

Download

Download

Download the turretcss repo to include ready-to-use CSS code to easily drop into your project. Includes compiled and minified versions of the turretcss CSS.

Download from GitHub

GitHub

Clone the repo from GitHub download the source CSS, and documentation files.

git clone https://github.com/turretcss/turretcss.git

npm

Install turretcss for your Node powered apps with the npm package:

npm install turretcss

yarn

Install turretcss with yarn:

yarn add 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 xs to xl (xs, s, m, l, xl) 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 Device Min Width Max Width
xs Phone None 767px
s Tablet 768px 1023px
m Laptop 1024px 1279px
l Desktop 1280px 1679px
xl Large Screen 1680px None

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 cssnext 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.

cssnext

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

Autoprefixer

turretcss uses Autoprefixer as part of cssnext 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: http://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
npm start Run npm run watch
npm run watch Watches changes to the /docs directory and builds docs CSS
npm run build Compile and minify the turretcss CSS into /dist. Uses PostCSS, cssnext, and CSSNano.
npm run docs Compile and minify the Docs CSS into /dist. Uses PostCSS, cssnext, and CSSNano.

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 root /turret directory, run bundle exec jekyll serve in the command line.
  5. Open http://0.0.0.0:2001 in your browser.

Learn more about using Jekyll by reading its documentation.

Support

Browsers

Chrome Firefox Internet Explorer Opera Safari
Android Supported Supported N/A Not supported N/A
iOS Supported Supported Not supported Supported
Mac OS X Supported Supported Supported Supported
Windows Supported Supported Supported (IE10+) Supported Not supported

Android Default Browser

The Default Android Browser is not supported. Android 4.4+ does not ship with a default Browser. (note: Chrome on Android is fully supported)

IE Compatibility modes

turretcss is not supported in the old Internet Explorer compatibility modes. To be sure you’re using the latest rendering mode for IE, consider including the appropriate <meta> tag in your pages:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

The meta tag tells the IE rendering engine it should use the latest, or edge, version of the IE rendering environment

CSS

Some CSS properties and HTML5 attributes and elements are not fully supported by Internet Explorer 8 and 9.

Feature IE8 IE9 IE10
border-radius Not supported Supported Supported
box-shadow Not supported Supported Supported
transform Not supported 2D transforms supported, with -ms prefix Supported
transition Not supported Not supported Supported
placeholder Not supported Not supported Supported
flexbox Not supported Not supported Partially supported, with -ms prefix

Visit Can I Use for details on browser support of CSS and HTML features.

Accessibility

Screen Reader

Use the screen-reader class to display content only for screen readers, based from the A11y Project post: How-to: Hide Content

<div class="screen-reader">...</div>

Screen Reader Focusable

In conjunction with the screen-reader class, the screen-reader-focusable class can be added to only display content when it’s focused. Useful for “Skip to main content” links.

<div class="screen-reader screen-reader-focusable">...</div>

ARIA Roles

Role Description Analogous To
application A region declared as a web application, as opposed to a web document.  
article A section of a page that consists of a composition that forms an independent part of a document, page, or site. <article>
banner A region that contains mostly site-oriented content, rather than page-specific content. <header>,
<div id="header">
complementary A supporting section of the document, designed to be complementary to the main content at a similar level in the DOM hierarchy, but remains meaningful when separated from the main content. <aside>
contentinfo A large perceivable region that contains information about the parent document.  
directory A list of references to members of a group, such as a static table of contents.  
document A region containing related information that is declared as document content, as opposed to a web application. <body>
form A landmark region that contains a collection of items and objects that, as a whole, combine to create a form. See related search <form>
log A type of live region where new information is added in meaningful order and old information may disappear. See related marquee. Note: Elements with the role log have an implicit aria-live value of polite.  
main The main content of a document. <div id="content">
navigation A collection of navigational elements (usually links) for navigating the document or related documents. <nav>
note A section whose content is parenthetic or ancillary to the main content of the resource.  
region A large perceivable section of a web page or document, that the author feels is important enough to be included in a page summary or table of contents, for example, an area of the page containing live sporting event statistics. <div>, <frame>, <section>
search A landmark region that contains a collection of items and objects that, as a whole, combine to create a search facility. See related form.  
status A container whose content is advisory information for the user but is not important enough to justify an alert, often but not necessarily presented as a status bar. See related alert. Note: Elements with the role status have an implicit aria-live value of polite. <output>

Contributors

Scott de Jonge

Twitter: @scottdejonge Github: @scottdejonge

Licence

Code License

Applies to code inside the turret directory.

Code licensed under MIT License

Documentation License

Applies to files inside the docs excluding files located in the lib directory.

Documentation licensed under CC BY 3.0

License Notes

turretcss is released under the MIT license and is copyright 2017 bigfish.tv. Boiled down to smaller chunks, it can be described with the following conditions.

It requires you to:

  • Include the license and copyright notice in your works

It permits you to:

  • Freely download and use turretcss, in whole or in part, for personal, private, company internal, or commercial purposes
  • Use turretcss in packages or distributions that you create
  • Modify the source code
  • Grant a sublicense to modify and distribute turretcss to third parties not included in the license

It forbids you to:

  • Hold the authors and license owners liable for damages as turretcss is provided without warranty
  • Hold the creators or copyright holders of turretcss liable
  • Redistribute any piece of turretcss without proper attribution
  • Use any marks owned by bigfish.tv in any way that might state or imply that bigfish.tv endorses your distribution
  • Use any marks owned by bigfish.tv in any way that might state or imply that you created the bigfish.tv software in question

It does not require you to:

  • Include the source of turretcss itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it
  • Submit changes that you make to turretcss back to the turretcss project (though such feedback is encouraged)

The full turretcss license is located in the project repository for more information.