<%- include('../_common/_head', {
  key: 'docs',
  pagetitle: 'Introduction | Document'
}) %>

<%- include('../_component/docs/_header') %>

<%- include('../_component/docs/_menu') %>

<div class="uc-grid _small-col-full _nowrap">

<%- include('../_component/docs/_sidebar', {
  current: 'index'
}) %>

  <div class="uc-grid-cell _col-fit">

  <%- include('../_component/docs/_hero', {
    title: 'Welcome to UNITS'
  }) %>

  <main class="uc-content">
    <section class="uc-section">

      <h2 class="uc-section-title">Introduction</h2>
      <p>UNITS is a simple and beautiful component set. <br>All you have to do is just load css files, copy and paste snippets, so easy that anyone can use.</p>

      <div class="uc-card-unit">
        <div class="uc-grid _col-3 _small-col-full _medium-col-2 _gutter">
          <div class="uc-grid-cell">
            <div class="uc-card">
              <h3 class="uc-card-title">Use Quickly</h3>
              <p>All you have to do is just put units.css. Several components have been prepared already and you can choose components you want to use and apply it on your website.</p>
            </div>
          </div>
          <div class="uc-grid-cell">
            <div class="uc-card">
              <h3 class="uc-card-title">Simple and Beautiful</h3>
              <p>Each components are beautifully designed. The design will be updated periodically, We wont't apply big changes, but apply only a small changes such as adjusting margins.</p>
            </div>
          </div>
          <div class="uc-grid-cell">
            <div class="uc-card">
              <h3 class="uc-card-title">Support Modern Browser</h3>
              <p>UNITS is optimized to be used on th modern browser such as Microsoft Edge, Google Chrome, Firefox, Safari, How about old browsers? ... I'm sorry.</p>
            </div>
          </div>
          <div class="uc-grid-cell">
            <div class="uc-card">
              <h3 class="uc-card-title">Responsive Web design</h3>
              <p>We uses responsive web design approches to display optimized design on all devices.</p>
            </div>
          </div>
          <div class="uc-grid-cell">
            <div class="uc-card">
              <h3 class="uc-card-title">Periodical Update</h3>
              <p>UNITS is still a beta version, it will be updated periodically to a major version. Unitil the major version, We will add new components, optimize the source codes, adjusting its design.</p>
            </div>
          </div>
          <div class="uc-grid-cell">
            <div class="uc-card">
              <h3 class="uc-card-title">Support Japanese</h3>
              <p>Because the developers are Japanese that we can support in Japanese. We have been optimizing web pages and updating documents written in japanese.</p>
            </div>
          </div>
        </div>
      </div>

    </section>

    <div class="uc-pager-unit">
      <div class="uc-btn _primary"><a href="./install.html">Install →</a></div>
    </div>
  </main>

  </div>

</div>

<%- include('../_component/_footer') %>

<%- include('../_common/_foot') %>
