CSS: Frameworks & Grids

CSS: Frameworks & Grids

1h 34mIntermediate2016-09-07

Authors

Carrie Dils

Carrie Dils

Development, WordPress

Course details

Have you wondered if using a CSS framework will speed up your website development? Frameworks give you the files and assets you need to build most websites—giving you a head start on your design process and templates for producing better, more consistent code. But they're not right for every project. Carrie Dils introduces the types of frameworks available, including the most popular open-source options like Bootstrap and Foundation, and provides an honest assessment of their pros and cons. She guides you through the download and setup steps and helps you build a basic framework-based site. Chapter 5 explores CSS grid systems, including Flexbox and Grid (the CSS Grid Layout module), which provide a simple system for laying out page content in columns and rows.

Learning objectives
Understanding boilerplates, grids, and frameworks
Choosing a framework
Building your own framework
Setting up a framework: from download to customization
Building a new framework-based website
Working with grids

Skills covered

CSSWeb StandardsWeb DesignFront-End Web DevelopmentWeb DevelopmentOpen SourceDeep Dive (X:Y)

Concepts

Introduction

  • Welcome
  • Recommended knowledge
  • Using the exercise files

Introducing Frameworks

  • Frameworks, grids, and boilerplates
  • Types of frameworks
  • Exploring a minimal framework
  • Exploring a comprehensive framework

Choose a Framework

  • Are frameworks right for you
  • Popular frameworks
  • What should I look for in a framework
  • Building your own framework

Set Up a Framework

  • Downloading a framework
  • Using a framework
  • Customize the directory structure
  • Modifying files
  • Exploring framework functionality

Build a Framework-Based Site

  • Starting a sample project
  • Setting up a starter page
  • Utilizing framework capabilities
  • Add a custom header
  • Add a custom footer
  • Testing and prepping code
  • Cleaning up unused files

Work with Grids

  • What are CSS grids
  • Popular CSS grid systems
  • Exploring grid-based syntax

Conclusion

  • Next steps
40,000 Toman