generator-sin
yeoman generator for strict eliosin patterns for god, eve and adon, the elioWay.
Why do I need to nest my
h1
tag, for instance, so deeply in so manydiv
tags? Why do I need to nest mynav
tag 3 deep inside a collection ofdiv
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 tagNameform
; or the className.table
for atable
? Tim Bushell
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.
eliosin is split into three modules:
god, eve and adon could easily be combined. By keeping them as separate libraries it clarifies certain facts:
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!
They are learning/teaching focused. They are small so that new developers can consume them easily.
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.
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 styleX
, 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 */
}
yeoman generator for strict eliosin patterns for god, eve and adon, the elioWay.
Minimal acceptable class-less css eliosin theme, the elioWay.
8 elegant, ready made eliosin themes for news, blogs, shops, etc, targeted to a larger screen, the elioWay.
7 snappy, ready made eliosin themes for interactive web apps with a mobile focus, the elioWay.
Puts listed tags alternatively into heaven, then hell, then heaven, then hell, the elioWay.
Fibonacci SASS mixin for weighting CSS units, especially heading font sizes, the elioWay.