Quickstart god

Nutshell

To start a new eliosin theme.

  1. Create a new folder for your project.
  2. Run yo sin in that folder.
  3. Follow the instructions when prompted.
  4. Type gulp.
  5. Change the settings.scss file to taste.

Getting Started

mkdir genesis
cd genesis

Exercise 1 Call the sinful yeoman generator

yo sin
? Tags going into the pillar h1, h2, h3, h4, p, ul, ol, dl, table,
? Tags bound for heaven blockquote, h6, summary,
? Tags sent to hell nav, aside, details,
? Would you like yo h5bp? y/N

Important things generator-sin makes

project
│   index.html
│   README.md
│   ...
└───css
    │   main.css
    │   normalize.css
└───js
    │   main.js
    │   plugins.js
    └───adon
└───stylesheets
    │   _heaven.scss
    │   _hell.scss
    │   _pillar.scss
    │   judge.scss
    │   settings.scss
    │   theme.scss
    └───aside
        │   _hell.scss
    └───... <many more>
        │   ....scss
    └───ul
        │   _pillar.scss
└───test
    │   stylesheets.js
    │   stylesheets.scss
    └───functions
        │   _i_am.scss
    └───mixins
        │   _i_am.scss
    └───suites
        │   adonTesterSuite.js

Seeing is Believing

gulp

What gulp makes

project
└───css
    │   genesis.css
    │   genesis.min.css
└───dist
    └───css
        │   genesis.min.css
    └───js
        │   adons.js
        │   main.js

Other eliosinners should add your stylesheets/theme.scss to their theme.scss file. index.hml imports dist/js/main.js before </body>.

What we learnt

  1. What generator-sin does.

  2. What yo sin creates.

  3. What gulp gets up to.

That's it! Now you're ready to start working on your theme, so let's go ahead and make a start.

Exercise 2 Changing eliosin LAYOUT settings

$god-space: 2%; // the horizontal padding in all the prongs.
$heaven-width: 25%; // prong width right (as a percentage to help scaling).
$hell-width: 25%; // prong width left (as a percentage to help scaling).
$personal-space: 6px; // the vertical padding between believers.

What we learnt

  1. How to change the page layout.

Exercise 3 Change eliosin TEXT settings

$god-h1: 250%; // font size of h1.
$god-h6: 100%; // font size of h6.
$god-p: 100%; // font size of paragraph text.
$god-spoke: $god-p * 1.2; // standout with big text.
$god-head: "Montserrat", sans-serif; // for heading level text.
$god-body: "Amiri", sans-serif; // for body level text.
<link
  href="https://fonts.googleapis.com/css?family=Montserrat:100|Amiri"
  rel="stylesheet"
/>

What we learnt

  1. How to change fonts and sizes.

Exercise 4 Change eliosin COLOR settings

Next we're going improve the level of separation between the pillar and outer prongs and for that we'll need an awesome colour scheme. I generally like to make hell darker. From the color scheme, choose which color will be the primary color known as $god-color.

$heaven-color: #007f00;
$pillar-color: black;
$hell-color: #9ebdbd;
$god-color: $heaven-color;
$god-blushed: lighten($hell-color, 25);

$god-color should be used widely in your theme files when you want your tagName style to pick out the main colors.

god-flushed should be used widely as a light background, for :active highlights, for muted text, etc.

Ideally you only reference $heaven-color $pillar-color $hell-color for tagNames in those prongs.

What we learnt

  1. How to change the color scheme.
  2. How to choose a primary color called $god-color.
  3. How to choose a primary background tint called god-flushed.

Exercise 5 Change theme of Pillar, Heaven and Hell

The _heaven.scss, _hell.scss and _pillar.scss files can be used to style all the tagnames in a prong. This is particularly useful for the pillar. Just make sure they are referenced in your _theme.scss file.

#{$pillar} {
  text-align: justify;
}
#{$heaven} {
  @include colorize_god($god-blushed, $pillar-color);
}
#{$hell} {
  @include colorize_god($god-blushed, $god-color);
}

What we learnt

  1. How to theme all the tagNames in the pillar
  2. How to theme all the tagNames in the heaven
  3. How to theme all the tagNames in the hell
  4. How to use a mixin. More mixins

Exercise 6 Change heading themes

h1,
h2,
h3,
h4,
h5,
h6 {
  color: $hell-color;
}

What we learnt

  1. How to theme all the heading tagNames h1 to h6

Freetime

Exercise 7 Change the sinner positions

pillar hell and heaven tag shall be siblings of the same container 3rd commandment

The 3rd command is an important aspect of eliosin html pages. Having all the tags as children of body makes it very easy to switch blocks of content in and out. An eliosin website is little more than an xml stream of articles. But we do need to mind the 6th commandment.

No hell heaven shall be laid-out higher on the page than the following sibling pillar in the HTML source (examples coming). 6th commandment

The 6th command states the position of tagNames is important. pillar will just be piled up on top of eachother down the middle of the page - literally a giant pillar in the centre of the webpage. hell and heaven tagNames will float left and right held adjacent to the next pillar tagName below it. Exercise 7 will demonstrate this.

<aside>...</aside>

<h6>...</h6>

<ul>
  ...
</ul>
<details>...</details>

<summary>...</summary>

<dl>...</dl>

What we learnt

  1. Notice how the tags aside h6 details and summary sit alongside the ul and dl tags which are below them in the HTML?

  2. Yeah, I noticed.

  3. Excellent. This QuickStart is over.

  4. I don't notice!

  5. Sorry. god is not for you.

Appendix: Core files

stylesheets/_<prong>.scss

A style for all tagNames sitting in that prong.

stylesheets/settings.scss

elioGod's basic settings.

stylesheets/theme.scss

This file is the exportable version that other sin libraries can @import when the want to borrow your theme. Only tagNames from your theme should be here!

stylesheets/judge.scss

This file is 'gulped' to build the css file for this eliosin theme, and should @import everything else your theme requires, including god and your theme.scss.

Tidy up

Next

You have now seen how god works to control the layout and style of the three prongs.

Next you'll be using eve's patterns for theming individual tagNames.