index.html

---
layout: default
title: Trowel - The most evolved way to write scss code
affix: false
---
<main id="home">
  <header id="home__header" class="skew-section">
    <div class="skew-section__bg"></div>

    <div class="skew-section__content">
      {% include header.html %}

      <div class="home__container">
        <h1 id="home__heading">The tool that redesigns CSS frameworks</h1>

        <p id="home__intro">
          Trowel is a <i>Sass</i> toolkit that allows you to create and use CSS frameworks with the most flexible pattern ever designed.
        </p>

        {% include abandon.html %}

        <p id="home__intro-buttons">
          <a href="{{ '/documentation/get-started' | prepend: site.baseurl }}" class="btn btn--lg btn--danger">Get started</a>
          <a href="https://github.com/trowel" class="btn btn--lg" id="home__intro-github" target="_blank">Checkout on github</a>
        </p>
      </div>
    </div>
  </header>

  <section id="home__illustrations">
    <img id="home__illustrations-arturo" src="/assets/images/arturo/arturo.png" height="200">
    {% include home/header-snippet.html %}
  </section>

  <section id="home__showcase" class="skew-section">
    <div class="skew-section__bg"></div>

    <div class="skew-section__content / home__container">
      <div id="home__showcase-container">
        <h2>Discover the power of the Trowel Variables</h2>
        <p>
          The key feature of Trowel is its variables. The Trowel variables allow you to define several values depending of criteria like a pseudo-class, a modifier class, a responsive breakpoint, etc.
          This pattern allows the user to totally control the CSS output, by generating only the style required. CSS frameworks will no more be big boats, they will just fit for you website.
        </p>
      </div>

      {% include home/showcase-snippet.html %}
    </div>
  </section>

  <section id="home__friends" class="skew-section">
    <div class="skew-section__bg"></div>

    <div class="skew-section__content">
      <div class="home__container">
        <div id="home__friends-pres">
          <h2>Friends of Trowel <span>the official list of Trowel Components</span></h2>

          <p>
            Friends of Trowel is a github organization that gathers all the Trowel Components created and maintained by the Trowel core team.
            <br>
            You will find every basic component that composes a CSS framework, but with a lot of Trowel variables allowing you to customize the style like never designed before.
          </p>

          <p>
            <a href="{{ '/documentation' | prepend: site.baseurl }}" class="btn btn--primary">See the documentation</a>
            <a href="https://github.com/FriendsOfTrowel" class="btn btn--danger">Checkout on github</a>
          </p>
        </div>
      </div>
    </div>
  </section>
</main>