29 Apr 2017 • on bob dylan Jekyll markdown hello world front-end boilerplate site generator CSS frameworks Sass Foundation Yeoman Roots Express JS Harp JS Basis Blaze Bulma Concise CSS Potato CSS Basis CSS Cirrus CSS Beauter CSS W3.css Jade Pug GitHub GitLab Axis CSS Caramel CSS

In the Beco With the Lápide Blues

Lápide is Sambodian for tombstone.

Tombstone is investment bankerese for those little trophies ginned up and distributed to the team to celebrate executed deals.

I like to use the term for Hello World pages.

I am busy these days making lápide and landing pages — above — as well as kitchen-sink pages for some of the more commonly used CSS frameworks. And some not so well known. I collect them like baseball cards.

I have a good collection of Semantic UI tombstones that I have been turning into kitchen sinks, for example.

A Semantic UI page with responsive side navigation running on Brunch.

I organize my work making lists of homework, using those icon headers I like so much, and then filling in the blanks. Cards, panels, segments, messages.

But as to brunch.

Morning in Sambodia

This morning I make the coffee and feed the menina-dogs and update Arch Linux with sudo pacman -Syu and avoid the news, even though we are witnessing what might be a historic general strike here in Sambodia.

Or an underwhelming one. That is the question

The social security reform law passed by a government of dubious legitimacy is union- and by extension Lula-busting to the nth dgree.

Fora Temer!

But I am more interested in building tombstone pages. For my portfolio. In theory. What can one gringo do? Not even a vote.

I am in the alley with the tombstone blues ….

A Technical Kvetch

And oh, how I dislike Jekyll and Ruby in general.

As I try to narrow down a bug in my English-language GitLab Web log I turn to this here neglected Jeyll-powered writing space for writing about life in general outside my obsessive-compulsive hacking of systems for transforming words into type.

This here is the last post that got pushed successfully. It is more than a little feverish, befitting the state of my Sambodian health at the time.

But turning to Jekyll, the platform for this writing space.

How did I know that after the failure of bundle exec jekyll serve to address the verbosity of errors from just plain jekyll serve I would have to perform yet another bundle install that likewise would fail repeatedly until after I messed around with Gemfile.lock and rbenv rehash and what not in order to fix a foobarred dependency?

I just knew. All too familiar. And now it is throwing a build error. Ah, I see. Incorrectly formatted front matter.

But as to the creation of more sophisticated Hello World pages, or tombstones, I have made a lot of progress since that last post, I think.

Above, Foundation 6 boilerplate au Bretônio.

Your mission, should you choose to accept it: Create a responsive grid that collapses at the appropriate point while doing a Shift-Ctl-I on Chrome and some Alt-F8 adjustments from Arch.

Here is Beauter CSS emulating a smartphone app.

A screen-capture sampling of my other work over the Sambodian summer — you probably call it winter — is here.

I really need to crank out some actual work samples, however.

Hard Landings

So lately I have been working on landing pages and hero units and responsive navigation, after that case of rocking pneumonia I survived.

Learning to code those up from scratch, and uploading screen grabs to my GitHub repo in order to keep track of what I have been up to.

Above, a small-screen rendering of a theme for Blaze CSS, one of many frameworks I have built boilerplate for lately.

Below, a predesigned hero page for Bulma with easy adaptations — by far the most pleasing discovery of recent months.

I have not tried it yet with a background image. but it should work. I need a new wallpaper image. Change this up a bit. All of my card and panel elements reature either Bob Dylan or Donald Trump for example.

I like Duchamp-like engravings of 19th Century printing presses as well.

Roots Rock Reggae

But I work with a number of frameworks. A large number. Maybe too large for comfortable sanity although I feel just fine more or less.

Here are the contents of my Roots folder, for example.

Roots is a great little static site generator. I just cannot seem to get a handle on its native stylesheet, called Axis. I just cannot grok the docs.

I also use Harp and Express for day to day culture hacking and jacking. And quite a few others to a lesser degree. I like Yeogurt for example.

Never had much luck with Middleman or AweStruct, on the other hand. In general I prefer Pug to coding up all that HTML and trying to keep track of the tags that need closing and when.

You can find other examples of recent tombstones on my Portuguese-Paraguaio notebook which for some strange reason did succeed at executing the git push -u origin master command.

Probably just a tab character out of place in some buried file.

I Dream of Geany

Geany has been my code editor of choice lately because Gedit constantly throws this deeply annoying GTK+ error.

But this post is written in Ghostwriter.

Itself not a wholly satisfactory solution.

What is it with modern designers and their fondness for the rendering of text and the freaking cursor in quasi-invisible light gray?

And how do you freaking activate the Markdown preview on Geany? And how to stop it from pasting upon left clicks? That really annoys.

I gave Atom another try — I appreciate the way it detaches from the terminal session so that I can get that browser sync effect more easily — but as many others have complained at a certain point it just stops responding when called upon. Reinstall and nothing doing.

Tombstone Blueprints

Now consider the following.

It does not look like much, but it represents a successfully cooked homemade responsive topbar navigation.

This for example is Caramel for your widescreen smart TV or Bloomberg box.

And this is Caramel CSS for your relatively miniscule reputedly intelligent telephone. On the left with the Chrome console on the right.

The well-received Concise CSS on the other hand is a work in progress for me.

I still do not yet understand its grid system. Set the following to render columns to twelve wide when viewing on a small, portrait-oriented screen. Not like this.

But more like the following!

By assigning the correct grid value to the relevant viewport size or breakpoint as they say.

Superheroics

But I believe I mentioned heroics and landing pages and the like — mostly serving as points of entry at the root of your primary URL. I have multiplied examples and gotten pretty good at them lately. Home cooked like the pure blue crank of Walter White..

That is Basis — modest but a decent source of configurable pre-coded navigation.

Above, an early Pug-ugly Basis-based splash page with Greek Lorem Ipsum.

And here is Bijou, a little-known but groovy SASS framework.

And a more simple example, one of my first efforts, but still full-page and vertical justified under the hood.

The name of the game is to author working equivalents to the splash page for Minimal Mistakes.

Another excellent model to copy: Bootup.

And so to that end, Cirrus, below, is also worth the effort of reading the comments in the source code — a good skill to learn, along with Ctl-U in Google Chrome and translating the source code to Pug.

Babble, Babble On

Examples of my tombstone period, as future art historians will call it, can be multiplied.

I have a whole series based on the Tower of Babel of Breugel the Elder — which also serves as my Arch Linux desktop wallpaper.

Beauter responsive horizontal navigation works out of the box for example.

<img=”https://raw.githubusercontent.com/bretonio/bretonio.github.io/80716472799db98769003ffa76befe2f8ad5d3d5/images/100px.gbeauternumtelephonequalquer.png” style=”width:450px;”>

And then in the do it yourself department, I was able to build a working responsive top nav for the very modest Potato CSS.

It may not look like much but it represents a moment of minor technical enlightenment.

Building a landing page — página de pouso — for Light CSS was interesting.

Light has its own custom animated navigation that works like a modal — a component I am studying with the help of W3.CSS.

Click the ellipses and the menu bar items file out like a jury.

And here is a tombstone with the modest Furtive CSS.

That tombstone is waiting for its responsive navigation. Thank you for reminding me.

And a landing page with Blaze CSS except that it still needs the button or nav that takes you to an inside page.

Here is a second run at a Blaze tombstone, this time with navigation and a set-up in Harp rather than Roots.

A harp init harp-with-blaze project with Less is simpler for the purposes of creating my own partials and other aspects of layout. Other templating languages are still beyond my technical expertise.

So: Make a folder called partials and do touch partials/__header.jade and touch/partials/__footer.jade and add the extends statements and Bob is your uncle.

And a tablet and smartphone version of the Blaze-based boilerplate

And so many other tombstones to be engraved.

I could spend a solid month coding up kitchen sink pages with W3.css alone.

<img=”https://raw.githubusercontent.com/bretonio/bretonio.github.io/80716472799db98769003ffa76befe2f8ad5d3d5/images/100px.w3csskitchencinq.png” style=”width:450px”>

Maybe that is what I should do.

The Love Song of Jeremy Hillary Boob

So little time so much to code up in Pug — or consult HTML2Jade about.

For example, what am I working on now?

I try to get in a couple of hours with Semantic UI or Foundation or some variant of Material Design or other more widely used frameworks a day.

But then I give myself leeway to digress.

My excuse is that I am studying some aspect of design that holds true across platforms. I should not just learn Bootstrap and Semantic. I should be able to code up their functions from scratch more or less.

An excellent resource for that purpose is W3.CSS.

<img=”” style=”width:400px;”>

I have several kitchen-sink pages going with this stylesheet at the moment.

But what I really enjoy is approaching a new stylesheet and seeing what I can make of it.

Vital CSS, for example, received home-cooked responsive top navigation and a sort of an Art Deco typeface.

And a collapsed version with Font Awesome java jive and my logo.

Engenho Novo, by the way — my fictitious offshore investment trust — refers to a giddy Bahian song made popular by Gilberto Gil after an earlier recording by Bidu Sayão.

An inland town is abuzz with delight when the new sugarcane mill arrives.

Bote a roda pra rodar

«Get that wheel a-wheeling!»

I need to add navigation as well for the Uptown girl living in an uptown world.

Uptown has a “zero state” element similar to the “tabula rasa” in Picnic CSS.

Spudnik Unbound

Now, Potato CSS may not look like much but it was the first framework I got to serve up the items of the collapsed menu when clicking the hamburger.

The first homemade effort, I mean.

Other recent discoveries include the fabulous Beauter and the beautiful out of the box Furatto.

The Cathar Cross and the biohazard symbol are personal signatures of mine. Accept only the authentic @bretonio.

Beauter is out of the box responsive. I like that.

And it presents you with collapsed vertical navigation in place of the horizontal on your intelligent telephony device.

Cirrus is a very promising framework as well.

I just need to figure out how to hide selected navigation elements according to the breakpoints. Items in the icon menu, for example.

I know how to do this in Semantic, so how different can it be?

Point Break: Surfing the Grid

And let us close with Pavilion, which I found challenging at first.

Here, I set a column configuration in the grid to yield unequal columns at a certain breakpoint, on purpose, just to get my head around how that works, exactly.

The result:

It resolves to an asymmetric arrangement of the columns as I asked on the large screen.On smaller screens, it evens out or it stacks, as required. The top navigation discreetly disappears but I would like to choose which icons can appear or hidden. This is doable.

On your desktop or laptop or landscape tablet — who really uses tablet computers anyway? — with an icon menu and a stylish font — Ubuntu Condensed, I think — it looks so very nice.

Now to hide and show navbar items as desired or give it a collapsing menu.

I have also yet to reverse engineer the topbar navigation.

You May Grid When Ready

And more.

Mini is helping me with the whole responsive grid configuration question, for example.

It is crazy well documented,

I use Yeogurt a fair amount as well to create my Sass boilerplate. If I ever actually master Sass.

It is easy to drop stylesheets into a Yeogurt-generated scaffold, which has Pug-Jade baked in, like all the generators I use. I hate writing HTML.

Here we try out a mobile-first version of Milligram with home-cooked navigation.

But nothing beats Bulma.

It is just that I cannot remember the name of the Yeoman generator that produced this Bulma-friendly scaffold.

It will come back to me.

It must be in the Bulma-Projects folder.

Colophon

And these are the novidades from the Sambodian autumn where I sit for hours before the infernal machine.

Honi soit qui mal y pense.