A
A
Serif
Sans
White
Sepia
Night
Star (
-
)
Watch (
-
)
UX Design and Development course
About the author
Questions and Issues
Edit and Contribute
Introduction
1.
Learning how to use computers
1.1.
Life in the Terminal
1.2.
CLI You Should know
1.3.
Terminal cheatsheet
1.4.
Set up Bash and crate an Alias
1.5.
What is a Symbolic Link?
1.6.
Link Terminal.app to Sublime
1.7.
Setting up Rsync
1.8.
Install Homebrew
1.9.
Ack!
1.10.
Ack! and Sass
1.11.
Python server
2.
Publishing
2.1.
gitbook.io
3.
Welcome to Git
3.1.
The book
3.2.
Git basics
3.3.
Auto completion
3.4.
Suggested videos
3.5.
Exercise
3.6.
Submodules
3.7.
Github
3.8.
BitBucket
3.9.
Gists
4.
Working w/Sublime Text
4.1.
Preferences
4.2.
Snippets
5.
HTML5 as a Platform
5.1.
Semantics
5.2.
Semantics and Naming
5.3.
Microdata and Microformats
5.4.
RDFa
5.5.
ARIA
5.6.
App Cache
5.7.
Local storage
5.8.
IndexDB
5.9.
File API
5.10.
Geolocation
5.11.
Camera access
5.12.
Video
5.13.
Audio
5.14.
Performance
6.
HTML Architecture
6.1.
h5bp
6.2.
Dev Standards
6.3.
Core elements
6.4.
More elements
6.5.
Core attributes
6.6.
Outline
7.
HTML5 forms
7.1.
Semantcs
7.2.
Lables and inputs
7.3.
Validation
7.4.
Fieldset example
7.5.
Build a form
8.
HTML Abstractions
8.1.
Haml
8.2.
Jade
8.3.
Markdown
9.
Core UX
9.1.
How we work
9.2.
The fundamentals
9.3.
Style-Tiles
9.4.
User flows
9.5.
Graphviz
9.6.
Wireframes/IA
9.7.
Rapid prototypes
10.
Living Style Guide
10.1.
Building a Style Guide
10.2.
Exmaples
10.3.
UI Testing
11.
Specificity and Inheritance
11.1.
Specificity
11.2.
Inheritance
11.3.
Efficient selectors
12.
CSS & Typography
12.1.
CSS units
12.2.
Cheat sheet
12.3.
Modular Scale
12.4.
Baseline
12.5.
Viewport sizing
13.
Understanding web fonts
13.1.
Web font tools
13.2.
Icon-fonts
13.3.
Icons and Sass
14.
Write better CSS
15.
Know your selectors
15.1.
Anatomy of a selector
15.2.
CSS vocabulary
15.3.
Base elements == selectors
15.4.
Pseudo-selctors
15.5.
Associated selectors
15.6.
Over-qualified selectors
15.7.
Attribute selectors
15.8.
IE Selector limit
16.
CSS Layout
16.1.
The Box Model
16.2.
box-sizing
16.3.
block vs. inline-block
16.4.
All about floats
16.5.
Margin collapsing
16.6.
Positioning
16.7.
Relative vs Absolute
16.8.
calc()
17.
Grid systems
17.1.
960.gs
17.2.
Skeleton
18.
Flexbox
18.1.
New Flexbox
18.2.
Box-Ordinal
18.3.
Fill the gap
18.4.
Learn in 5 minutes
19.
HTML, CSS and Images
19.1.
Responsive reset
19.2.
<picture> element
19.3.
Images and the web
19.4.
The future
19.5.
Sprites
19.6.
SVGs
20.
Background images
20.1.
Miltiple backgrounds
20.2.
CSS Blend Modes
20.3.
Hover effects
21.
Design w/Pseudo elements
22.
Responsive Web Design
22.1.
Simulators
22.2.
Core principals
22.3.
Media queries
22.4.
Retina queries
22.5.
Syntax
22.6.
The mobile web
22.7.
The ems have it
22.8.
A px is not a px ...
22.9.
Asset Downloading Results
22.10.
Responsive Images, Picturefill, and Web Standards
22.11.
The responsive layout
22.12.
Example code
23.
Progressive Enhancement
23.1.
Understanding
23.2.
PE with CSS
24.
OOCSS
24.1.
Core principals
24.2.
Separations of concerns
24.3.
CSS Lint
24.4.
csscss
25.
SMACSS
25.1.
Breakdown
25.2.
Application
25.3.
Theme rules
25.4.
Typography
25.5.
Performance
26.
BEM
27.
Decompose the UI
27.1.
Atomic Design
28.
Js core concepts
28.1.
Weakly typed
28.2.
Core types
28.3.
Operators
28.4.
Immutable
28.5.
Prototypical language
28.6.
Class vs Prototype
28.7.
Objects literal
28.8.
Constructor vs Factory
29.
Js the basics
29.1.
Comments
29.2.
Variables
29.3.
Types
29.4.
Equality
30.
Js numbers
30.1.
Creation
30.2.
Basic Operators
30.3.
Advanced Operators
31.
Js strings
31.1.
Creation
31.2.
Concatenation
31.3.
Length
32.
Js conditional logic
32.1.
If
32.2.
Else
32.3.
Comparators
32.4.
Concatenate
33.
Js loops
33.1.
For
33.2.
While
34.
Js functions
34.1.
Declare
34.2.
Higher order
35.
Js objects
35.1.
Creation
35.2.
Properties
35.3.
Mutable
35.4.
Reference
35.5.
Prototype
35.6.
Delete
35.7.
Enumeration
35.8.
Global footprint
36.
Js exercises
36.1.
Hello World
36.2.
Comments
36.3.
Variables
36.4.
Variable types
36.5.
Bind function to event
36.6.
Function w/arguments
36.7.
Function return value
36.8.
Nested function
36.9.
Local-Global vars
36.10.
Operators
36.11.
If Else
36.12.
Nesting conditions
36.13.
For loops
36.14.
While loops
36.15.
Do while loops
36.16.
Event handler
36.17.
Objects
36.18.
Custom objects & functions
36.19.
Object initializer
36.20.
Constructor function and method
36.21.
Array
36.22.
Array properties and methods
36.23.
Math objects
36.24.
Date objects
36.25.
Forms
37.
jQuery
37.1.
jQ resources
37.2.
Callbacks
37.3.
Keyboard events
37.4.
Prevent default
37.5.
Manipulate the DOM
37.6.
Animations
37.7.
Might not need jQ?
37.8.
Demos
38.
Sass intro
38.1.
Installing
38.2.
Syntax & Language
38.3.
Styleguide
38.4.
Core types
39.
Sass 101
39.1.
Nesting
39.2.
Parent reference
39.3.
Bubble up
39.4.
Variables
39.5.
Setting variables
39.6.
Inheritance
39.7.
Mixins
39.8.
Operations
39.9.
Operations directive
39.10.
Functions
39.11.
List maps
40.
Sass file management
40.1.
Large CSS projects
40.2.
File structure
40.3.
The Manifest
40.4.
Theme options
40.5.
Partials
40.6.
Modules and UI Patterns
40.7.
The layout
40.8.
Summary
41.
Software Dev Basics
41.1.
Semantic versioning
41.2.
Algorithms
42.
Packagers
42.1.
Bower all the things
43.
Nodejs eco-system
43.1.
Node and npm
43.2.
Express
43.3.
Create a new app
43.4.
Routes
43.5.
404 errors
43.6.
Grunt
43.7.
Gulp
43.8.
Sass
43.9.
Grunt watch
43.10.
Bower
43.11.
Bower + Grunt + Sass
43.12.
Add data
43.13.
Heroku
43.14.
Deploy the codes
44.
Build a demo form
44.1.
The setup
44.2.
Version control
44.3.
The layout
44.4.
The view
44.5.
UI config
44.6.
A reset
44.7.
Global layout Sass
44.8.
The module
44.9.
Typography
44.10.
Forms
44.11.
Buttons
44.12.
jQuery
Generated using GitBook
CSS Typography
The following documents will illustrate examples and discussions around typesetting in CSS.