the full height nexus icon
 red n black circle yellow n black circle green n black circle 

This page title is, ..

[ A discussion on how writeOn is built (*) ]

Honestly, trying to explain how this css grid WordPress enabled website works in a written tutorial, (is a moot discussion at best), and something that actually borders on mind-numbing mindless futility: because all of the various PHP, CSS and JavaScript files found in my downloadable zip file, are fully commented.

I haven’t minified any of it yet.

And anyhow, the only way to use the freely available website files, (is to just play with them locally), but be warned: none of the menus will work, because this theme is keyed into my own WordPress website database. That said, you’d have that self same issue when switching to any new WP theme anyway.

Here’s the popup website’s zip file link that’s been included to get you started, with the hard to guess password being ( 1 2 3 4 5 ), happy hacking.

Getting back down to earth.

After dropping all of the useless widgets in my functions.php file, and then vertically rewriting them all from scratch in the PHP language, then I’ve got to say that this website isn’t really for Noobs to get their teeth into for learning purposes: it’s basically for the Pros and the up and coming Semis, who actually know their way around WordPress.

The website zip file has been made available to enable you to explore the concept of making and using (Templates), basically using the most excellent free (Pods) plugin in PHP code, and of course; not forgetting the ubiquitous (index) (single) and (page) files in relationship to the WordPress file structure itself.

** And if that last (structured) comment meant nothing to you, ..
Then here’s a great video tutorial to get you started. It’s clearly and cleverly presented by a guy called Brad Schiff, who runs his u-Tube channel called LearnWebCode. Watching (all) of his freely available videos, and whilst also downloading his many examples: is how I began on this programed journey, a staggering 11 months ago from todays date.

All that said about Noobs, Semi-Pros and Pros, here’s an excerpt of the styles.css discussion header, that’s been included to frame my boxed-in way of thinking. You go for it Henry, (my hero.)

ATTENTION: THE TERM MASTER AND SLAVE HAS BEEN EXTENSIVELY USED THROUGHOUT.
NOT ONLY HAVE I EMBRACED (WHAT SOME WOULD SAY ARE OFFENSIVE CONSTRUCTS), BUT I HAVE ALSO BUILT UPON THEM: EXCESSIVELY SO.
AS I'M SURE HENRY-BOX-BROWN WOULD MOST HEARTILY AGREE.

SNOWFLAKE, IF YOU ARE OFFENDED BY OUR HISTORY, THEN FUNK OFF NOW.
I SIMPLY HAVE NO TIME FOR THAT SORT OF P.C. WOKE NONSENSE.

Begin:- 
To get to the juicy css grid stuff, then simply use the 
[ Warp_Junction_One ] string here & above.
It then jumps over the general basic housekeeping, whereby you'll then drop into the corresponding landing pad.

General housekeeping in declaring body html site colors fonts etc follows.
Summarily now called the 'Feng-Shui' section.

Feng-Shui, a simplified Chinese construct that classes everything to go its correct spiritual placement.

It's a discipline that's pronounced as, ..

** Below, (sh) sound equals the back-end of hu(sh).

f-(u)-ng sh'way in American slang.
Or Feng-sh-ewiee in the UK dialect.

Whoever said that English was/is a set standard, has never met an inscrutable Chinese speaker.
You gotta' love what makes the world keep turning: unfathomable shit.

me gusta mi coño, .. Spanish at its finest.
me gusta me cunnio -- (I like my pussy)

Unrelated Bits.

content: "\f123"; is a turned up page. 
< a id = "bxtn" href etc .. 
text-indent: 5%; // is rather neat.

Got it? – See how much I really don’t give a shit?


At about line 1200 in the website’s stylesheet is where the breakdown layout of my site’s logic begins, ..

Please note that I've used a very unconventional CSS editing approach here.
In that the styles code is constructed in the reading order of the visual structure.

So we first begin by going from left to right along the top, - kiss -- kiss.
Then sliding down the long slippery column, - slip -- slid.
Before finally finishing up at the highly complex stinky bottom, - expelled penetration.

Below, in the ANSI picture of my website; the words in brackets dictate the main CSS sections.
- The underscores make them selectable.
- They are also unique, and CTRL-F or (F3) searchable.

 .-----------------------------.
| [my_home/blog] [top_nav_bar] | <- mobile top grid 
'----------------------------- '

.------------------------------------------------.
| [my_logo] [top_nav_bar]            [my_search] |
'------------------------------------.           |
                                     |[main_menu]|
                                     |  ****** * |
                                     |  *******  |
                                     |  *******  |
                                     |           |
 [ MY_DISPLAY_AREA ]                 |[pwdr_room]|
 (funk me, ..                        |  ** + **  |
but that's a complex little funker.) |  ** + **  |
                                     |           |
[ the_Home_Page_template_grid ]      |[subs]     |
                                     | ######    |
                                     | ######    |
                                     |[floater]  |
                                     | [x ] [xx] |
                                     | [x x] [x] |
-------------------------------------'           |
| [footer1] |[footer2] | [footer3]   |[calendar] |
| [ <^.^> ] |[------- ] | ???????    |  ######## |
| [ {[=]} ] |[ -->>-- ] | !!!??!!    |  ######## |
|------------------------------------'  ######## | 
|                                 [social_icons] |
+--[ lower nav_bar]------------------------------+
| [copyright_section] /technical download links. |
'------------------------------------------------'

[ Lower nav-bar ]
.--------------------------------.
| [Knickers] [Primer] [Theories] | <- mobile lower grid.
'--------------------------------'

Now, held in the belly of the beast itself; are two semi placid grids.
Colloquially shown as, - (funk me, but that was ever a complex pair of nuts to chew on.)

One little stinker is for advertising (me) on my exclusive home page:
[ the_Home_Page_template_grid ]

The other shit-head is an index card section for holding my extensive series library:
[ the_Book_Page_template_grid ]

What all the above actually means, .. is that I'm internally working on the grid layout, (in order!)
- And (also), the <div> classes that I've created to service them.
In other words, .. it follows through, but I haven't swallowed.

I have however followed through at the back-end with a nice big dump, .. whereby I've produced three fixed grids as a satisfying result.
With the rest being flushed out to pagegrid.css

pagegrid.css also holds several (many) grids.

One exclusive grid called [ mCars_Slave_Blog_Grid ] is used for the [ Blog ] (page.php)
Whilst the other WP file for [ mCars_Slave_Page_Grid ] is solely employed in (single.php)
[ Blog-listings ] and [ Archives ] are extensions of the main file (Index.php)

My Home Page and Book Series listings are exclusive templates created by me.
As mCars is my theme: it follows that all of my templates have adopted that naming conversion.

mCars-home.php -- my home page, complete with inner iconic menu.
mCars-books.php -- for showing my series, and then the books in them.

mCars-info.php -- used for user registrations, comments and alike with [ short-codes ]
mCars-info-too.php -- ditto, but one column.

mCars-nexus.php -- a complex reverse tree structure for indexing tutorials, stories and theories. 
** In fact: where you are now!

mCars-profile.php -- hard coded profile page, complete with avatar and steel-rivet-plated service tick boxes.
mCars-register.php -- quiz page registration, to filter out the time-wasters and Bots.

[ Grid wise observational notes. ]

Mobile first has been a distant third consideration here, mainly because my user base will be in discovery mode on their PCs first, with the Tablet and Mobile coming in 4th and 3rd respectively.

Discovery: the iPad and Android screens won't play ball, and so thusly do they become pigs upon most high. The key most horrible bloody annoying thing, to try and debug mobiles, homes screen widths even more so, but the css grid cells will expand and contract quite nicely in normal use.

Unfortunately, getting the widths to show the website in full is a pain most egregious to bare.

That said: you can easily drop [ grid cell columns ] to then fit any screen width, (this), combined with padding reductions, makes for a very responsive web-site.

Notation: trial and error (mainly error), shows that we have to construct the grids in order of appearance, and also use a name set that makes sense throughout, comprising of master and slave because it fits so well. It's not a good idea to move the Master and Overseer grids from this start position in the style sheet, or else you'll be asking for a slave rebellion.

And that my dear friends, is the current state of play where the css grids and my site writeOn is concerned.

 

Thanks for reading, Jessica: Praise be the ORI.

 

Information.

email icon This is my email address.



Your message may get put into the spam folder if my internet provided thinks it a bit phishy. So as an alternative — you can also use shopper@b92.co.uk if you so wish.

** This particular email address declared above, has positively and absolutely no spam filters on it, (at all), which means that positively and absolutely *everything* gets through.

Thanks for seeking me out, Jessica:
Praise be the ORI.

Information.

Disclaimer:-
The stuff found here in the Nexus is for amusement purposes only, and I guarantee that none of it is fit for purpose.

SO! – With that Pop-up popped up and properly put to bed, then the legal garbage is outta’ of the way.

Thanks for reading the trash, Jessica:
Praise be the ORI.

WARNING!

To view this website, you must be considered as an ADULT (with legal consent) in your current location to proceed any further.

Failure to comply, could result in a criminal prosecution (within the local domicile) that you physically reside.

This book site isn't for children, nor any childish attitudes towards sexual ambivalence. It is for -- ADULTS ONLY!

Pressing [ No! ] - Will take you away, to another type of less salubrious activity that's more suited to your young tender age (and/or) delicate disposition.

Only press [ YES! ] - If you understand these legally binding terms and conditions. Whereby, a one year cookie will be set on your browser: thusly declaring you to be an adult, (a constitutional time-Warrior), with all of your timely facilities intact.

It's a big decision that you're about to undertake coder, choose wisely: because you can never go back.