Creating a classic layout

For my site I will be developing a classic layout as shown below:

As you can see, it will be a RWD layout for three sizes: Big, Small and Narrow.
The big layout will show a banner (grey), below that a navigation bar (Orange), below that three columns: a left aside column (yellow) a right aside column (blue) and the main content (green). Below this all will be a footer (pink-ish).
The small and narrow layout will not show the navigation bar when initially shown, but will instead have a menu-button in the banner. When that button is activated, the navigation will appear in the indicated position.

I was not up-to-date with HTML5 and CSS3. So right of the bat I could see that I needed to solve a couple of fundamental questions:

1. What mechanism do I need to differentiate between the three layouts?
2. What mechanism do I need to implement the hiding/unhiding of the navigation?
3. What mechanism do I need to change the ordering of the panels?

Not being a complete novice it was obvious that I could solve this in javascript. But that was not the route I wanted to take. Remember from yesterday's post that I wanted to avoid javascript.

The first thing I always do is to google. Well... yes... but... that works, but the solutions found that way tend not to be... "up to date". Web technology still changes at a pretty pace, so most solutions you find right away deal with yesterday's technology. So I spend a couple of days scrounging the web and ultimately I found what I believe are the right methods for the job:

For problem 1: the "@media" CSS rule
For problem 2: the ":checked" CSS selector
And for problem 3: the display property with value "flex" and the "order" property

Btw: There is an excellent blog article on Flexbox principles here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

However, before I dive into the design, next I want to talk about structuring the project in Jekyll first.

Installing Jekyll and first use.

Installing Jekyll was a breeze for me. All the prerequisites were in place so installing went without an hitch. The install procedure is documented here.
A tip: before you install Jekyll, first update the existing (Ruby) gems with:

$ sudo gem update

Of course you will need to do this in a terminal window.

Then you can install Jekyll:

$ sudo gem install jekyll

And that was all. Ready to create our first Jekyll project.

Make sure that the command prompt is in a directory where the project directory must be created. However keep in mind that this is the development directory, so don't create it in the place where the website will be placed.

Type the following:

$ jekyll new MyGreatSite 

Then cd to the new directory:

$ cd  MyGreatSite 

Again, that is all you need. Next we start the Jekyll build-in server with:

$ jekyll serve 

Now point your browser of choice to: http://localhost:4000.

You should be rewarded with a website with the looks of the default Jekyll template.

Jekyll Templates

Now, at this point you may want to start hunting for nice looking templates or theme's. But I would suggest that you don't. Downloading templates at this early a stage will complicate things before you are ready for it. At least it did so for me, I almost gave up on Jekyll. Luckily I knew I went too far and I backtracked to just the plain Jekyll install.

Instead I suggest you take the time to learn each of the tools used by Jekyll.

First become familiar with HTML and CSS. It is not necessary imo to go in depth, but you do need a working knowledge. As a free resource http://w3schools.com is hard to beat imo. Note that we will be building a site with HTML and CSS so having a good grip on them will be mandatory. However just to start out a rudimentary knowledge should suffice.

Assuming you are somewhat familiar with HTML and CSS, learn SASS in the SCSS flavour. Read through the documentation at: http://sass-lang.com/documentation/file.SASS_REFERENCE.html. Again, just become familiar with the concept, you will learn the true depths as you go along.

Then take a look at Kramdown, the online resource is at: http://kramdown.gettalong.org/documentation.html. Same rule here, just the skinny of it.

I saved the best for last: Liquid. If you are a programmer, a quick scan of the documentation at https://docs.shopify.com/themes/liquid-documentation/basics will suffice. If you are not a programmer, hmm, then make sure you become familiar with it as it is the real power behind Jekyll. This is what you really need to create your own site template (theme).

With this under your belt it is time to attack the default site head on. Study the workings of it, add a post, add a page. Then start changing the theme itself and implement your own design. That is a lot of work, but you will know exactly how the site works and how the tools interact. Which imo is invaluable.

You could now start looking for a theme (for example at http://jekyllthemes.org). Personally I did not find a suitable theme, and besides I really like the challenge of creating my own.

Besides, there are additional questions that needs to be answered before creating a design or adopting one: which market do you want to reach? Do you need to support as many browsers as possible? or is it acceptable to write for the most recent versions? Can you use javascript or do you want to avoid it? Must it be RWD?

The site I will be creating will be made with HTML5 and CSS3. I will try to avoid Javascript.

More about that design in the next post.

A new Jekyll user

Website development in the early day's was simple: just drum up some html pages configure your server, and voila a new site was born.

But then... oh then...

Gone are the days where a simple site would suffice, where a single content provider made a site. Dynamic content was key. In came php and a whole slew of 'Content Management Systems".

I used to ... wait a moment, it might still exist ... yes, it does: http://lugt.home.xs4all.nl/tnp/. Well, I wanted to say that I used to have a site that was a simple html thingy. But it seems I still have! lol.

Later in life I had a few other sites, but by then I used Wordpress. I remember that I quite liked the "Suffusion" theme. Then came the iPhone's and iPad's. And today the keyword is "Responsive Website Design" (RWD = A website that works well on any device). Well, Wordpress can do that just fine, though the first versions of suffusion did not support RWD (I think??) and anyhow the frequent updates of Wordpress keeps one quite nimble... not to mention the gazillion of plugins... case in casu, I switched to the default Wordpress Themes to reduce the work overload. The not-so-nice (IMO!!) layout was taken as 'unavoidable'.

That worked fine for a while. Keyword is "while". For reasons unknown to me up to this date, at about Xmas time I would loose the content of the WP-database for some sites. Curiously enough not all of them, just some. And it would happen twice in a row, with about two to four weeks time in between. The first year it happened I kind of shrugged it off. Things seemed to work fine after restoring the sites. Until that is last Xmas. Same thing happened. Why? I still don't know. But by this time I had quite enough of it, and I was getting tired of Wordpress anyhow. To many updates, too many plugins, too complex, too slow. I wanted to go back to the early days of simple HTML, but then of course in a modern way... after all, we now have CSS3 and HTML5.

Lo and behold, as if ordered there fell a booklet in my inbox: "Static Site Generators" by "Brian Rinaldi". (Its free)

Nice enough booklet and a quick read. So static site builders eh? Yes that was just what I was looking for, thank you Brian! Since I am developing my sites on a mac, the choice was not all that difficult, Jekyll seems to be the bully on the block, so Jekyll it is.