god styled HTML should not be nested and needs no
extraneous div tags. god styled HTML should
be flat and naked.
Just a reminder: In HTML, tags are either block or inline:
Block tags like p, h1,
h2, div, etc., typically force a line break
(i.e. their contents will start on a new line).
Inline tags like a, strong,
em, etc. typically change text.
god treats all believers as block tags.
By wireframe we mean any CSS styles which takes care of the page structure. A wireframe relates to the way content appears on virtually every webpage. Blogs, bootscraps, wordpresses, even many corporate sites - typically have pages which generally have the same page structure:
In eliosin it's god's job to do that layout.
There has to be an easier way than this tsunami of classNames and nested div tags.
Why eliosin can help is illustrated by a comparison.
Under Bootstrap, Pure, CSS Flex, Material, Tailwind, and many other CSS frameworks - which I will lovingly label under the umbrella name bootscrap - a wireframe might be implemented like this:
Figure 1
<link src="bootscrap.css" />
<div class="container mainpage mumbo-jumbo">
<div class="row black no-margins no-end-in-sight parent-of-parent-of-parent">
<div class="col3 padded squared nested">
<nav class="sidebarnav dilly-dally"><a>Home</a></nav>
<!-- content left column -->
</div>
<div class="col7 thick-line strong stand-out rounded">
<h1>Content heading</h1>
<!-- content centre -->
<p>Content paragraph.</p>
<!-- content centre -->
</div>
<div class="col2 despair shoot-me-now">
<img src="advert.svg" />
<!-- content right column -->
</div>
</div>
</div>
NB: Five of the nine opening tags add no content.
Of the HTML in their care, such as with the example above, bootscrap stylesheets require both structure and classNames (see Figure 1) to create a 60% width column of text on the page with blobs of content scattered in the gutters. It's a lot of work and HTML to do something simple.
Hmmmmm.
There has to be an easier way than this tsunami of classNames and nested div tags!
With eliosin, assuming the same parent element as above, we will contain the same content by following just two of god's commandments:
We will have instead:
Figure 2
<link src="god.css" />
<nav><a>Home</a></nav>
<!-- content left column -->
<img src="advert.svg" />
<!-- content right column -->
<h1>Content heading</h1>
<!-- content centre -->
<p>Content paragraph.</p>
<!-- content centre -->
eliosin styles and displays the content in Figure 2 in the same way as bootscrap might display the same content from Figure 1; with no classNames and no nesting.
Because all of the main tags are siblings, this can make developing dynamic websites easy, especially for SPAs. As long as you inject new tags into your page in the right order, no complicated templates are required. god will ensure every tag sits in the right place.
Anything that easy must be sinful!
god lays out page content into three prongs - pillar, heaven and hell - which collapse nicely on mobile screens. You decide which tags will fall into which prongs. A tagName can only appear in one prong per stylesheet.
Having read the first part god vs bootscrap, you know eliosin doesn't think much of HTML fluff.
god only cares about tagNames and she's only thinking about the wireframe. Remember the first two commandments?
So how does god work? There's no mystery. First god divided the page.
Commandments 4 to 6 describe this layout.
In eliosin's settings file, you list the tagNames in your chosen prong - putting them into the pillar, heaven or hell prongs as required.
Roughly, using asciiart to sketch it out, this is what a page of plain HTML (e.g. Figure 2) would look like using god.
In the following example:
p has been added to the pillaraside ... going to hellblockquote ... has been good... bound for heavenfooter is an atheistNB. TagNames which appears in the HTML, but are not listed in prongs, are not bound by the god stylesheet.
Figure 1: The HTML
<link src="god.css" />
<body>
<aside>H E L L 1</aside>
<blockquote>H E A V E N 1</blockquote>
<p>P I L L A R A</p>
<blockquote>H E A V E N 2</blockquote>
<aside>H E L L 2</aside>
<blockquote>H E A V E N 3</blockquote>
<aside>H E L L 3</aside>
<p>P I L L A R B</p>
<footer>All rights (c) god</footer>
</body>
Figure 2: god's layout of Figure 1: The HTML
NB. Gaps are not to scale.
<---------------------------------- pagewidth --------------------------------->
-------------------- -------------------------------- --------------------
| | | | | |
| H E L L 1 | | | | H E A V E N 1 |
| | | P I L L A R A | | |
-------------------- | | | |
| | --------------------
| |
| |
| |
| |
-------------------- -------------------------------- --------------------
| | | | | |
| H E L L 2 | | | | H E A V E N 2 |
-------------------- | P I L L A R B | | |
-------------------- | | | |
| | | | | |
| H E L L 3 | | | --------------------
| | | | --------------------
| | | | | |
-------------------- | | | H E A V E N 3 |
| | | |
| | --------------------
--------------------------------
--------------------------------------------------------------------------------
All rights (c) god
--------------------------------------------------------------------------------
So let's look at this in light of the 7 commandments:
god shall only be used for page layout. Style your own forms.
✅ See Figure 2
god layouts shall target tagNames not classNames.
✅ See Figure 1
pillar hell heaven shall be siblings of the same container.
✅ See Figure 1
pillar tags shall be laidout as an equal-width, centred column.
✅ See Figure 2
hell tags shall be laidout left and heaven tags shall be laidout right.
✅ See Figure 2
No hell heaven shall be laidout higher than follow sibling pillar.
✅ See Figure 1 and Figure 2 (huh❔)
pillar content shall wrap when overlapping hell heaven.
✅ But not illustrated
(huh ❔) Looking at Figure 1,
<aside> H E L L 2</aside> is followed by the
pillar tag <p> P I L L A R B</p> which
is why the "H E L L 2" box sits alongside "P I L L A R
B" box.
NB. pillar always has a little bit of margin.
Figure 3: god's layout of Figure 1: The HTML on small screens
<----------- pagewidth ------------>
------------------------------------
| |
| H E L L 1 |
| |
------------------------------------
| |
| H E A V E N 1 |
| |
------------------------------------
| |
| P I L L A R A |
| |
------------------------------------
| |
| H E A V E N 2 |
| |
------------------------------------
| |
| H E L L 2 |
| |
------------------------------------
| |
| H E A V E N 3 |
| |
------------------------------------
| |
| H E L L 3 |
| |
------------------------------------
| |
| P I L L A R B |
| |
------------------------------------
------------------------------------
All rights (c) god
------------------------------------
or how god's word became law
Having read the previous part god vs asciiart, you'll have an asciiart-picture in your mind of how the page will look. (And an asciiart picture is worth about 168.5 words.)
This is eliosin's settings.scss - which
you would normally override with your own. Compare this with
bootscrap's settings file!:
// BELIEVERS ==================
$container: (body);
$pillar: (h1, h2, p);
$heaven: (blockquote, figure);
$hell: (nav, aside);
// LAYOUT ==================
$god-space: 3%;
$heaven-width: 20%;
$hell-width: 20%;
$personal-space: 12px;
$transition: 3s;
// MEDIA BREAKS ==================
$god-loose: 1200px;
$god-cosy: 900px;
$god-tight: 600px;
// COLORS ==================
$heaven-color: lightgrey;
$pillar-color: black;
$hell-color: darkgrey;
$god-color: $pillar-color;
$god-blushed: lighten($god-color, 15);
// TEXT ==================
$god-h1: 500%;
$god-h6: 100%;
$god-p: 100%;
$god-spoke: $god-p * 1.1;
$god-head: sans-serif;
$god-body: serif;
// BASICS ==================
$god-border: 1px $god-blushed solid; // general purpose border
$inline-padding: 3px;
$toothpaste-color: "none";
Remember when I said "First god divided the page" in the page before? This bit...
$god-space: 1%; // the pad (as a percentage to help scaling).
$hell-width: 20%; // gutter width left (as a percentage to help scaling).
$heaven-width: 30%; // gutter width right (as a percentage to help scaling).
... divided the page" by:
Making the width of elements with tagNames in hell
$hell-width 20% and tagNames in heaven
$heaven-width 30%.
Floating tagNames in hell left and tagNames in heaven right.
Fixing pillar tagNames into a central column being:
$pillar_width = 100% - $hell-width% -
$heaven-width%
Tidying it all for you.
$god-space is used to give the columns and their contents
more horizontal space.
Remember when I said "Then you decide who goes to hell"?
This setting is the bit where you decide who goes to heaven or hell or stays in the pillar:
$pillar: (p); /* p is in the pillar */
$heaven: (blockquote); /* blockquote is in heaven */
$hell: (aside); /* aside is in hell */
Now we can revisit elioflesh's
flesh.json file to complete the picture of how it can be
tightly welded to eliosin.
{
"name": { "believer": "h1" },
"description": { "believer": "p" },
"status": { "believer": "dl" },
"Itemlist": {
"believer": "dl",
"itemListElement": {
"name": { "believer": "dt" },
"disambiguatingDescription": { "believer": "dd" }
},
"Person": {
"fistName": { "believer": "fieldset" },
"itemListElement": {
"name": { "believer": "dt" },
"disambiguatingDescription": { "believer": "dd" }
}
}
}
}
eliosin applies css styles only to direct child tags of a
parent element. elioflesh's
flesh.json directs it to render each
So that's eliosin . A three pronged approach to webpage layout leaving you, the HTML app developer, free to worry about other things.