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

<header class="padding-top-xs text-center color-white background-primary">
  <div class="container">
    {% include logo.svg %}
    <h1 class="display-title" style="margin: 0.25em 0;">turretcss</h1>
    <p class="no-margin"><strong>v{{ site.current_version }}</strong></p>
  </div>
</header>

<main class="padding-vertical-xl color-white background-primary">
  <div class="container">
    <h2 class="hero-text">
      <span>Simple.</span>
      <span>Smart.</span>
      <span>Modern.</span>
    </h2>
    <p class="lead max-width-xs">Developed for design, turretcss is a styles and browser behaviour normalisation framework for rapid development of responsive and accessible websites.</p>
    <p class="margin-top-xs">
      <a class="button button-white button-border home-button" href="{{ site.baseurl }}/docs/getting-started/">Get Started</a>
      <a class="button button-white button-border home-button" href="{{ site.baseurl }}/docs/demo/">View Demo</a>
      <a class="button button-white button-border home-button" href="{{ site.repo }}">GitHub</a>
    </p>
    <h2 class="display-title margin-top-xl">Principles</h2>
    <p class="lead max-width-xs">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="box">
        {% include icon/simple.svg %}
        <h3>
          <span class="small-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="http://cssnext.io/">cssnext</a>.</p>
      </div>
      <div class="box">
        {% include icon/animated/responsive.svg %}
        <h3>
          <span class="small-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="box">
        {% include icon/predictable.svg %}
        <h3>
          <span class="small-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="box">
        {% include icon/animated/usable.svg %}
        <h3>
          <span class="small-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="box">
        {% include icon/customisable.svg %}
        <h3>
          <span class="small-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="box">
        {% include icon/extendable.svg %}
        <h3>
          <span class="small-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="box">
        {% include icon/fast.svg %}
        <h3>
          <span class="small-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="box">
        {% include icon/accessible.svg %}
        <h3>
          <span class="small-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="box">
        {% include icon/animated/scalable.svg %}
        <h3>
          <span class="small-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>