Quickstart Contribute elioWay
elioWay

eliosin experimental

Why do I need to nest my h1 tag, for instance, so deeply in so many div tags? Why do I need to nest my nav tag 3 deep inside a collection of div tags with classes like .mainNav and .mainNavLeft. When... oh when... oh when... oh when... do we ever need to use the className .form especially for the tagName form; or the className .table for a table? Tim Bushell

We've lost our collective minds

eliosin is an (unholy) trinity of open sourced libraries which demonstrate and implement patterns for rapidly building workable CSS stylesheets which target tagNames, rather than classNames.

eliosin will work closely alongside elioflesh providing tiny, classless, css stylesheets.

We're creating stylesheets for wireframes which only mention tagNames. No divs. No class names. No rows and columns of nested tags. Just normal tags, listed directly inside body, period.

eliobones Dogma

Trinity

eliosin is split into three modules:

Structured

SASS patterns for wireframe or layout per tagName.

Stylish

SASS patterns for CSS styling of individual tagNames.

Interactive

Javascript patterns for jquery/DOM UX actions per tagName.

god, eve and adon could easily be combined. By keeping them as separate libraries it clarifies certain facts:

  1. The three libraries represent patterns not features. You could just as easily look at the source code and implement your own version. I offer these patterns as an extended "gist" you may repurpose as you wish. I stole my genius from other people anyway!

  2. They are learning/teaching focused. They are small so that new developers can consume them easily.

  3. Separated, their individual patterns are clear. Metaphorically, the names god, eve and adon are well-known concepts which will help you organise their purpose in your mind.

  4. Separate, they are optional, assuming you have the settings file in each.

body>X in a stylesheet embodies everything you'd need to know about how to style X, the elioWay

eliosin is old school, and bemoans the thoughtless use of HTML tagNames, bypassed for the sake of classNames.

eliosin asks: Why do I need to nest my h1 tag, for instance, so deeply in so many div tags? Why do I need to nest my nav tag 3 deep inside a collection of div tags with classes like .mainNav and .mainNavLeft. When... oh when... oh when... oh when... do we ever need to use the className .form especially for the tagName form; or the className .table for a table?

eliosin thinks we've lost our collective minds!

It is the considered opinion of eliosin that body>X in a stylesheet embodies everything you'd need to know about how to style X:

Simplistically, eliosin generated stylesheets look like this:

body > h1 {
  /* style */
}
body > nav {
  /* style */
}
body > menu {
  /* style */
}
body > footer {
  /* style */
}
body > p {
  /* style */
}

generator-sin

yeoman generator for strict eliosin patterns for god, eve and adon, the elioWay.

innocent

Minimal acceptable class-less css eliosin theme, the elioWay.

bushido

8 elegant, ready made eliosin themes for news, blogs, shops, etc, targeted to a larger screen, the elioWay.

sins

7 snappy, ready made eliosin themes for interactive web apps with a mobile focus, the elioWay.

toothpaste

Puts listed tags alternatively into heaven, then hell, then heaven, then hell, the elioWay.

Tools

SassyFibonacciness

Fibonacci SASS mixin for weighting CSS units, especially heading font sizes, the elioWay.

Useful

More