Modern Layouts with Flexbox, Grid, Calc, and Custom Fields

For the first time in the history of the Web, CSS is graced with tools for laying out web pages without hacks. Flexbox and Grid have made a tremendous impact on the industry, providing methods able to create responsive websites with designs not previously possible. CSS Calc and CSS Custom Fields give us a first chance to use math and variables within CSS itself, without requiring compiling. Together, these four new CSS modules work together to revolutionize CSS in modern evergreen browsers. In this workshop, you will master the following: - Flexbox, the appropriate layout tool for repetitive units of content (like an image gallery or a series of media objects) - Grid, the appropriate layout tool for two-dimensional designs (like the overall design of a web page) - CSS Calc, a method for running math in CSS which runs in the browser - CSS Custom Fields, also called CSS Variables, which can be used in interesting ways to streamline CSS code. Students will leave with a working understanding of creating custom responsive designs with the latest tools for layout, using semantically correct HTML markup and the latest CSS modules.

Comments

Comments are closed.