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
- Open source by Google
- BEM naming pattern
- material.io
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
Lesson 1: UI Kits
By amsul
