index.html

---
title: Home
layout: home
route: home
---

<section class="section">
  <div class="container content">
    <h1>Getting Started</h1>
    <p>The easiest way to start using a theme is using CDN:</p>
{% highlight html %}<link rel="stylesheet" href="https://unpkg.com/bulmaswatch/default/bulmaswatch.min.css">{% endhighlight %}
<p>Simply replace <code>default</code> with the theme name like <code>flatly</code>.</p>
<p>For more advance usage check the <a href="{{ site.baseurl }}/help">help</a> page.</p>
  </div>
</section>
<hr>
<section class="section themes">
  <div class="container content">
    <div class="columns is-multiline">
      {% assign themes = (site.themes | sort: 'order') %}
      {% for theme in themes %}
      <div class="column is-half-tablet is-one-third-desktop">
        <div class="box has-text-centered">
          <div class="iframe image is-4by3 is-unselectable">
            <iframe src="{{ site.url }}{{ site.baseurl }}/thumb/?{{theme.name | slugify}}"></iframe>
          </div>
          <br>
          <h5>{{ theme.description }}</h5>
          <div class="block">
            <a class="button" href="{{ site.baseurl }}/{{theme.name | slugify}}"
              onclick="ga('send', 'event', 'theme', 'preview', '{{theme.name}}');">Preview</a>
            <a class="button is-primary" href="{{ site.baseurl }}/{{theme.name | slugify}}/bulmaswatch.min.css"
              target="_blank" onclick="ga('send', 'event', 'theme', 'download', '{{theme.name}}');">Download</a>
            <a class="button is-dark" href="{{ site.repo_url }}/tree/gh-pages/{{theme.name | slugify}}"
              target="_blank" onclick="ga('send', 'event', 'theme', 'github', '{{theme.name}}');" title="Download from Github">
                <span class="icon"> <i class="fa fa-github"> </i> </span>
              </a>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
    <hr>
    <div class="block has-text-centered">
      <a class="button is-info" href="https://twitter.com/intent/tweet?url=https://jenil.github.io/bulmaswatch/&text=Bulmaswatch%20-%20Free%20themes%20for%20Bulma&via=geekGogari&hashtags=web,themes,bulma,css" target="_blank">
        <span class="icon">
          <i class="fa fa-twitter"></i>
        </span>
        <span>Give a shout-out!</span>
      </a>
    </div>
  </div>
</section>