1 CSS Bootcamp Notes

1.1 Introduction

  • Presentation rules for HTML
  • HTML and CSS are parsed by rendering engines
    Version Year Introduced
    CSS 1 1996
    CSS 2 1998
    CSS 3 2017

1.3 HTML

  • Used for content
  • Closing and Self-closing tags
  • Semantic HTML
    • SEO
    • Accessibility
    • Using div for everything loses all semantics
    • Meaningful for other people
  • Read about tags - https://tutorialspoint.com/html
  • W3C validator to check HTML

1.4 Three ways to apply CSS to HTML

  • inline CSS in HTML (style attribute)
  • internal CSS in the <head> tag (style tag)
  • external .css file (included using link tag)

1.5 Syntax

  • Selectors
    • tag
      • h1
    • id (#)
      • #someId
    • class (.)
      • .container
    • pseudo class
      • .title::after
      • .title::before
    • *
      • wildcard selector which applies to all elements
  • Declarations
    • Property: Value
  • It is not recommended to use id selectors too much since it makes the rule too specific losing out on the cascading nature of CSS.
  • Exercise: https://flukeout.github.io/

1.6 Types of elements

  • Elements are of two types
    • block-level elements
    • inline elements
  • To make block elements inline
    • display: 'inline'
    • display: 'inline-block'

1.7 Reset

  • Every browser comes with a user-agent stylesheet which might not suit your requirements.
  • Apply reset.css first and then apply your CSS on top of it
  • normalize.css is another one (probably better)

1.8 Floats

  • Float aligns block-level elements
  • For property float, only left, right and none are allowed values

1.8.1 Problems with floats

  • Zero-height container problem
  • Use clear property for this
    • This is commonly called clearfix

1.9 Box model

  • content
  • padding
  • border
  • margin

1.9.1 box-sizing

  • border-box
  • content-box

1.9.2 Margin collapse

  • When the vertical margins of two elements overlap, the maximum value of the two will be used
  • This only happens with vertical margins, not horizontal margins

1.10 Specificity

  • inline styles -> ID -> classes -> tags
  • 1 point for each
  • more specific => more likelihood of the style being chosen
  • !important overrides all specificity

1.11 Overflow

  • set on the parent of the overflowing element
  • values: auto, scroll
  • auto doesn't add a scroll bar if the element doesn't overflow, but scroll always does

1.12 Positioning

  • Properties: static, left, right, top, bottom
  • position: relative: Move an item relative to its original position
  • position: fixed
    • Based on view port, not window
  • Z index
    • used for stacking overlapping elements
    • higher the Z index, the higher up it is stacked

1.13 Typography

  • Two CSS properties
    • font
    • text

1.13.1 font

  • Values: font-style font-variant font-weight font-size/line-height font-family
  • sans-serif is the default font in most browsers
    • Arial
    • Verdana

1.13.2 text

  • text-indent
  • letter-spacing
  • line-height

1.13.3 font stacks

  • List of fonts provided as fallbacks to each other
  • font-family property is used for this

1.13.4 font file types

  • woff, otf, ttf, svg, eot

1.13.5 font-face

  • Define your own font

1.14 CSS Units, Colors & Functions

1.14.1 Units

  1. Absolute
    • cm, mm, in, px, pt, pc
  2. Relative
    • em, rem
      • em is relative to parent
      • rem is relative to the root element's font size, usually <html>
    • vw, vh, vmin, vmax
      • Based on view port
      • viewport width, height, min, max
    • ex, ch
    • %
    • unitless
      • line-height, margins

1.14.2 Colors

  • name, #, rgba, hsla
    • a in rgba/hsla is opacity

1.14.3 Functions

  • calc(90% - 10px)
  • linear-gradient(to left, teal, marine)

1.15 Responsive Layout

1.15.1 Using relative sizes for grid elements

  • Use percentages instead of pixels
  • Percentage is calculated based on the first parent element which has fixed width

1.15.2 MediaQueries

  • Setting the Viewport 
<meta name="viewport" content="width-device-width, initial-scale=1.0">
  • Syntax 
@media not|only <media type> operator <expression> operator <expression>
{ some: "css goes here" }
  • media types: all, print and screen
  • operators: and or not
  • Don't mix up min-width and max-width
  1. Ways of writing media queries
    • <link> tag with "media" attribute
    • @media in CSS
    • @import rule in CSS
  2. Examples
    • Print media query for formatting printed documents

1.15.3 Breakpoints

  • Major breakpoints: specific device widths of popular devices
  • Minor breakpoints: based on content, used for minor adjustments

1.15.4 Mobile first and Desktop first

  • Uses the same CSS for both, based on min-width and max-width media queries

1.15.5 Responsive vs Adaptive design

  • continuous vs discrete
  • adaptive design can give a jittery experience

1.16 Animation

  • Moving an element around in a controlled manner
  • To attract the attention of the user
  • Change shapes, colors, positions etc.

1.16.1 Browser rendering pipeline

  1. Javascript
  2. Style calculations
  3. Layout
    • positioning
  4. Paint
    • color changes etc.
  5. Composite
    • things like opacity

1.16.2 Transitions

  • Triggered when a property changes 
.box {
    /* The transition should take 1s to complete */
    transition: transform 1s;
}
.box:active {
    /* Move by 100px to the left */
    transform: translateX(100px);
}
  • transition-property: all, height, width, transform, cssproperty
  • transition-duration
  • transition-delay
    • useful for chain of animations
    • delay before starting the transition
  • transition-timing-function
  • transition properties
    • transform
    • rotate
    • scale
    • skew
    • matrix

1.16.3 Keyframes

  • @keyframes
    • from
    • to
  • animation
    • name
    • duration
    • iteration-count
    • direction
    • fill-mode
    • play-state
  • animation-fill-mode
  • animation-play-state
    • paused | running | initial | inherit

1.16.4 Comparison

  • Use transitions for user events
  • Things like loaders and spinner are good with keyframes

1.16.5 Browser Performance Rendering

  • transforms (only 3D) go to GPU by default
  • positional changes and 2D transforms use CPU

1.16.6 Perspective

  • value which specifies where the element is based on where it's looked from
  • perspective-origin
    • where you're looking at the object from

1.17 Flexbox

  • fewer mediaqueries, less positioning code
  • display: flex
  • Two key things
    • flex container
    • flex items
  • main axis and cross axis
  • flex-direction: column, column-reverse
    • column-reverse puts elements in reverse order
  • flex-wrap: nowrap, wrap, wrap-reverse
    • wrap-reverse wrap additional elements above the current row
  • justify-content
    • flex-start
    • flex-end
    • center
    • space-between
    • space-around
    • space-evenly
  • align-items
    • does the same things as justify-content on cross axis
    • flex-start, flex-end, stretch, center, baseline
  • align-content (only if parent flex has wrap)
    • flex-start
    • flex-end
    • center
    • stretch
    • space-between
  • order
    • change one flex item's position
    • other items will adjust accordingly
    • order is 0 by default
    • first is order: -1
    • last is order: 1
  • flex-grow
    • answers the question, how to manage the remaining white space?
    • takes index of the element (starts with 1)
    • flex-grow: 1, 2, 50% (on container)
    • flex-grow: 1; (on item)
  • flex-basis
    • minimum size of children
    • examples
      • flex-basis: auto;
      • flex-basis: 80px;
  • align
    • align-self: flex-start;
    • align-self: auto;
  • Exercise: https://flexboxfroggy.com

1.18 CSS Grid

  • a 2-dimensional grid as compared to the 1-dimensional Flexbox
  • comparable to Bootstrap's container-fluid 
<div class="container">
   <div class="item">
...
  • display: grid;
  • direct children are called grid items
  • grid-line
    • counting starts at 1
  • grid-cell
  • grid-track
  • grid-area
  • use fr units to equally divide grid elements
  • grid-row-start, grid-row-end
  • grid-column-start, grid-column-end
    • specify grid-line number as value
  • Exercise: https://cssgridgarden.com

1.19 CSS Preprocessor: Sass

  • Programming language that compiles to CSS
  • .sass and .scss are two file formats for this pre-processor
  • LESS, SASS and STYLUS are some pre-processors
  • Variables $font-size: 16px;
  • Nested code
  • & is equivalent to this in JavaScript
  • Mixins
    • Are CSS classes
    • Are for reusability
    • Defined using @mixin
    • included with @include
    • Can take a parameter
  • Extends
    • @extends is like a block that you can include
    • Doesn't take parameters, it's a simple code block
  • @if, @else @for are available
  • @imports for using multiple scss files
  • If you prepend an scss file with an underscore, it won't generate a css file

1.20 CSS Design Patterns and Methodologies

  • Popular CSS patterns: OOCSS, SMACSS, BEM

1.20.1 OCSS

  • Core concepts
    1. Separate structure and skin
    2. Separate container and content
  • Super Class, Sub Class Modifier and Sub Class

1.20.2 SMACSS

  • Pronounced Smacks
  • Folder structure
    • base
      • reset or normalize
    • layout
      • classes are prefixed with l, like l-footer
    • module
      • reusable components
    • state
      • like disabled etc.
      • written as modifier classes
    • theme
      • multiple themes for the same website

1.20.3 BEM

  • Block, Element and Modifier
  • Syntax 
.block {}
.block__element {}
.block__element--modifier {}
  • Modifier
    • can be applied to a block or a block element