---
layout: page
page_title: turretcss - A Responsive Front-end Framework for Accessible and Semantic Websites
---

<header class="padding-top-xs text-align-center color-white background-primary">
  <div class="container">
    {% include logo.svg %}
    <h1 class="all-caps all-caps-xl">turretcss</h1>
    <p class="no-margin font-size-s"><strong>v{{ site.current_version }}</strong></p>
  </div>
</header>

<main class="padding-vertical-xxl color-white background-primary">
  <div class="container">
    <h2 class="display-title display-title-xxl line-height-xxs">
      Simple.<br>
      Smart.<br>
      Modern.
    </h2>
    <p class="lead max-width-m">Developed for design, turretcss is a styles and browser behaviour normalisation framework for rapid development of responsive and accessible websites.</p>

    <nav class="group margin-top-xs">
      <ul>
        <li>
          <a class="button button-white button-border" href="{{ site.baseurl }}/getting-started/">Get Started</a>
        </li>
        <li>
          <a class="button button-white button-border" href="{{ site.baseurl }}/demo/">View Demo</a>
        </li>
        <li>
          <a class="button button-white button-border" href="{{ site.repo }}">GitHub</a>
        </li>
      </ul>
    </nav>

    <h2 class="display-title margin-top-xxl">Principles</h2>
    <p class="lead max-width-m">Designed for speed turretcss is designed to make responsive, accessible, and scalable CSS development simple, and predictable.</p>
    <div class="boxes margin-top-m">
      <div class="padding-m border-radius border border-color-current-color">
        {% include icon/simple.svg %}
        <h3>
          <span class="all-caps">Simple.</span>
          <span class="display-block">No Javascript. Just clean, simple, and modern CSS.</span>
        </h3>
        <p>Write clean, simple, and modern HTML & CSS with intuitive size and style utilities with <a href="http://postcss.org/">PostCSS</a> and <a href="https://preset-env.cssdb.org/">postcss-preset-env</a>.</p>
      </div>
      <div class="padding-m border-radius border border-color-current-color">
        {% include icon/animated/responsive.svg %}
        <h3>
          <span class="all-caps">Responsive.</span>
          <span class="display-block">Mobile-first, touch designed responsive architecture.</span>
        </h3>
        <p>Mobile-first block element styles and full viewport breakpoint coverage makes complex responsive web interface development simple.</p>
      </div>
      <div class="padding-m border-radius border border-color-current-color">
        {% include icon/predictable.svg %}
        <h3>
          <span class="all-caps">Predictable.</span>
          <span class="display-block">Low specificity. Shallow cascade. Predictable styles.</span>
        </h3>
        <p>Low specificity and intuitive style inheritance lets you utilise the cascade to style components with consistent options.</p>
      </div>
      <div class="padding-m border-radius border border-color-current-color">
        {% include icon/animated/usable.svg %}
        <h3>
          <span class="all-caps">Usable.</span>
          <span class="display-block">Designed for every human hand on any type of screen.</span>
        </h3>
        <p>Usability is at the core with large tap targets for buttons and link, clear indicator palettes for error handling, and a focus on semantic HTML development.</p>
      </div>
      <div class="padding-m border-radius border border-color-current-color">
        {% include icon/customisable.svg %}
        <h3>
          <span class="all-caps">Customisable.</span>
          <span class="display-block">Easily editable for branded styles for any project.</span>
        </h3>
        <p>Easily customise styles with a few simple theme variables, or fully customise the look of elements with full control over visual variables.</p>
      </div>
      <div class="padding-m border-radius border border-color-current-color">
        {% include icon/extendable.svg %}
        <h3>
          <span class="all-caps">Extendable.</span>
          <span class="display-block">No grid. No layout opinions. No worries.</span>
        </h3>
        <p>Build custom layouts and interfaces with a solid foundation of typography choices, color options, input types, and full suite of default HTML elements.</p>
      </div>
      <div class="padding-m border-radius border border-color-current-color">
        {% include icon/fast.svg %}
        <h3>
          <span class="all-caps">Fast.</span>
          <span class="display-block">Develop CSS quicky. Ship lightweight performant styles.</span>
        </h3>
        <p>Rapidly develop responsive, performant, and visually custom web interface with minimal property configuration.</p>
      </div>
      <div class="padding-m border-radius border border-color-current-color">
        {% include icon/accessible.svg %}
        <h3>
          <span class="all-caps">Accessible.</span>
          <span class="display-block">Semantic HTML elements, simple CSS styles.</span>
        </h3>
        <p>Use the full range of semantic HTML elements with accessible color combinations, and screen reader utility classes to create accessible web interfaces.</p>
      </div>
      <div class="padding-m border-radius border border-color-current-color">
        {% include icon/animated/scalable.svg %}
        <h3>
          <span class="all-caps">Scalable.</span>
          <span class="display-block">Smart viewport scaling variables.</span>
        </h3>
        <p>Scale elements larger or smaller with flexible viewport-based calculated variable values. Scale on the fly with consistent size scales for HTML elements and viewports.</p>
      </div>
    </div>
  </div>
</main>