Quickstart eve

Prerequisites

Let's do some theming...

Nutshell

To add a new style for a tagName:

  1. Create the file stylesheets/<tagName>/_<prongName>.scss

  2. Make the tagName the parent tag of the scss, e.g.

tagName {
  // everything else in here
}
  1. Reference the style's file in stylesheets/theme.scss

  2. Add the tagName to the correct prong in stylesheets/settings.scss

Do steps 1 to 4 in one go:

yo sin:eve

Introduction

Take a look at your stylesheets folder. It should look something like this:

Files Created/Affected

project
│   index.html # requires editing
└───stylesheets
    │   _heaven.scss
    │   _hell.scss
    │   _pillar.scss
    │   judge.scss
    │   settings.scss
    │   theme.scss
    └───aside
        │   _hell.scss
    └───...
        │   ....scss
    └───ul
        │   _pillar.scss

This structure is designed to help you organise and reuse - and for other elioSinners to share - elioSin themes and designs.

Given that elioSin works on tagNames, not classNames, each tagName has its own folder and some (or all) of the following files:

A theme is fully 'fleshed' when its tagName folders contain all these files (and plenty of features). A fleshed theme will allow the user to put any tagName in pillar, heaven or hell with an expectation it will fit the page theme.

This tutorial will look at how this works in practice. Time to get your favourite text editor out!

cd ~/dev/folder/to/genesis
gulp

Exercise 1 Theme a tagName

dl {
    align-items: stretch;
    display: flex;
    flex-flow: row wrap;

  dt {
    background: red;
    flex-basis: 100%;
    font-size: $god-spoke;
    font-weight: 400;
    padding: $personal-space;
  }

  dd {
    margin: 0;
    flex-basis: 100%;
    padding: $personal-space;
  }
}

Don't worry too much (for now) what the datalist looks like.

What we learnt

  1. The tagName must be the outer most tag in the class.

  2. Using god's default settings for common properties.

  3. For instance, using $god-blushed so dl's colors stay consistent with the whole theme.

  4. Open the _theme.scss file. Notice how dl/pillar is already referenced? The yo generator did that for you.

elioSin was made for quickly creating wireframes. But that doesn't mean we can't give those elements a pretty face. Once tags are positioned the way you want, you can use the style-files to style them any way you want. Or don't want.

More examples here:

Exercise 2 Moving a Tag

We're going to move a tag from hell to heaven.

Add a style file

h6 {
  @include colorize_god($god-blushed, $god-color);
}

Reference the tag

Move the tag

Exercise: details has repented

Your turn now! Try moving the detail tag into heaven. Here are the steps:

What we learnt

  1. How to use settings.scss to move tags into different prongs.

  2. How to create a tagName/_<prong>.scss file for its style.

  3. How to use theme.scss to change the style.

Exercise 3 Theming a general tag

This explains how you style a tagName which is not mentioned in the pillar.

In this exercise we will style the button tag.

Creating a style file

Adding it to the theme

#{$container} {
  @import "button/inline";
}

Theme the tag

button {
  @include colorize_god($god-blushed, $god-color);
  font-size: $god-spoke;
  font-weight: bold;
  margin-left: $personal-space;
  padding: 2px $god-space 1px;
  text-decoration: none;
  border: $god-blushed 1px solid;

  &:hover {
    @include colorize_god($god-color, $god-blushed);
  }
  &:disabled {
    @include colorize_god($god-color, $god-blushed);
  }
}

What we learnt

  1. How to style an inline tagName.

Exercise 4 Using yo sin:eve

elioGod's yeoman generator, generator-sin can also be used to create new style files.

yo sin:eve

At the prompt:

Open stylesheets/article/_pillar.scss and add the following text.:

article {
  object-fit: fill;
  height: auto;
  // media widths
  @include tight {
    @include fixed_width($hell-width / 4 + $heaven-width / 4);
  }
  @include cosy {
    @include fixed_width($hell-width / 3 + $heaven-width / 3);
  }
  @include loose {
    @include fixed_width($hell-width / 2 + $heaven-width / 2);
  }
}
</h3>

<article><img src='splash.jpg' /></article>

What we learnt

  1. yo sin:eve will create or overwrite (after confirming) the file stylesheets/tagName/_prong.scss.

  2. yo sin:eve adds tagName, to the $prong: () in stylesheets/settings.scss.

  3. yo sin:eve adds @import 'tagName/_prong.scss'; to stylesheets/theme.scss.

  4. Save and close index.html.

Check the changes.

Recap

stylesheets/tagName/_pillar.scss

Style tagName in prong pillar.

stylesheets/tagName/_hell.scss

Style tagName in prong hell.

stylesheets/tagName/_heaven.scss

Style tagName in prong heaven.

stylesheets/tagName/_athiest.scss

Style tagName generally as a block tag not contained by prongs.

stylesheets/tagName/_inline.scss

Style tagName generally as an inline tag.

stylesheets/tagName/_theme.scss

Style tagName generally.

stylesheets/tagName/feature.scss

Style an optional, themic feature for tagName.

stylesheets/tagName/settings.scss

tagName specific style settings.

Tidy up

Next

You have now seen how eve lets you theme tagNames for any of the prongs.

More examples here:

Next you'll be using adons's patterns for changing themes based on human interaction.