CSS Grid Layout: 5 Practical Projects
Description
CSS has grown from a language for formatting documents into a robust language for designing web applications. Its syntax is easy to learn, making CSS a great entry point for those new to programming. Indeed, it's often the second language that developers learn, right behind HTML.
One of CSS's new features is the Grid Layout Module, which enables complex layout designs that previously would have been very difficult to achieve. In this book, we'll examine five projects that use grid layout. It contains:
- Redesigning a Site to Use CSS Grid Layout by Ilya Bodrov
- Redesigning a Card-based Tumblr Layout with CSS Grid by Giulio Mainardi
- Easy and Responsive Modern CSS Grid Layout by Ahmed Bouchefra
- Progressively Enhanced CSS Layouts from Floats to Flexbox to Grid by Diogo Souza
- Make Forms Great with CSS Grid by Craig Buckler
This book is suitable for developers with some CSS experience.
More details
Person
Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler
Content
- CSS Grid Layout: 5 Practical Projects
- Notice of Rights
- Notice of Liability
- Trademark Notice
- About SitePoint
- Preface
- Conventions Used
- Chapter 1: Redesigning a Site to Use CSS Grid Layout
- What We Are Going to Build
- Planning The Grid
- Designing the Header
- Main Content and Sidebar
- Sponsors
- Footer
- Making the Layout Responsive
- Fallbacks
- Conclusion
- Chapter 2: Redesigning a Card-based Tumblr Layout with CSS Grid
- Markup
- Structural Layout
- The Cards
- Support
- Final Words
- Chapter 3: Easy and Responsive Modern CSS Grid Layout
- Progressive Enhancement: You Don't Have to Override Everything
- Adding a Nested Grid
- Using the Grid grid-column, grid-row and span Keywords
- Using Grid Alignment Utilities
- Restructuring the Grid Layout in Small Devices
- Conclusion
- Chapter 4: Progressively Enhanced CSS Layouts from Floats to Flexbox to Grid
- Progressive Enhancement vs Graceful Degradation
- Your Old Float Layout for A Page
- Flexbox Approach
- Enhancing to CSS Grid Layout
- Progressively Enhancing a Blog Layout
- More About CSS Grid Layout
- Chapter 5: Make Forms Great with CSS Grid
- Flawed Flexboxed Forms
- Development Approach
- The HTML
- Form Float Fallback
- Get Going with Grid
- Form Grid
- Grid Enlightenment
