The document discusses techniques for digital animation. It covers CSS3 backgrounds such as background-color, background-image, background-repeat, background-attachment, and background-position. It then discusses new CSS3 properties like background-origin, background-clip, and background-size. It also covers CSS3 gradients like linear-gradient and radial-gradient. The document provides examples and links to online code samples demonstrating each technique.
#7 - Client-side web apps, MVC and jQueryiloveigloo
The document discusses client-side web applications. It covers client-side architecture, including single-page applications and events. It then discusses the model-view-controller pattern, including the roles of the model, view, and controller. Finally, it introduces jQuery, describing it as a library that simplifies HTML document traversal, event handling, animations, and AJAX functionality.
This document discusses template engines and the Mustache.js template syntax. It defines a template engine as software that processes templates and content to produce output documents. It then provides an overview of server-side template engines like PHP and .NET before discussing Mustache.js. Mustache.js is described as a logic-less template syntax that can be used for HTML, code, or any text by expanding tags using object values. The document demonstrates basic Mustache.js tags, sections, functions, comments, and partials, and notes alternatives like Handlebars and compiled templates for improved performance.
Client-side MVC with Backbone.js (reloaded)iloveigloo
The document discusses a presentation on client-side MVC with Backbone.js. It includes an agenda that covers why Backbone.js, its architecture including models, collections, views, templates and routers, real world examples, tips and tricks, and extras. The architecture section describes how Backbone.js provides structure using models, collections, views and connecting to RESTful APIs. It also outlines the MVC components and their roles.
#4 - CSS Selectors, CSS3 and Web typographyiloveigloo
The document discusses various techniques for digital animation and web typography. It covers CSS selectors and properties, CSS3 modules like borders, shadows and transformations. It also discusses techniques for incorporating web fonts, including using @font-face, different font formats, browser support, and services like Google Web Fonts. The document provides examples and code snippets to demonstrate the different concepts.
The document discusses techniques for digital animation. It covers CSS3 backgrounds such as background-color, background-image, background-repeat, background-attachment, and background-position. It then discusses new CSS3 properties like background-origin, background-clip, and background-size. It also covers CSS3 gradients like linear-gradient and radial-gradient. The document provides examples and links to online code samples demonstrating each technique.
#7 - Client-side web apps, MVC and jQueryiloveigloo
The document discusses client-side web applications. It covers client-side architecture, including single-page applications and events. It then discusses the model-view-controller pattern, including the roles of the model, view, and controller. Finally, it introduces jQuery, describing it as a library that simplifies HTML document traversal, event handling, animations, and AJAX functionality.
This document discusses template engines and the Mustache.js template syntax. It defines a template engine as software that processes templates and content to produce output documents. It then provides an overview of server-side template engines like PHP and .NET before discussing Mustache.js. Mustache.js is described as a logic-less template syntax that can be used for HTML, code, or any text by expanding tags using object values. The document demonstrates basic Mustache.js tags, sections, functions, comments, and partials, and notes alternatives like Handlebars and compiled templates for improved performance.
Client-side MVC with Backbone.js (reloaded)iloveigloo
The document discusses a presentation on client-side MVC with Backbone.js. It includes an agenda that covers why Backbone.js, its architecture including models, collections, views, templates and routers, real world examples, tips and tricks, and extras. The architecture section describes how Backbone.js provides structure using models, collections, views and connecting to RESTful APIs. It also outlines the MVC components and their roles.
#4 - CSS Selectors, CSS3 and Web typographyiloveigloo
The document discusses various techniques for digital animation and web typography. It covers CSS selectors and properties, CSS3 modules like borders, shadows and transformations. It also discusses techniques for incorporating web fonts, including using @font-face, different font formats, browser support, and services like Google Web Fonts. The document provides examples and code snippets to demonstrate the different concepts.
#3 - Sectioning content and outline viewiloveigloo
This document discusses techniques for digital animation. It covers new elements in HTML5 like <details> and <summary> which represent disclosure widgets. It also discusses sectioning content elements like <article>, <aside>, <nav>, and <section> that are used to divide HTML documents into sections. The document explains the document outlining algorithm and shows examples of outline views of web pages. It also promotes validating HTML and CSS to check for well-formed markup and as a debugging and quality control tool.
CSS3 isn't the future, it's the present, and is ripe for the pickin' and is ready to respond to display your sites in multiple devices right now. Presented at Rich Web Experience 2011, Ft. Lauderdale, FL.
The document describes the evolution of a web scraping project using Ruby from a simple initial implementation to a robust production system. It started as a quick script but grew to handle logging in, extracting data from multiple pages, error handling, caching, and performance improvements like using a proxy. Testing and refactoring helped increase confidence and maintainability. The system was eventually able to replicate most of the target website's features, handling high volumes of traffic through caching and other optimizations.
The document discusses using the Paco parsing library in Elixir. It shows how to define parsers for literals, sequences, repetitions, alternatives and more. It also demonstrates parsing expressions, references to elements with quantities, and converting terms to parsers via a Parsable protocol.
This document discusses embracing HTTP and changing approaches to web application development. It suggests flipping dependencies so that applications are built around HTTP rather than frameworks. It also recommends taking a more stateful approach by going CQRS/ES rather than relying on CRUD and resources. The document questions common patterns and promotes thinking beyond frameworks to more fundamental concepts.
Este documento resume las principales características de CSS3 como pseudo-elementos, pseudo-clases, bordes redondeados, sombras, fondos múltiples, gradientes de color, opacidad, transformaciones, transiciones y animaciones. También cubre la capacidad de CSS3 para agregar sombreado de texto, columnas, fuentes personalizadas y medios condicionales. El objetivo es dar a conocer las nuevas funcionalidades de CSS3 para lograr estilos más simples y ahorrar tiempo de desarrollo.
CSS3: A practical introduction (FT2010 talk)Lea Verou
The document discusses the benefits of exercise for both physical and mental health. Regular exercise can improve cardiovascular health, reduce stress and anxiety, boost mood, and may even help prevent chronic diseases. Staying active for at least 30 minutes each day is recommended for overall health and well-being.
CSS3 secrets: 10 things you might not know about CSS3Lea Verou
My CSS3 secrets presentation. These are just screenshots, the interactive version can be found at http://leaverou.me/css3-secrets (works best on Firefox)
Este documento presenta una introducción a HTML5 y CSS3. Explica que HTML5 incluye nuevos elementos semánticos como <header>, <nav>, <article>, <section> y <footer>. También presenta nuevos elementos multimedia como <video> y <audio>. CSS3 incluye nuevas posibilidades para decoración como fondos múltiples, RGBa, text-shadow, box-shadow y transformaciones. El documento recomienda usar prefijos de proveedor y polyfills para mejorar la compatibilidad, y proporciona recursos adicionales para aprender más sobre estas
The document discusses various topics in CSS3 including selectors, properties, media queries, and visual effects. It provides examples and explanations of CSS3 concepts like gradients, rounded corners, box shadow, text shadow, opacity, and more. Browser support and cross-browser compatibility of CSS3 features are also covered.
HTML5 merupakan bahasa markup inti untuk membangun situs dan aplikasi web. HTML5 menyederhanakan penulisan sintaks HTML dan memperkenalkan elemen baru seperti video, audio, dan formulir yang lebih kompleks.
We are all familiar with the common interface development process which is:
* first, preparing an interface layout by a designer;
* then, making an HTML/CSS dummy;
* next, adding some JavaScript tricks with a help of JavaScript ninja;
* and, finally, having a server guy operating on templates and doing all the integration stuff.
Even while sometimes all these things are done by the same person, these are different roles and different project stages, and you switch from stage to stage to complete the development cycle.
When looking for performance gains, people often try to achieve that by changing the way the process is managed.
This presentation is about is a completely different approach which changes development from within. The goal is to convert a flat process with distinct stages into a continuous, uninterrupted development flow.
You can achieve this by decomposing a web interface into independent pieces (the so-called blocks), once and for all, and use them to build interfaces the same way bricks are used to build a house.
Thus, each of these interface components can be developed separately, which allows maintenance, refactoring and redesign to happen simultaneously on different interface parts, whenever necessary. You are not tied to a specific stage of project development anymore.
To make this happen, there are several principles you can follow:
1. Special project file structure, where files are stored the way the whole project can be built from components;
2. CSS guidelines that allow an interface piece to fit anywhere on any page without affecting other pieces;
3. In JavaScript, your functionality can be described in a highly semantic way usually unavailable with any other common approach.
All this magic is called BEM, which stands for Block, Element, and Modifier.
With my presentation, this technology will be revealed in greater detail, and magic explained bit by bit.
This chapter summary covers CSS concepts including the box model, margin, padding, floats, positioning, and layouts. Key points covered include:
- The box model consists of content, padding, border, and margin areas.
- Margin and padding properties configure spacing around elements.
- The float property positions elements side-by-side, and clear terminates floats.
- Positioning includes normal, relative, absolute, and fixed positioning.
- CSS can create multi-column page layouts including a basic two-column layout.
- Pseudo-classes like hover and link modify anchor element styles during user interactions.
- HTML5 elements like header, nav, main, and aside add
CSMess to OOCSS: Refactoring CSS with Object Oriented DesignKate Travers
Ask any web developer: the most neglected part of their site/app is likely its CSS. Unlike other parts of the stack, most CSS is messy, complex, and long overdue for a rewrite. But it doesn’t have to be. Break out of these bad patterns by applying an object oriented CSS framework (OOCSS).
This talk will step through the process of designing, building, and implementing a custom OOCSS framework for a mid-sized web application, outlining the basic methodology, best practices, and expected outcomes, which include significant gains in both front-end performance as well as developer productivity.
Written transcript:
http://blog.kate-travers.com/how-oo-design-saved-our-css-and-site-performance/
Flexbox is a smart new layout mode for CSS that solves many problems we've struggled with for years. It adds a degree of control we didn't have before. No longer will you need to struggle with floats and clearfixes to address page layout challenges they were never designed to handle.
But wait, I hear you say, a new layout mode? Surely the browser support is awful? It's actually quite good, and I will show you how to write future-proof code that will work flawlessly in browsers that support flexbox while providing a fallback to those that don't.
In this talk, I will introduce the flexbox layout module and explain what it's good for (and what's it's NOT good for). I'll give examples of usage, outline a strategy for browser support, and prepare you to use flexbox TODAY!
This is a beginner level talk. You do not need to know anything about flexbox, but a basic understanding of CSS layout will be helpful.
This document discusses CSS layout techniques, including past, present, and future options. It covers problems with traditional table-based and float-based layouts, as well as new CSS3 specifications for flexible box layout, grid layout, multi-column layout, and regions. Key upcoming features discussed include new float values, containment of floats, wrapping of floats, grid layout definitions and placement of elements, and flexible box properties for automatic sizing of elements.
This document summarizes a workshop on using BEM methodology and SASS for frontend development. The workshop covers installing and using BEM for layouts and components, the principles of BEM naming conventions, and best practices for writing scalable, maintainable CSS code with SASS. Attendees will learn about blocks, elements, and modifiers in BEM, how to avoid deep nesting in CSS, and techniques for refactoring code to reduce duplication while keeping selectors simple. The presentation emphasizes writing semantic, modular CSS through proper application of BEM and use of mixins and extends in SASS.
With solidified syntax and great browser support, flexbox, the CSS layout module that can make your layouts more flexible and responsive with ease, is finally ready to be used in your real-world work. We’ll talk about the when, what, and how of using flexbox today: when it’s a great choice use flexbox (and when not to), what UI and UX problems it can help you solve, and how to add it to your layouts in a robust way that doesn’t harm non-supporting browsers or accessibility. You’ll learn a step-by-step process for deciding on and deploying flexbox, with lots of examples along the way of flexbox in the wild.
#3 - Sectioning content and outline viewiloveigloo
This document discusses techniques for digital animation. It covers new elements in HTML5 like <details> and <summary> which represent disclosure widgets. It also discusses sectioning content elements like <article>, <aside>, <nav>, and <section> that are used to divide HTML documents into sections. The document explains the document outlining algorithm and shows examples of outline views of web pages. It also promotes validating HTML and CSS to check for well-formed markup and as a debugging and quality control tool.
CSS3 isn't the future, it's the present, and is ripe for the pickin' and is ready to respond to display your sites in multiple devices right now. Presented at Rich Web Experience 2011, Ft. Lauderdale, FL.
The document describes the evolution of a web scraping project using Ruby from a simple initial implementation to a robust production system. It started as a quick script but grew to handle logging in, extracting data from multiple pages, error handling, caching, and performance improvements like using a proxy. Testing and refactoring helped increase confidence and maintainability. The system was eventually able to replicate most of the target website's features, handling high volumes of traffic through caching and other optimizations.
The document discusses using the Paco parsing library in Elixir. It shows how to define parsers for literals, sequences, repetitions, alternatives and more. It also demonstrates parsing expressions, references to elements with quantities, and converting terms to parsers via a Parsable protocol.
This document discusses embracing HTTP and changing approaches to web application development. It suggests flipping dependencies so that applications are built around HTTP rather than frameworks. It also recommends taking a more stateful approach by going CQRS/ES rather than relying on CRUD and resources. The document questions common patterns and promotes thinking beyond frameworks to more fundamental concepts.
Este documento resume las principales características de CSS3 como pseudo-elementos, pseudo-clases, bordes redondeados, sombras, fondos múltiples, gradientes de color, opacidad, transformaciones, transiciones y animaciones. También cubre la capacidad de CSS3 para agregar sombreado de texto, columnas, fuentes personalizadas y medios condicionales. El objetivo es dar a conocer las nuevas funcionalidades de CSS3 para lograr estilos más simples y ahorrar tiempo de desarrollo.
CSS3: A practical introduction (FT2010 talk)Lea Verou
The document discusses the benefits of exercise for both physical and mental health. Regular exercise can improve cardiovascular health, reduce stress and anxiety, boost mood, and may even help prevent chronic diseases. Staying active for at least 30 minutes each day is recommended for overall health and well-being.
CSS3 secrets: 10 things you might not know about CSS3Lea Verou
My CSS3 secrets presentation. These are just screenshots, the interactive version can be found at http://leaverou.me/css3-secrets (works best on Firefox)
Este documento presenta una introducción a HTML5 y CSS3. Explica que HTML5 incluye nuevos elementos semánticos como <header>, <nav>, <article>, <section> y <footer>. También presenta nuevos elementos multimedia como <video> y <audio>. CSS3 incluye nuevas posibilidades para decoración como fondos múltiples, RGBa, text-shadow, box-shadow y transformaciones. El documento recomienda usar prefijos de proveedor y polyfills para mejorar la compatibilidad, y proporciona recursos adicionales para aprender más sobre estas
The document discusses various topics in CSS3 including selectors, properties, media queries, and visual effects. It provides examples and explanations of CSS3 concepts like gradients, rounded corners, box shadow, text shadow, opacity, and more. Browser support and cross-browser compatibility of CSS3 features are also covered.
HTML5 merupakan bahasa markup inti untuk membangun situs dan aplikasi web. HTML5 menyederhanakan penulisan sintaks HTML dan memperkenalkan elemen baru seperti video, audio, dan formulir yang lebih kompleks.
We are all familiar with the common interface development process which is:
* first, preparing an interface layout by a designer;
* then, making an HTML/CSS dummy;
* next, adding some JavaScript tricks with a help of JavaScript ninja;
* and, finally, having a server guy operating on templates and doing all the integration stuff.
Even while sometimes all these things are done by the same person, these are different roles and different project stages, and you switch from stage to stage to complete the development cycle.
When looking for performance gains, people often try to achieve that by changing the way the process is managed.
This presentation is about is a completely different approach which changes development from within. The goal is to convert a flat process with distinct stages into a continuous, uninterrupted development flow.
You can achieve this by decomposing a web interface into independent pieces (the so-called blocks), once and for all, and use them to build interfaces the same way bricks are used to build a house.
Thus, each of these interface components can be developed separately, which allows maintenance, refactoring and redesign to happen simultaneously on different interface parts, whenever necessary. You are not tied to a specific stage of project development anymore.
To make this happen, there are several principles you can follow:
1. Special project file structure, where files are stored the way the whole project can be built from components;
2. CSS guidelines that allow an interface piece to fit anywhere on any page without affecting other pieces;
3. In JavaScript, your functionality can be described in a highly semantic way usually unavailable with any other common approach.
All this magic is called BEM, which stands for Block, Element, and Modifier.
With my presentation, this technology will be revealed in greater detail, and magic explained bit by bit.
This chapter summary covers CSS concepts including the box model, margin, padding, floats, positioning, and layouts. Key points covered include:
- The box model consists of content, padding, border, and margin areas.
- Margin and padding properties configure spacing around elements.
- The float property positions elements side-by-side, and clear terminates floats.
- Positioning includes normal, relative, absolute, and fixed positioning.
- CSS can create multi-column page layouts including a basic two-column layout.
- Pseudo-classes like hover and link modify anchor element styles during user interactions.
- HTML5 elements like header, nav, main, and aside add
CSMess to OOCSS: Refactoring CSS with Object Oriented DesignKate Travers
Ask any web developer: the most neglected part of their site/app is likely its CSS. Unlike other parts of the stack, most CSS is messy, complex, and long overdue for a rewrite. But it doesn’t have to be. Break out of these bad patterns by applying an object oriented CSS framework (OOCSS).
This talk will step through the process of designing, building, and implementing a custom OOCSS framework for a mid-sized web application, outlining the basic methodology, best practices, and expected outcomes, which include significant gains in both front-end performance as well as developer productivity.
Written transcript:
http://blog.kate-travers.com/how-oo-design-saved-our-css-and-site-performance/
Flexbox is a smart new layout mode for CSS that solves many problems we've struggled with for years. It adds a degree of control we didn't have before. No longer will you need to struggle with floats and clearfixes to address page layout challenges they were never designed to handle.
But wait, I hear you say, a new layout mode? Surely the browser support is awful? It's actually quite good, and I will show you how to write future-proof code that will work flawlessly in browsers that support flexbox while providing a fallback to those that don't.
In this talk, I will introduce the flexbox layout module and explain what it's good for (and what's it's NOT good for). I'll give examples of usage, outline a strategy for browser support, and prepare you to use flexbox TODAY!
This is a beginner level talk. You do not need to know anything about flexbox, but a basic understanding of CSS layout will be helpful.
This document discusses CSS layout techniques, including past, present, and future options. It covers problems with traditional table-based and float-based layouts, as well as new CSS3 specifications for flexible box layout, grid layout, multi-column layout, and regions. Key upcoming features discussed include new float values, containment of floats, wrapping of floats, grid layout definitions and placement of elements, and flexible box properties for automatic sizing of elements.
This document summarizes a workshop on using BEM methodology and SASS for frontend development. The workshop covers installing and using BEM for layouts and components, the principles of BEM naming conventions, and best practices for writing scalable, maintainable CSS code with SASS. Attendees will learn about blocks, elements, and modifiers in BEM, how to avoid deep nesting in CSS, and techniques for refactoring code to reduce duplication while keeping selectors simple. The presentation emphasizes writing semantic, modular CSS through proper application of BEM and use of mixins and extends in SASS.
With solidified syntax and great browser support, flexbox, the CSS layout module that can make your layouts more flexible and responsive with ease, is finally ready to be used in your real-world work. We’ll talk about the when, what, and how of using flexbox today: when it’s a great choice use flexbox (and when not to), what UI and UX problems it can help you solve, and how to add it to your layouts in a robust way that doesn’t harm non-supporting browsers or accessibility. You’ll learn a step-by-step process for deciding on and deploying flexbox, with lots of examples along the way of flexbox in the wild.
Flexbox is a CSS layout mode that allows elements to be arranged and aligned in an intelligent and space efficient way. It lets items flex and expand to fill additional space, shrink to fit into smaller spaces, and rearrange themselves depending on screen size and device orientation. Some key aspects of flexbox include the flex container, flex items, main and cross axes, flex direction, justify and align content, flex wrap, and flex grow/shrink properties.
Tired of eating CSS soup day after day? No longer want to play stylesheet Jenga whenever you try to edit main.css? You just may need a CSS architecture. This talk will review the major CSS architectures like BEM (Block Element Modifier) and SMACSS (Scalable and Modular Architecture for CSS) while discussing the pros and cons of each.
The document discusses the future of CSS layout mechanisms. It describes several proposed CSS modules for layout, including Grid Positioning, Flexible Box, and Template Layout. Each provides advantages for creating explicit grids and separating presentation from structure. The document highlights how these new layout capabilities could improve web design and development by establishing CSS as the framework. It concludes by encouraging learning more and getting involved in the ongoing CSS layout standards work.
This document provides an agenda and slides for a FEWD (Front End Web Development) class. It discusses the CSS box model, nested selectors, HTML templates, and starting the Relaxr landing page assignment. Key points include:
- The CSS box model consists of margins, borders, padding, and content
- Nested selectors allow targeting elements within other elements
- Students are instructed to create a GitHub repository and commit their weekly work
- Layout techniques like floats and HTML5 structural elements are reviewed to help structure the Relaxr assignment pages
This document outlines style guidelines for developing robust stylesheets in SCSS, including:
- Using BEM naming conventions (Block, Element, Modifier) for clarity and reusability.
- Organizing CSS rules by category (box model properties, then text properties, etc).
- Nesting selectors no more than three levels deep.
- Handling responsive design through element queries instead of separate media queries.
- Maintaining a consistent structure within modules, and importing partial files into a main file.
The document discusses the Flexbox Layout module which aims to provide a more efficient way to lay out items in a container. It defines the flex container as direction-agnostic unlike regular layouts. It then covers the various flex properties like flex-direction, flex-wrap, justify-content, align-items, order, flex-grow, flex-shrink and flex-basis which control how flex items are laid out both along the main and cross axes within the flex container.
With solidified syntax and great browser support, flexbox, the CSS layout module that can make your layouts more flexible and responsive with ease, is finally ready to be used in your real-world work. We’ll talk about the when, what, and how of using flexbox today: when it’s a great choice use flexbox (and when not to), what UI and UX problems it can help you solve, and how to add it to your layouts in a robust way that doesn’t harm non-supporting browsers or accessibility. You’ll learn a step-by-step process for deciding on and deploying flexbox, with lots of examples along the way of flexbox in the wild.
This document discusses best practices for creating CSS pattern libraries. It recommends starting with the smallest reusable components and building up to larger page-level templates. Key aspects covered include using a naming convention based on modules, modifiers and descendants; avoiding overly specific class names; and including utility classes to add single styles without new classes. The document also provides examples of how to structure and name classes for common interface patterns.
11. Block vs Inline
Block: Takes up the full width available, with a
new line before and after (e.g. <p>)
http://jsfiddle.net/MicheleBertoli/cScJa/
Inline: Takes up only as much width as it needs, and
does not force new lines (e.g.<span>)
http://jsfiddle.net/MicheleBertoli/cScJa/1/
11
Basic / Layout
12. Floats
A float is a box that is shifted to the left or right on the
current line. The most interesting characteristic of a
float (or “floated” or “floating” box) is that content
may flow along its side (or be prohibited from doing so
by the “clear” property). Content flows down the right
side of a leftfloated box and down the left side of a
rightfloated box.
www.w3.org/TR/CSS21/visuren.html#floats
12
Basic / Layout
16. Collapsing
Collapsing is when a parent element that contains
any number of floated elements doesn’t expand
to completely surround those elements in the
way it would if the elements were not floated.
http://jsfiddle.net/MicheleBertoli/edamS/5/
http://jsfiddle.net/MicheleBertoli/edamS/6/
16
Basic / Layout
17. Absolute positioning
position:relative;
A relative positioned element is positioned relative to
its normal position.
http://jsfiddle.net/MicheleBertoli/pq4A5/
17
Basic / Layout
18. Absolute positioning
position:absolute;
An absolute position element is positioned relative to
the first parent element that has a position other than
static. If no such element is found, the containing block
is <html>.
http://jsfiddle.net/MicheleBertoli/pq4A5/1/
http://jsfiddle.net/MicheleBertoli/pq4A5/2/
18
Basic / Layout
19. Absolute positioning
position:fixed;
An element with fixed position is positioned relative to
the browser window.
http://jsfiddle.net/MicheleBertoli/pq4A5/3/
http://jsfiddle.net/MicheleBertoli/pq4A5/4/
19
Basic / Layout
21. Flexbox
The CSS3 Flexible Box, or flexbox, is a layout
mode providing for the arrangement of elements
on a page such that the elements behave
predictably when the page layout must
accommodate different screen sizes and
different display devices.
21
Basic / Layout
23. Vocabulary
Flex container
The parent element in which flex items are contained. A flex
container is defined using the flex or inline-flex values of the
display property.
Flex item
Each child of a flex container becomes a flex item. Text
directly contained in a flex container is wrapped in an
anonymous flex item.
23
Basic / Layout
24. Vocabulary
Axes
Every flexible box layout follows two axes. The main axis is the
axis along which the flex items follow each other. The cross axis is
the axis perpendicular to the main axis.
Directions
The main start/main end and cross start/cross end sides pairs of
the flex container describe the origin and terminus of the flow of
flex items. They follow the main axis and cross axis of the flex
container in the vector established by the writing-mode (left-to-
right, right-to-left, etc.).
24
Basic / Layout
25. Vocabulary
Lines
Flex items can be laid out on either a single line or on several lines
according to the flex-wrap property, which controls the direction
of the cross axis and the direction in which new lines are stacked.
Dimensions
The flex items' agnostic equivalents of height and width are main
size and cross size, which respectively follow the main axis and
cross axis of the flex container.
25
Basic / Layout
26. CSS vendor prefixes
Trident -ms- — All experimental properties are prefixed with "-
ms-", e.g. -ms-interpolation-mode instead of interpolation-mode.
Gecko -moz- — All experimental selectors, properties and values
are prefixed with "-moz-", e.g. ::-moz-selection instead
of ::selection.
WebKit -webkit- — All experimental selectors, properties and
values are prefixed with "-webkit-", e.g. -webkit-boxshadow
instead of box-shadow.
26
Basic / Layout
37. Introduction
Margin properties specify the width of the margin area
of a box.
In CSS, the adjoining margins of two or more boxes
(which might or might not be siblings) can combine to
form a single margin. Margins that combine this way are
said to collapse, and the resulting combined margin is
called a collapsed margin.
37
Basic / Box model
38. Introduction
The padding properties specify the width of the
padding area of a box.
The border properties specify the width, color, and
style of the border area of a box.
38
Basic / Box model
41. Introduction
The goal of a reset stylesheet is to reduce browser
inconsistencies in things like default line heights,
margins and font sizes of headings, and so on.
41
Basic / CSS Reset