
CSS Grid Layout: 5 Practical Projects
Description
Alles über E-Books | Antworten auf Fragen rund um E-Books, Kopierschutz und Dateiformate finden Sie in unserem Info- & Hilfebereich.
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
System requirements
File format: ePUB
Copy protection: Adobe-DRM (Digital Rights Management)
System requirements:
- Computer (Windows; MacOS X; Linux): Install the free reader Adobe Digital Editions prior to download (see eBook Help).
- Tablet/smartphone (Android; iOS): Install the free app Adobe Digital Editions or the app PocketBook before downloading (see eBook Help).
- E-reader: Bookeen, Kobo, Pocketbook, Sony, Tolino and many more (not Kindle).
The file format ePub works well for novels and non-fiction books – i.e., „flowing” text without complex layout. On an e-reader or smartphone, line and page breaks automatically adjust to fit the small displays.
This eBook uses Adobe-DRM, a „hard” copy protection. If the necessary requirements are not met, unfortunately you will not be able to open the eBook. You will therefore need to prepare your reading hardware before downloading.
Please note: We strongly recommend that you authorise using your personal Adobe ID after installation of any reading software.
For more information, see our ebook Help page.