- [Tutorial Instructor] Since we've already looked at…Foundation in this course, I'm going to walk through…the syntax of their grid.…Now every single grid system is going to be…slightly different in terms of its syntax,…but the basic concepts are going to be the same.…So, if you learn how to use one grid,…then moving to a different grid is really just going to be…a matter of learning its syntax.…And when I say syntax,…I simply mean the class names instructor they use…to create their grid.…So, I'm here on the Foundation's grid documentation,…and, here I can see that it is a 12 column nestable grid.…
We're going to talk about nesting in just a moment.…So, the basic here is that you're going to have…a containing element and you're going to give it…a class of row, and this'll create a horizontal block…with vertical columns.…And for columns, you're going to use this columns class.…In addition to the columns class, you're going to use…another class that specifies how many columns…that particular div should span.…Now you'll notice here we've got large…
Author
Released
9/7/2016- 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
Skill Level Intermediate
Duration
Views
Related Courses
-
Sass Essential Training
with Ray Villalobos2h 4m Intermediate
-
Introduction
-
Welcome54s
-
-
1. Introducing Frameworks
-
Types of frameworks4m 53s
-
2. Choose a Framework
-
Popular frameworks3m 1s
-
Building your own framework3m 38s
-
3. Set Up a Framework
-
Downloading a framework3m 51s
-
Using a framework2m 54s
-
Modifying files6m 27s
-
-
4. Build a Framework-Based Site
-
Starting a sample project2m 20s
-
Setting up a starter page3m 32s
-
Add a custom header4m 47s
-
Add a custom footer3m 25s
-
Testing and prepping code4m 13s
-
Cleaning up unused files2m 19s
-
-
5. Work with Grids
-
What are CSS grids?3m 52s
-
Popular CSS grid systems2m 58s
-
Exploring grid-based syntax4m 20s
-
-
Conclusion
-
Next steps29s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Exploring grid-based syntax