Skin

How to create a unique skin for your website

Online Docs Available Looks like you are looking at the offline docs. You can find possibly more up to date docs online here

Skins

The coolest feature of Lambda HTML is that you can build your own skin and add as many skins as you want!

What is a skin

Each skin is a list of variables that define the colors and styles of the website. You can find several ready-made skin files that each frames an existing version of Lambda, under the 'styles/skins'folder( corporate.scss, hotel.scssand more).

Editing an existing skin

Follow these simple steps to edit an existing skin

  1. Go to 'styles/skins'folder and edit an existing skin with a text editor, i.e corporate.scss(alternatives hotel.scss, landing.scss, personal.scss, restaurant.scss).
  2. Inside that file you will see a long list of sass variables. The names of those variables are self-explainable, i.e $heading-font-family: 'Raleway';sets the font family for headings to 'Raleway'.
  3. Change the variables to suit your preferences.
  4. Compile the .scss file and produce the .css that will be used.

Creating a new skin

Creating a new skin is fairly easy. Follow these simple steps to create a new skin

  1. Go to 'styles/skins'folder and create a new .scss file, i.e my_site.scss.
  2. Open an existing skin file located in the same folder, i.e corporate.scss and copy its content over to your new my_site.scssfile.
  3. Inside your newly created file you will now see a long list of sass variables. The names of those variables are self-explainable, i.e $heading-font-family: 'Raleway';sets the font family for headings to 'Raleway'.
  4. Change the variables to suit your preferences.
  5. Compile the .scss file and produce the .css that will be used.

Enabling the new skin

When using the gulp building system, in order to use your new skin and make it available to all the pages that extend your website's layout, make sure that you import it properly. To do that, follow these steps

  1. Go to your 'layouts/'folder and edit the .html file that you are using as template for your webpages, i.e corporate.html.
  2. Inside that file you will see a skinblock that looks like this.

     {% block skin %}
         <!-- build:css assets/css/corporate.min.css -->
         <link rel="stylesheet" href="styles/skins/corporate.css" type="text/css">
         <!-- endbuild -->
     {% endblock %}

    Change the name of 'corporate.css'to be the name of your skin, i.e my_site.css.

  3. The skin will be used on your next build.