My Gitlab-hosted English-language working notes on Web design is fubar and so I must abandon the principle that this here will be a dear diary on life in general.
Truth be told I have very little of a life in general. A touch of OCD, perhaps.
In any event.
Thoughts of Watts and the Id of the grid.
And mostly news from the never-ending battle against hideous design dysfunction as shown above. This,
should not collapse into that other semi-monstrosity when you try to pick it up on your phone. or surgical-embedded cerebral interface.
The basics are correct: horizontal pancaking and some aspects of alignment.
But how about some padding-left instead of a one-column offset? And hamburger navigation is wanted and missing from this iteration of Modulr on Roots.
Above and below: Beauter CSS is a resounding success on my infernal machine.
Apologia Pro Bloggo Suo
I still have to ferret out that misplaced tab character that is preventing me from updating my tech notes in English.
Hugo does not throw an error but GitLab does. Go figure.
And so the admixture of technical observations and lamentations will continue here in this space officially set aside for life in general. No boring technobabble for amigos and família was the idea. But who really needs three blogs, come to think of it?
Above: A Beauter CSS hero page about the original Jumbo the Oliphant, a legendary attraction at Barnum & Bailey.
Gigalove to Watts
In life in general lately our Sambodian thoughts are ever with Watts as she pulls through cardiac surgery.
Watts because as the Paranhos clan grew up the Big News — Neuza, my mother-in-law and mother of little Neuzinha my loving wife — was always hyperconscious of the electrical bill and was prone to burst in on family members with unused bugigangas hooked to the grid and turned on unused with passionate cries of, «the watts, the watts!»
Above: a heroic side to Bootflat which along with Propeller, below, is one of several Bootstrap Frankenstein clones to mess around with these days.
Eletropaulo: Something Wicked Weird
And all I see is little dots
Some are smeared, some are spots
Feel like a murder but that’s alright
Somebody said there’s too much light
Pull down that shade and it’s alright
It’ll be over in a minute or two
And speaking of Talking Heads, «Electricity», something very odd has happened to me lately.
It was just the usual Avenue of the Owls street hassle at first.
A lightning bolt and a cascade of exploding transformers up and down the block and over to the park and a brief or not so brief blackout after.
This is liable to happen at the moment I write this, in fact.
AES Eletropaulo.
First World rates.
Third World Six Sigma.
But then when the infernal machine came back on?
All of a sudden the terminal emulator no longer displayed its usual context indicators!
As in «you are three levels down from the root of this project in the assets/css folder», with colors and labels and the like.
I have always used gnome-terminal in Arch Linux but after some goggling of the problem went on to try out other members of the family. Same difference.
There are many I know of that offer this feature under normal circumstances.
So what the hell happened? I hate having to type all those ls and ls ../ all the time in order to orient myself.
The oddest thing is that this highlighting and context information still works in Linux Mint, the other partition of the Bretonian artificial intelligence institute.
Keeping Out of Encrencas
My contribution to the everybody get behind Watts campaign is mainly to keep the dogs walked and feed myself as well — killing two birds with one stone by walking the meninas to the Sacolão supermarket for provisions — and just generally keeping out of trouble and mischief and general encrencas.
Apparently I have a reputation for encrencas and besteiras and even asneiras.
But I am perfectly happy here at the keyboard of the infernal machine this afternoon, not making any mess aside from filling the overflowing ashtray on my left-hand side.
Apocalypse Then
I have recently tested and approved two new site generators, Flutterby and Bolt.
Both work well with W3.CSS which in turn is on very good terms with my CSS-learning brain, which has lately turned to the grokking of Bulma and its byootiful practical sister frameworks known collectively as Bulmaswatch.
As in very like Bootswatch.
Above, a modest sample of the United theme as Bulmafied. I forked the project and want to catch up on theming using it. Or let us be honest. To learn theming from practically zero on it.
After all, I learned what little I knew of CSS when we were all still awaiting the Y2K apocalypse, and now there are Less and Sass and Stylus.
I learned CSS ought-ought-one while working on the Morgan Stanley Y2K team that year, in fact.
Or rather, I was working there mainly helping to implement a monster editorial to infographical redesign of all corporate communication, from spreadsheets and pitch books to Web sites, integrated and branded and very expensive and beautiful by the standards of Tufte.
I loved that job. It still inspires me today. Even though it gave me a nasty case of repetitive stress syndrome. Put me in a brace for months.
It still inspires me to go back and study design some more, for one thing.
And boy, did the Apocalypse Now team order in a lot of pizza that New Year.
The Id of the Grid
But all things can tempt me from this craft of annotating CSS experiments.
Late and soon.
Lately I have been trying to gather together and organize practical lessons in the floateds and pulleds and offsets and nesteds of the various grid models and flexing boxes out there to be coded up by the likes of me.
Stack to horizontal in Semantic UI and Bootstrap I feel fairly comfortable with, but the other day, for example, I had a sidebar navigation menu in Foundation 6 that I wanted to hide from Breakpoint X on down while the other three columns collapsed in pancake fashion like the floors of a skyscraper.
Sorry, bad simile. Still have those fingerprints on my imagination.
And I wanted the top navbar to collapse into a working hamburger, for good measure.
The scenario was grim and ugly.
The thing is that the sidebar is a member of the same row and it naturally wants to stack on top of the other members.
But there are visibility classes in Foundation as there are in its brethren, so let us try that out.
And pimba! ul.menu.vertical.icon-top.show-for-landscape hides the sidebar menu under those conditions. Good enough for jazz for now.for the hamburger
And now for the hamburger. Okay, here we go:
By default, the two sections of a top bar will stack on top of each other on small screens. This can be changed by adding the class
.stacked-for-mediumor.stacked for large.
Yes, yes, and but, but. A reorientation of top navigation from horizontal to vertical is described but this is not quite what I meant.
No, wait, I see. The section under “responsive toggle.” I will get back to that.
Still, we have made some progress from the original state of things, which was as follows.
Setting the breakpoint for medium screens on up.
Mark for additional study and proceed to Romulan home world.
Fashioning Fundamentalism
Fundament CSS is one of those funky little frameworks I keep coming across in my eternal quest for junk to tinker with. Not that it is junk. It reminds me of Schema and Picnic, below.
In the latter case I have almost created the behavior I sought. I only need to create a fixed width for the vertical menu, or else hide it.
And so but as to Fundament.
The grid and navigation are pretty standard — in the latter case, the good old inline pill method. I stuck in big fat icons just to amuse myself.
The stack to horizontal is just what the doctor ordered, pretty much out of the box. What can we do about mending the top navigation?
I hereby assign myself this homework which is not covered in the docs.
Pocus Focus
A really successful learning experience lately was Hocus Pocus CSS. When Bootstrap and Foundation are too heavy a burden to carry they say.
Let us not dwell on it too much, but one significant conquest was a hand-rolled mobile nav with collapsed menu items.
Behold, the modest march of progress:
What is the Point CSS?
Point CSS gave me enough trouble that I decided it might be educational to sort out. The flex grid is a bit different than I am used to. Not much progress on that front. Take a rain check. It rains like mad here in the antipodean tropics.
Newly Minted
In my running notes I describe CSS Mint as “a waste of time” but I am not so certain that is true.
I often only see the sense of things the second time around. Shelve for later inspection but note: not responsive out of the box.
And so on and so forth and blábláblá.
Today I am futzing around with Propeller and with Penguin on the Pug-powerful Bolt while awaiting the latest news of Watts.
Eating lots of cold cuts and ice cream during this temporary return to bachelorhood. Microwave lasagna. Brazilian civilization is not quite as microwave-dependent as its gringo counterpart.
Setting up Penguin nearly drove me mad as in bonkers.
And Neuza was asking me, Porquê tantos xingamentos?
Ou seja, why was I cussing so frequently and with such unbridled passion? Hour after hour?
It turns out that the sticking point in the getting started process was a class and wrapper called text — as in, in Pug, .text.
You have to wrap your plain old HTML text tags in this redundant motherfucker or your text will not render properly.
Since the first sign of a new stylesheet taking hold is a shift in elements like font and padding, you tend to jump to the conclusion: the fucking thing just will not werk.
Moral of the story: read the typography section of your CSS framework.
In the end if you are patient it just might work out after all.
Like that. And this.
And the other.
Materialize, Mr. Scott
Experiments in Materialize have also been educational lately, if not spectacular.
I find Material Design somewhat Pug-ugly — it reminds me of an eternal Art Deco waiting room for painful dentistry of the soul.
But it is well-documented, which is all I really need. Sussing it all from comments in the source code? Maybe by next Xmas with applied study. This is why I cannot grok Axis CSS and the whole Bourboun Neat and Bitters with Refill experience.
And For the Time Being
And there you have it: The good, the bad and the Pug-powered ugly. For the time being.
For the time being — Man is the Time Being according to Heidegger — let me build your bookstore or architectural practice a landing-page driven heroic site in Bulmaswatch or Urubu or the lovely Light or Uptown or even good old Minimal Mistakes.
I can promise you a thing of beauty that you will enjoy forever.
On your smart phone even, as above.
So let there be Light CSS (belowing, collapsing as planned) and let Dylan plug into it. Now and forever. Everybody must get stoned.
