<%- include('_common/_head', {
  key: 'index',
}) %>

<%- include('_component/index/_header') %>

<%- include('_component/index/_menu') %>

<%- include('_component/index/_hero', {
  title: 'Simple and beautiful components.',
  text: 'UNITS v'+ pkg.version +' / Early access edition'
}) %>

<main class="uc-content">

  <section class="uc-section _center">
    <h2 class="uc-section-title">Features</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 _gutter _col-3 _small-col-full">
        <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 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>
    <div class="uc-btn-unit">
      <div class="uc-btn _primary"><a href="/docs/" target="_blank">Learn more</a></div>
    </div>
  </section>

  <section class="uc-section _dark _center">
    <div class="uc-section-inner">
      <h2 class="uc-section-title">Quick Start</h2>
      <div class="uc-code-unit">
        <p>Just embed the following code inside the &lt;head&gt; tag and you can start using it immediately :</p>
        <pre class="uc-code"><code>&lt;link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet"&gt;
&lt;link rel="stylesheet" href="https://unpkg.com/unitscss@latest/dist/units.min.css"&gt;

&lt;script src="https://unpkg.com/unitscss@latest/dist/units.min.js"&gt;&lt;/script&gt;
</code></pre>
      </div>
    </div>
  </section>

  <section class="uc-section _gray _center">
    <div class="uc-section-inner">
      <h2 class="uc-section-title">Usage</h2>
      <p>UNITS can be installed easily, it is possible to start using immediately!</p>
      <div class="uc-code-unit">
        <p>1. UNITS itself can be downloaded from GitHub by cloning it or as a ZIP format, or you can download it via npm.</p>
        <pre><code class="bash">$ git clone https://github.com/kokushin/unitscss.git</code></pre>
        <pre><code class="bash">$ npm install unitscss --save</code></pre>
      </div>
      <div class="uc-code-unit">
        <p>2. Let's load the necessary files.</p>
<pre><code>&lt;link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet"&gt;
&lt;link rel="stylesheet" href="path/to/units.min.css"&gt;

&lt;script src="path/to/units.min.js"&gt;&lt;/script&gt;
</code></pre>
      </div>
      <div class="uc-code-unit">
        <p>3. Complete the defined HTML and give the component class starting with <code>uc-</code>. For example, in the sample below you can apply the cover image card component.</p>
<pre><code>&lt;div class="uc-card _float"&gt;
  &lt;div class="uc-card-image" style="background-image:url(https://source.unsplash.com/random)"&gt;&lt;/div&gt;
  &lt;h3 class="uc-card-title"&gt;Sample card&lt;/h3&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, et.&lt;/p&gt;
  &lt;div class="uc-btn _primary"&gt;&lt;a href="#"&gt;Button&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>
      </div>
      <div class="uc-code-unit">
        <p>4. It will be displayed on the browser like this:</p>
        <div class="uc-card _float" style="margin-left:auto;margin-right:auto">
          <div class="uc-card-image" style="background-image:url(https://source.unsplash.com/random)"></div>
          <h3 class="uc-card-title">Sample card</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, et.</p>
          <div class="uc-btn _primary"><a href="#">Button</a></div>
        </div>
      </div>
    </div>
  </section>

  <section class="uc-section _center">
    <h2 class="uc-section-title">Next update</h2>
    <p>UNITS is still in beta.<br>
Adding new components, optimizing source code, and redesigning the design are done on a regular basis.<br>
Please send us your opinions and requests!</p>
    <div class="uc-list-unit _border uc-section-inner">
      <ul class="uc-list">
        <li>Add JavaScript that can be used in various scenes.</li>
        <li>Increase variations of available units.</li>
        <li>It corresponds to combination pattern of more units.</li>
        <li>Refactor the code.</li>
      </ul>
    </div>
    <div class="uc-btn-unit">
      <div class="uc-btn _primary"><a href="https://github.com/kokushin/units" target="_blank">Follow <span style="text-transform:initial">GitHub</span></a></div>
    </div>
  </section>

</main>

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

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