Getting Started
with Mnmal-One

This is a Work in Process document.

  1. Unzip the theme package
  2. Go to the folder in your terminal and run the following commands:
  3. bundle install
  4. npm install
  5. gulp will run your development environment
  6. gulp --prod will compile your project for production

After the installation process, the theme is customizable manly via _config.yml and /assets/css/_partials/_variables.scss (Examples below).

All CSS and JS files are commented to guide you.

The idea is to use CSS helpers in your HTML pages to style you theme.

Customizing your
Google Fonts

Step 1:

  • Open _config.yml
  • In the Layout Settings:
  • Change body_google_fonts for body font
  • Change heading_google_fonts for headings font

Step 2:

  • Open /assets/css/_partial/_variables.scss
  • Change $ff-body: for body font
  • Change $ff-heading: for headings font

SVG Icons

To use the icons, copy and paste the code below.

<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#attachment"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#bookmark"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#bulb"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#calendar"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#cogs"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#desktop"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#devices"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#heart-o"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#image"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#laptop"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#link"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#lupe"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#microphone"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#nav-down-small"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#nav-down-large"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#nav-down"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#nav-left-small"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#nav-left-large"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#nav-left"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#nav-right-small"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#nav-right-large"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#nav-right"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#nav-up-small"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#nav-up-large"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#nav-up"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#social-dribbble-circle"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#social-facebook-circle"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#social-facebook"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#social-github-circle"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#social-github"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#social-google-circle"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#social-instagram-circle"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#social-instagram"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#social-linkedin-circle"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#social-linkedin"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#social-pinterest-circle"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#social-pinterest"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#social-rss-circle"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#social-soundcloud-circle"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#social-soundcloud"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#social-tumblr-circle"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#social-twitter-bird-circle"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#social-twitter"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#social-youtube-circle"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#social-youtube"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#video"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#warning"></use> </svg>
<svg class="icon tc-text h1 mb-2 mt-0"> <use xlink:href="#world"></use> </svg>

Support

If you need assistance, please follow us on Twitter and send a Direct Message. We'll try to help you asap.