Hack Days March 2019
Getting into SASS
Advanced CSS and Sass: Flexbox, Grid, Animations and More!
Mixins / Extends / Functions
Quick intro into mixins, extends and functions.
He did this using code pen, here is mine:
https://codepen.io/schuknight/pen/gERqXz
Hadn’t used or learnt about extends or functions before
SASS and NPM
In the course, he uses node and npm packages to get the sass compiling and to watch changes and set up live reloading.
My mac is old and I can’t remember how I installed node many moons ago. I think actaully I might have all 3 ways — brew, node installer and nvm.
And I had an old old version of node , which meant I had some headaches. Plus I didn’t read the warning messages and output from the installations carefully enough! Doh!
The quick run down is:
I had node v6.11.3 installed and as the default. I thought I had updated it and then tried to install node-sass which kept on coming up with errors.
Tried a bunch of stuff, then tried installing things with nvm and got an up to date version and removed the old versions, it then all worked!
For more details see Today I did and today I learnt — SASS and npm.
Once that was sorted then installed node-sass
npm install node-sass --save-dev
Added a script in package.json:
"scripts": {
"compile:sass": "node-sass sass/main.scss css/style.css -w"
},Installed live-server globally:
npm install live-server -g
Now can have one window that you run the script in:
npm run compile:sass
And another with the live-server:
live-server
SASS — Syntactically Awesome Style Sheets
Diving into more SASS in the course
https://sass-lang.com/ — is a CSS preprocessor
SASS Guidelines
CSS Architecture
https://sass-guidelin.es/#architecture
Architecting a CSS project is probably one of the most difficult things you will have to do in a project’s life. Keeping the architecture consistent and meaningful is even harder.
Fortunately, one of the main benefits of using a CSS preprocessor is having the ability to split the codebase over several files without impacting performance (like the
@importCSS directive would do). Thanks to Sass’s overload of the@importdirective, it is perfectly safe (and actually recommended) to use as many files as necessary in development, all compiled into a single stylesheet when going to production.
In the course, Jonas uses the 7–1 pattern.
7 folders:
base/components/layout/pages/themes/abstracts/vendors/
and one file:
main.scss
The 7–1 Pattern
sass-boilerplate — 7–1 pattern
Aesthetic Sass 1: Architecture and Style Organization
Using this might be over the top for a small project, or one page but good for large projects. And a good habit to get use to.
Basic Principles of Responsive Design and Layout Types
1. Fluid grid and layouts — %’s instead of px’s for all layout related lengths
2. Flexible / responsive images
3. Media queries
Float layouts? Flexbox? Or CSS grid? Will go over all of them.
Implementing a grid system
Things learnt along the way…
:not
https://css-tricks.com/almanac/selectors/n/not/
:not() CSS pseudo-class
/* Selects any element that is NOT a paragraph */:not(p) { color: blue;}
[attribute]
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
https://css-tricks.com/almanac/selectors/a/attribute/
Example in course, selectors all classes that start with col-
[class^=”col-”] {}
Can also do the links of :
/* <a> elements with a title attribute */a[title] { color: purple;}
Grid system:
Link to grid system — https://libbyschuknight.github.io/natours-site/grid.html
Building the About section
Think / Build / Architect
Use of utility classes, and have a _utilities.scss partial file
.u-center-text { text-align: center; }Using background-clip to create a gradient affect on text:
-webkit-background-clip: text;https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
Last demo here does something similar.
https://css-tricks.com/almanac/properties/b/background-clip/
Text example shows something similar as well.
Using transform and skew to get the text to do stuff.
Adding arrow symbol:
→see https://css-tricks.com/snippets/html/glyphs/
→ → → rightwards arrow u+2192 ISOnum alert(“\u2192”);Useful resources — http://codingheroes.io/resources/
Emmet!! https://emmet.io/
https://code.visualstudio.com/docs/editor/emmet — built into VSCode
CSS stuff
outline
https://developer.mozilla.org/en-US/docs/Web/CSS/outline
https://css-tricks.com/almanac/properties/o/outline/
outline-offset
https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset
https://css-tricks.com/almanac/properties/o/outline-offset/
transform
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform
https://css-tricks.com/almanac/properties/t/transform/
z-index
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
https://css-tricks.com/almanac/properties/z/z-index/
Project
This is the code https://github.com/libbyschuknight/natours-site
And the site https://libbyschuknight.github.io/natours-site/
A Medium helpful keyboard shortcut is if you want to make a code block you can use Command+ Option+6
that will look like this!!
# although the GitHub gists are nicer for bigger chucks of code :)Projects to do
In my last couple of posts I have mentioned project ideas I have had. Another one is making an exercise habit app — based of how a site I use called Precision Nutrition displays its habits. I really enjoyed using this and love the responsiveness.
