css
Learning css
This repo contains my progress of learning CSS while working through the book "CSS: The Missing Manual".
Saved references
Html
- Tutorials:
- Doctypes
- Element Reference
- HTML5 Doctor
- Sectioning Element Decision Flow Chart
- Validation
- HTML Validator Extension
- Quirks Mode:
- File Paths
Search Engine Optimization
Browsers
CSS
- Validation
- Selector to descriptive language converter deadlink
- Using the :target selector
- How specificity is calculated
- Using Chrome DevTools for CSS:
- Avoiding id selectors
- CSS Reset
- Normalize CSS
- Styling numbered Lists
- Autoprefixer
- CSS Minifier
- Into to Object Oriented CSS
- Object Oriented CSS Project
- Scalable and Modular Architecture CSS
- Videos discussion SMACSS
Fonts
- CSS Font Stack
- ClearType deadlink
- League of Moveable Type
- Exljbris font foundry
- Open Font Library
- Font Squirrel
- Google Fonts
- Webfont Generator
- Use Icons
- Showcase of best fonts from Google
- Extra characters in Latin Extended
- Principles of Typographic Contrast
- Text Shadow examples movedlink?
- 3D Text effect
Colors
- Colour Lovers
- Paletton - color and palette creation tool
- List of color name values
- Colors by hue
- HSL Picker
Gradients
- Gradient Interactive Demo
- Lea Verou - Pattern Gallery
- Standardista - Gradients Pattern Gallery
- Bennett Feely - Background Blend Gradients Gallery
Images
- Power of Background Images
- SVG Resources
- Blending in CSS
- Free Imagery:
Patterns
- Free Tiling Patterns:
- Pattern Creator
Buttons
Menus
Sprites
- Sprites: Techniques and Tools
- List of tools, best practices, and helpful applications
- Sprite Pad
- Sprite Cow
- Amazon example
Animations
- Visualizing CSS Transforms
- Understanding Transformation Matrix
- Intro to 3D Transforms
- Details with Examples
- Apple's Morphing Power Cubes
- 3D Flip effect
- Timing Functions
- Ceaser - Creating and testing Cubic Bezier curves
- Controlling CSS Transitions with JS
- High Performance Animations
Forms and Tables
Layout
- Argument for Mobile First
- Mobile First explanation
- CSS Grid Layout Module
- Yahoo Free Stencil Kit deadlink
- CSS Design Layouts
- Templated
- Layout Generator
- Why Floats escape containing blocks
- Intro to the CSS3 Multi Column module
- Tool for creating/previewing multi column layouts brokenlink
- Fluid Width Equal Height Columns
- Solving Equal Height Columns with :before
- Solved by Flexbox
- Centering Complete Guide
Positioning
Responsive Web Design
- RWD Article
- Nav menu to Drop-down
- List of responsive nav and menu patterns deadlink
- Nav patterns for responsive design
- Responsive Testing:
- Fluid Images in Practice
- Custom size images on the sever per device
- Embedding youtube videos
- Embed Responsively Service
CSS Grid Systems:
SASS:
- Scout - Application to convert SASS
- How to structure a SASS project:
- SASS Math:
- When to use @extend vs @mixin
- SASS Mixin Libraries:
- Pros and Cons of inline media queries
- Writing SASS media queries: