---
layout: page
title: Turret - A Responsive Front-end Framework for Accessible and Semantic Websites
---

<header class="landing-hero landing-hero-primary">
  <div class="container">
    <svg class="landing-hero-icon" xmlns="http://www.w3.org/2000/svg" width="44" height="64" viewBox="0 0 44 64">
      <path fill="#FFFFFF" d="M36.7 52l-3.1-28.1 8.4-6v-17.9h-8v7h-6v-7h-12v7h-6v-7h-8v17.9l8.4 6-3.1 28.1h-7.3v12h44v-12z"/>
    </svg>
    <h1>Turret</h1>
    <p><strong>v3.1.5</strong></p>
    <a class="button button-large landing-button landing-button-primary" href="/docs/getting-started/">Documentation</a>
    <a class="button button-large landing-button landing-button-primary" href="https://github.com/bigfishtv/turret">GitHub</a>
  </div>
</header>

<section class="landing-section">
  <div class="container text-center">
    <h2>What is Turret?</h2>
    <p class="lead">Turret is a styles and browser behaviour normalisation framework for rapid development of responsive and accessible websites.</p>
    <a class="button button-large button-primary" href="/docs/getting-started/">Get started</a>
  </div>
</section>

<section class="landing-section">
  <div class="container">
    <div class="cards">
      <article class="card">
        <figure class="media media-4-3">
          <img src="assets/images/responsive.svg" alt="">
        </figure>
        <div class="card-content">  
          <h3>Responsive</h3>
          <p>Developed for mobile first responsive web design with an intuitive grid system and responsive utilities.</p>
        </div>
      </article>
      <article class="card">
        <figure class="media media-4-3">
          <img src="assets/images/design.svg" alt="">
        </figure>
        <div class="card-content">  
          <h3>Developed for Design</h3>
          <p>Focused on a customisable base of typography, font definitions, color and indicators palettes for simple and stylish web user interfaces.</p>
      </div>
      </article>
      <article class="card">
        <figure class="media media-4-3">
          <img src="assets/images/styles.svg" alt="">
        </figure>
        <div class="card-content">  
          <h3>Simply Styles</h3>
          <p>Style native web elements. That's it, no javascript, no custom markup, just semantic HTML5 elements.</p>
      </div>
      </article>
      <article class="card">
        <figure class="media media-4-3">
          <img src="assets/images/semantic.svg" alt="">
        </figure>
        <div class="card-content">  
          <h3>Stylishly Semantic</h3>
          <p>Semantic HTML5 markup that is modular, maintainable, and responsive without the headache.</p>
      </div>
      </article>
    </div>
  </div>
</section>

<!-- <section class="landing-hero landing-hero-secondary">
  <div class="container">
    <h2>Start making responsive &amp; accessible websites</h2>
    <a class="button button-large landing-button landing-button-secondary" href="/docs/getting-started/">Get started</a>
  </div>
</section>
 -->