Lessons: 12Length: 1.2 hours
In this course you’ll to learn how to use one of the most powerful, yet clean and bloat-free grid systems currently available: postcss-ant. It was created by Cory Simmons, known for his popular grid systems Jeet and Lost.
Running on top of the awesome PostCSS system, postcss-ant gives you the ability to smoothly and efficiently manage layouts from the simplest to the most complex, using either vanilla CSS or your favourite preprocessor.
So let’s get started learning “Grids and Layout Tricks with postcss-ant!”
Learn CSS: The Complete Guide
We've built a complete guide to help you learn CSS, whether you're just getting started with the basics or you want to explore more advanced CSS.
1.Introduction
1.1Grids and Layout Tricks With "postcss-ant"00:56
1.1
Grids and Layout Tricks With "postcss-ant"
00:56
2.Postcss-Ant Basics
2.1Getting Set Up05:34
2.1
Getting Set Up
05:34
2.2Generate a Grid04:17
2.2
Generate a Grid
04:17
2.3Fixed, Fraction and Auto Values08:03
2.3
Fixed, Fraction and Auto Values
08:03
2.4Controlling Rows and Column Height04:29
2.4
Controlling Rows and Column Height
04:29
2.5Gutters, Nesting, and Global and Local Settings07:45
2.5
Gutters, Nesting, and Global and Local Settings
07:45
2.6Create a Complete Site Layout With One Grid04:44
2.6
Create a Complete Site Layout With One Grid
04:44
3.Postcss-Ant Techniques
3.1Ratio-Based Sizing10:41
3.1
Ratio-Based Sizing
10:41
3.2Responsive Media Queries09:41
3.2
Responsive Media Queries
09:41
3.3Holy Grail Layout05:30
3.3
Holy Grail Layout
05:30
3.4Fluid, Variable Number Social Icons08:53
3.4
Fluid, Variable Number Social Icons
08:53
4.Conclusion
4.1Wrapping Up00:59
4.1
Wrapping Up
00:59
