Replicating and initializing
Replication
The first part of this was to take what was already there and try to achieve some matter of parity with it.
The initial site looked like this:
Pretty standard top-menu layout with near-full-width content area.
I copied over the assets, slapped the background image up there (funny how much that makes it feel more complete) and then started working on the Header and Footers.
The discussion about the generation of the nav bar will be in a separate post.
Initialization
I really love Tania Rascia’s Primitive UI framework. Did I mention that already? I feel like I’m always recommending it.
Goal 1 was to at least proof-of-concept get a comparable layout to the existing site, which was written in wordpress.
I don’t know if you’ve ever tried to do this before, but Wordpress themes still suffer from what we used to call “DIVitis”. You can tell if a page has that if the source code has this:
I like my HTML code to be clean and “semantic”.
I started with a clean Jekyll instance, copied in the SCSS base, and did my usual configuration routine to get it set up.
Nested Layouts
One thing that the client and I discussed initially was the ability to enact “sub-brands” on individual pages. My hunch was that I would be able to do “sub-layouts” for individual sub-brands, or to at least use Jekyll “front-matter” to specify the brand and have that apply different CSS styles.
What I ended up deciding on was this: In the main layout, where the <body> tag is opened, I included a data-brand attribute:
<body id="" data-brand="">
Above it, I used liquid tags to define both those values:
The default slug is empty, but is defined in the default.html layout. The default brand is “studio”, which is the sub-brand that has the aesthetic choices for the studio itself.
Within the SCSS, I can then have declarations like:
body[data-brand="studio"] {
color: $studio-font-color;
background: $studio-background;
font-size: $body-font-size;
font-family: $studio-font-family;
/* ... */
}
But these can be overridden by the slug value (set as the ID) because of CSS cascade rules. So a style like
body#home {
/* ... */
}
would override that, in the case of:
<body id="home" data-brand="studio">
slug may not be the best choice of words in that moment, but 🤷♂️.
Achieving parity
At this point, with these rudimentary parts in place, I started creating pages and replicating content from the main site. The client had given me an approximate information architecture structure he wanted, so I began from that and filled in the content where appropriate from the source material. Any lingering content left behind was filed away in the closest-approximate places.
After the content was all copied over, navigable, and rendering correctly, I did a git commit and an initial push to the repo to build the site. We used Github pages for this instance for easy deploying and previewing.