Gavnosis

personal web site

Wednesday Dec 30, 2020

I don’t know what brought it to mind, but after wondering about shorthand, I did a bit of reading about Pitmann, Gregg and then the new kid (1968 new, ha ha) Teeline.

Read more »

Wednesday Oct 17, 2018

Okay, I’ve been reading about Bulma, and it looks nice (on first inspection), and just seems less _cluttered_than Bootstrap or Foundation somehow.

And then the installation gives options for SASS (all Bulma produces is a single CSS file, which my little brain is very happy with)

Read more »

Wednesday Mar 14, 2018

default!

The cascade becomes complicated with sass partials, and this article explains it very nicely from Stack Overflow

If you want to overwrite default Bootstrap variables, you need to import your file before the actual Bootstrap variable partial. It’s because all their variables have !default flag. It means that if a variable has already been assigned to, the next time you try to re-assign it, it will ignore that (unless it didn’t have a variable assigned in the first place).

For example, let’s say that in Bootstrap’s _variables.scss partial there is:

$brand-primary: #555555 !default;

…then in the next file that you import after, you assign something else to $brand-primary it will be ignored – even if you specify the !default flag again. So that’s why you need to overwrite variable before Bootstrap does this.

e.g.

// custom-bootstap.scss contents:
// Core variables and mixins
@import "custom/bootstrap/variables"; // custom/overwritten variables
@import "bootstrap/variables";
@import "bootstrap/mixins";
and inside custom/bootstrap/variables:
`$brand-primary: #000000!default;`

Partial order: The 7-1 Pattern

This is from SASS Guidelines

Back to architecture, shall we? I usually go with what I call the 7-1 pattern: 7 folders, 1 file. Basically, you have all your partials stuffed into 7 different folders, and a single file at the root level (usually named main.scss) which imports them all to be compiled into a CSS stylesheet.

base/
components/
layout/
pages/
themes/
abstracts/
vendors/

And of course:

main.scss

And is in turn referred to at Scotch

Sunday Sep 17, 2017

Bootstrap has _custom.scss file for overriding of default variables in /scss/_variables.scss. Copy and paste from there into the _custom.scss file, modify the values, and recompile your Sass to change our default values.

Okay, so it’s back to Sass… so the question is whether I should have my own custom CSS elsewhere, or just lump it in this file? I guess I should try it and see what the final compiled version looks like.

The massive benefit Bootstrap (or Foundation) brings to me is having a layout tool… without having to grapple with position: relative and float and all that sort of thing, and which I first read about in Eric Meyers’ On CSS book which I bought 15 years ago!

<div class = "row">
  <div class="col-sm-4">Smaller one</div>
  <div class="col-sm-8">Wider one <div>
</div>

The other thing is to be able to create navigation without resorting to my last-century techniques of sliding doors (Which I read about at A List Apart (back in 2003), and was ever so pleased when I used it to implement it with beautiful glass tabs I drew using Fireworks

Since I last did a lot of this, HTML5 is widely adopted (along with CSS3), so navigation lives between actual nav tags (or can do, anyway):

Centering Content

Is it as simple as having two rows in one container?