CSS & Sass on Aamnah - Frontend Web Developer

CSS variables (custom properties) vs. Sass variables

Fri, 18 Nov 2022 12:38:06 +0500

tl;dr

Sass variables

can not be manipulated in JavaScript
do not work for media query values
sass variables, when re-assigned values, do not update all instances of that variable with the new value. if a value has been assigned, and used, 3 times before being assigned a 4th time, you will have 4 different values for the same $variable. (Example code below referenced from the Sass docs)

CSS variables

do not work in Sass color functions

CSS custom properties are much more powerful than pre-processor ones, as they can be changed at runtime with javascript and be used in all sorts of awesome ways, but when you’re using them as regular variables, pre-processor variables are always better for compatibility. ref

Styling checkboxes and radio

Wed, 12 Aug 2020 00:00:00 +0500

You can either style the ::after of input or the ::before of label
It has to be able to show styles when we Tab to the input, so i can’t do display: none on the original radio or checkbox

With ::before pattern i can’t do a this design

By default you can’t really style the checkbox and radio inputs.. What you can do is create your own.

Advanced CSS Tips

Thu, 25 Jul 2019 21:46:50 +0500

You can target empty elemets with :empty pseudo-class. Not empty elements can targeted with :not(:empty)
calc() and viewport units can give you a fully responsive deisgn in about 10 lines
You can reset values with unset. For example, background: unset and it’ll unset that style. Not supported in IE11 though

`*-of-type` pseudo-class

1p:first-of-type {} /* first paragraph element */
2img:last-of-type {} /* last image element */
3blockquote:only-of-type {} /* first blockquote element */
4article p:nth-of-type(odd) {} /* every odd element (1st, 3rd, 5th ..)*/
5article p:nth-of-type(3n) {} /* every 3rd pargraph element */
6article p:nth-of-type(4n+3) {} /* every 4th paragraph element starting at the third para*/

`columns`

 1nav {
 2	/*
 3	column-count: 4;
 4	column-wdith: 150px;
 5	*/
 6	columns: 4 150px; /* render up to 4 columns that are at least 150px wide */
 7	coumn-gap: 3rem /* gutter */
 8	column-rule: 1px dashed #ccc; /* the border between columns */
 9}
10
11nav h2 {
12	column-span: all /* take up all of the column width, break after */
13}

column-span isn’t supported in Firefox for Android
column-fill: auto beaks responsive design as it requires setting a fixed height

Justifying items to the right in Flexbox

Thu, 25 Jul 2019 17:31:45 +0500

There appears to be no way of justifying a single flex-item to the right
There is justify-content, which juystifies all flex items inside a container
There is a CSS property called justify-self which can take values such as start and end, but it is ignored in flexbox and table cell layouts
You can’t float inside a flex container because the property does not apply to flex boxes
If two flex items are on the same level, you can use justify-content: space-between to move one to the left and the other to the right
justify-content: space-between only works if there is enough space to move around items, meaning if it is not working for you, check the width of the parent container

Issues with making mobile screens take full height `100vh`

Fri, 21 Dec 2018 00:00:00 +0500

100vh does not take into account the browser bar or the navigation menu.
On iOS Safari and Google Chrome, the viewport will not resize in response to the URL being shown or hidden. This is a compromise by design, to avoid page jarring, reflows and relayout.

The workaround

Calculate the window’s innerHeight, and use that as a CSS variable instead of vh

Getting started with CSS Flexbox

Sat, 04 Nov 2017 00:00:00 +0500

tl;dr

The widths and heights of flexboxes vary to adapt to the display space
The display order of flex boxes is independant of their order in the source code
Margins of adjacent flex items do not collapse
Main axis = vertical = columns
Cross axis = horizontal = rows
All flex items on a line are equal height by default (the default for axis properties like justify-content, align-content and align-items etc. is stretch), and take the width of the content inside
All flex items stay on the same line by default until unless you define flex-wrap: wrap. Without it, it’ll overflow, but not wrap

Why Flexbox

Why not percentages? Percentages are explicit dimensions, you’re telling the browser one fix percentage. The button is always going to be 10%, no matter how big your TV is. Flexbox sizes elements by the size of their content. So the button will be the size of it’s text. You can decide an initial size and then you can decide whether it should grow (flex: auto) or shrink (flex: none)

Hands-on with CSS Grid Layout

Thu, 28 Sep 2017 00:00:00 +0500

Defining a grid is as simple as adding layout: grid to an element.

1.wrapper {
2  display: grid;
3}

Defining templates

Rows and columns

1grid-template-columns: 1fr 1fr 1fr 1fr;
2grid-template-rows: auto 300px;

Areas

1grid-template-areas: 
2  "a a a a"
3  "b c d e"
4  "b c d e"
5  "f f f f";

1grid-template-areas:
2  "header header header header"
3  "nav main main sidebar";

Shorthand video

1grid-template: auto 300px / 1fr 1fr 1fr 1fr
2
3grid-template: 
4  "header header header header" auto // this is the first row, auto (size) is default, so it's okay if you don't mention it.
5  "nav main main sidebar" 300px // second row, the size for which is going to be 300px
6  / 1fr 1fr 1fr 1fr; // and the columns come at the end

the `fr` unit

Using fr avoids margin and padding issues. With % and em etc. it becomes a math equation when calculating grid-gap. If you used fr unit, it’ll automatically calculate both column and gutter sizes and adjust the size of the columns accordingly, plus there will be no bleeding gaps at the end either

See the Pen CSS Grid by example - 3A (fr vs. other units) by Aamnah Akram (@aamnah).

Sass - Beginner to Advanced in 30 Minutes

Sun, 02 Apr 2017 00:00:00 +0500

node-sass

1npm i -D node-sass

add a script to package.json

1"start": "node-sass -o css scss"

-o is for output folder, which in our case is css.

partials

prepend files with an underscore but import them without the underscore or the file extension
CSS imports create additional resource requests, and they don’t get compiled
Sass imports get compiled into one file
Import order matters

Partials let you compile multiple files into one and organize your code better.

Making a site presentable in 7 lines of code

Sat, 25 Feb 2017 00:00:01 +0500

With just 7 CSS declarations you can make a site very presentable with easy to read typography.

 1body {
 2	margin: 40px auto;
 3	max-width: 650px;
 4	line-height: 1.6;
 5	font-size: 18px;
 6	color: #444;
 7	padding: 0 10px
 8}
 9h1, h2, h3 { 
10  line-height:1.2
11}

To go one step further, you can add media queries

1@media print {
2  body {
3    max-width: none
4    }
5}

CSS Style Notes

Sat, 25 Feb 2017 00:00:00 +0500

Typography

Responsive Typography

Use calc and vw to your advantage. calc let’s you easily calculate values based on unknown variables like percentages and ems and vw is the width of the viewport at any given time. One viewport unit is 1% (1/100th) of the viewport size.

1body {
2  font-size: calc(14px + .3vw);
3}

Here 14px is going to be the smallest font size and it’s going to increase with the width of the viewport (screen).

How to create a Grid system in Sass

Tue, 04 Aug 2015 00:00:00 +0500

Making your own grid system is also pretty straightforward in Sass. The following example is a Sass @mixin from David Demaree’s article on A List Apart which takes one argument — $span — which will be passed into our @mixin as a variable:

1$column-width: 21em;
2$gutter: 1.5em;
3
4@mixin grid($span) {
5  float: left;
6  margin-right: $gutter;
7  margin-bottom: $gutter;
8  width: ($column-width * $span) + ($gutter * ($span - 1));
9}

And then later that mixin can be used with containers using simple @include:

 1header {
 2  @include grid(3);
 3}
 4
 5article {
 6  @include grid(2);
 7}
 8
 9aside {
10  @include grid(1);
11  margin-right: 0;
12}

To make this a bit easier to understand, our grid (layout) would now look like this when containers are laid on top of it:

Sass - Mixins vs. Extend

Thu, 09 Apr 2015 00:00:00 +0500

source

Sass Function to Auto-Convert Pixels to Ems

Sat, 17 Jan 2015 00:00:00 +0500

Function

Add this to your Sass (functions) file. It is recommended that you keep a separate functions.scss file and @import 'functions'; at the top of your main/global css file. This way it keeps things organized. OR you could just add this function to the top of your main scss file.

1@function pem($pixels) {
2  @return #{$pixels/16.0}em
3}

Usage

Using scss syntax:

1@media (min-width: pem(768)) {
2  ...
3}

When compiled to plain CSS and sent to the browser, we get:

CSS & Sass on Aamnah - Frontend Web Developer

CSS variables (custom properties) vs. Sass variables

Sass variables

CSS variables

Styling checkboxes and radio

Advanced CSS Tips

`*-of-type` pseudo-class

`columns`

Links

Justifying items to the right in Flexbox

Links

Issues with making mobile screens take full height `100vh`

The workaround

Getting started with CSS Flexbox

tl;dr

Why Flexbox

Hands-on with CSS Grid Layout

Defining templates

the `fr` unit

Sass - Beginner to Advanced in 30 Minutes

node-sass

partials

Making a site presentable in 7 lines of code

Links

CSS Style Notes

Typography

Responsive Typography

How to create a Grid system in Sass

Sass - Mixins vs. Extend

Sass Function to Auto-Convert Pixels to Ems

Function

Usage

CSS & Sass on Aamnah - Frontend Web Developer

CSS variables (custom properties) vs. Sass variables

Sass variables

CSS variables

Styling checkboxes and radio

Advanced CSS Tips

*-of-type pseudo-class

columns

Links

Justifying items to the right in Flexbox

Links

Issues with making mobile screens take full height `100vh`

The workaround

Getting started with CSS Flexbox

tl;dr

Why Flexbox

Hands-on with CSS Grid Layout

Defining templates

the fr unit

Sass - Beginner to Advanced in 30 Minutes

node-sass

partials

Making a site presentable in 7 lines of code

Links

CSS Style Notes

Typography

Responsive Typography

How to create a Grid system in Sass

Sass - Mixins vs. Extend

Sass Function to Auto-Convert Pixels to Ems

Function

Usage

`*-of-type` pseudo-class

`columns`

the `fr` unit