Transformations in Web UI Development

Introduction

Introduction

• A Few Words About This E-book

On today’s frontend UI development

• Introduction

UI development transformations

• Transformations in Web UI Development
• The Arrival of Smartphones
• Web Design = Responsive Web Design 
• Too Many Browsers Will Give You a Headache
• CSS Pixel Is Coming
• SVG and srcset/sizes, a New Challenge for Image Insertion
• A Vendor-Prefixed Pain in the Butt
• Less Photoshop, More Code
• From Ornament to Typography

Tools, technologies and workflows

• Tools, Approaches, Technologies
• CSS Preprocessors
• Node.js Invasion
• Installing Node.js Ecosystem For Front-end Use
• Package Managers: NPM and Bower
• Building Stuff: Prepros, Grunt, Gulp
• Post-processing: Autoprefixer, Pixrem and Other
• Sustainable Code Using OOCSS
• Bootstrap and Ready-made UI Libraries
• Alternative Browser Testing: Browserstack & Co.
• PSD-to-HTML Effectivity: Avocode, CSSHat…
• Live Preview: BrowserSync
• Other Tools and Websites

Fallback strategies

• Fallback Strategy For Older Browsers
• A Dinosaur-resistant CSS3 Technical Solution

CSS3 reference guide

Introduction

• Introduction

Text properties

• CSS3 Text Overflow – A Way To Wrap Text
• CSS3 Text Shadow
• CSS3 Font Face – BYOF (bring your own font...)
• Font Face: Tips & Tricks
• Font Face: Non-technical Aspects

Background properties

• CSS3 Background Clip – The Visible Range of Background
• CSS3 Background Origin – Background Image Start
• CSS3 Background Size
• CSS3 Gradients
• CSS3 Multiple Backgrounds

Border properties

• CSS3 Border Image – Custom Borders
• CSS3 Border Radius

Box properties

• CSS3 Box Shadow
• CSS3 Box Sizing – a Way of Calculating the Size of a Box

Media Queries

• CSS3 Media Queries – Conditional Directives for Different Media Types

CSS transforms

• CSS3 Transforms – Object Transformations

CSS animations

• CSS3 Transitions – Simple Transition Animations
• CSS3 Animations – Full-featured Animations
• Tips & Tricks & Links
• Examples of CSS3 Animations

CSS3 Layout

• CSS3 Multi-column Layout
• CSS3 Flexbox – A Layout Made of Flexible Boxes
• Flexbox: Practical Examples
• Flex Container Properties
• Flex Item Properties
• Flexbox: Browser Support
• Flexbox: What Is Good To Know
• Interesting Links to Flexbox

Another CSS3 Properties

• New CSS3 Units: Root EM and Viewport Units
• CSS3 RGBa Color – Semi-transparent Color
• CSS3 Selectors

Non-standard properties

• Box Reflection

End

End

• Where Else to Go?