Introduction to

web apps & React

Lesson 1: UI Kits

November 2019

Amsul Naeem

twitter.com/amsul_

slides.com/amsul

Styling Basics

Topics

UI Kits

Custom Designs

Styling Basics

  • HTML is used to markup the content
  • CSS is used to style the content
  • Class names are used to tie the two together

HTML

Styling Basics

<div class="my-class-name">
  my content
</div>

CSS

.my-class-name {
  background-color: pink;
}

Concerns with Class Names

Styling Basics

  • Global scope
  • Order based on styles
  • Specificity of selectors

Workarounds

  • Naming conventions
    • Name-spaced prefixes
    • Pattern behaviour, like BEM
  • Custom tooling

BEM Naming

Styling Basics

  • Block: a self-contained unit of an interface.
  • Element: an element within the block.
  • Modifier: a state of a Block or Element.

Names are composed using separators.

A search box component

<div>
  <input />
  <button>Search</button>
</div>
<div class='SearchBox'>
  <input />
  <button>Search</button>
</div>
<div class='SearchBox'>
  <input class='SearchBox-Input' />
  <button class='SearchBox-Button'>Search</button>
</div>
<div class='SearchBox'>
  <input class='SearchBox-Input SearchBox-Input--warning' />
  <button class='SearchBox-Button'>Search</button>
</div>

Importance of Naming

Styling Basics

“There are only two hard things in Computer Science: cache invalidation and naming things.”

- Phil Karlton

Exercise 1

Styling Basics

Create a modal with a:

  • Title
  • Close button
  • Body text
  • Button to open the modal (optional)

...and style them using BEM class names.

 

Starting point: GitHub Link

15 minute break

UI Kits

  • Foundational groundwork is done
  • Appropriate class names
  • Re-usable design patterns
  • Plethora of options to choose from

Material Design

UI Kits

Example

<button class="mdc-button">
  <span class="mdc-button__label">Button</span>
</button>
@import "@material/button/mdc-button";

Exercise 2

UI Kits

Create a Material Design modal with a:

  • Title
  • Close button
  • Body text
  • Button to open the modal

...using the Dialog component.

 

Starting point: GitHub Link

15 minute break

Customizing UI Kits

  • Varies from one UI kit to the next
    • Define custom class names
    • Overload existing class names
    • CSS preprocessors
    • CSS-in-JS
  • Documentation is key here

Material Design

Customizing UI Kits

  • Define custom class names
  • Overload existing class names

Component Composition

  • Re-use the same component within different contexts
  • Embed one component within another

Exercise 3

Customizing UI Kits

Create a Material Design modal with a form:

  • Text field: First Name
  • Text field: Last Name
  • Checkbox: Above 19+
  • Radio: Diet restrictions:
    • Vegetarian, Vegan, Halal/Kosher, None

 

Starting point: GitHub Link

End of Lesson

Lesson 1: UI Kits

November 2019

Amsul Naeem

twitter.com/amsul_

slides.com/amsul

Made with Slides.com