help.html

---
title: Help
layout: page
permalink: /help/
route: help
---

<section class="section">
  <div class="container">
    <div class="content">
      <h3 class="title">Getting started</h3>
      <ol>
        <li>Get started with
          <a href="http://bulma.io/documentation/overview/start/" target="_blank">Bulma</a>
        </li>
        <li>Download the <code>bulmaswatch.min.scss</code> for the respective theme</li>
        <li>Replace <code>bulma.css</code> with <code>bulmaswatch.min.scss</code></li>
      </ol>
      <hr>
      <h3 class="title">Use NPM</h3>
      <ol>
        <li>Install package <code>npm install bulmaswatch</code></li>
        <li>Each theme consist of two files - <code>_variables.scss</code> &amp; <code>_overrides.scss</code></li>
        <li>Import the respective theme files from <code>node_modules/bulmaswatch/&lt;themename&gt;/&lt;filename&gt;</code></li>
        <li>Make sure you import <code>bulma</code> before the <code>_overrides.scss</code> for the theme to work properly</li>
        <li>An example of your custom theme file is the <a href="https://github.com/jenil/bulmaswatch/blob/gh-pages/default/bulmaswatch.scss" target="_blank">bulmaswatch.scss</a> for each theme</li>
      </ol>
      <hr>
      <h3 class="title">API</h3>
      <p>You can use the API to integrate the themes with your platform.</p>
      <div class="block">
        <pre><code>GET {{ site.url }}{{site.baseurl}}/api/themes.json</code></pre>
      </div>
      <p>This returns all the themes with important URLs. Here is how a sample theme looks:</p>
      {% highlight json %}
{
  "name": "Cosmo",
  "description": "An ode to Metro",
  "preview": "https://jenil.github.io/bulmaswatch/cosmo/",
  "thumb": "https://jenil.github.io/bulmaswatch/thumb/?cosmo",
  "css": "https://cdn.rawgit.com/jenil/bulmaswatch/gh-pages/cosmo/bulmaswatch.min.css",
  "scss": "https://cdn.rawgit.com/jenil/bulmaswatch/gh-pages/cosmo/bulmaswatch.scss",
  "scssVariables": "https://cdn.rawgit.com/jenil/bulmaswatch/gh-pages/cosmo/_variables.scss"
}{% endhighlight %}
    </div>
  </div>
</section>