1) First section is about what is flexbox and how it helps to make advanced responsive layouts.
Flexbox is not compatible with all browsers and there are tools who can help to keep the
old way for old browsers. Autoprefixer and modernizr are example of such tools.
1)
PostCSS-cssnext is a PostCSS plugin that helps you to use the latest CSS syntax today. It transforms new CSS specs into more compatible CSS so you don't need to wait for browser support.
You can literally write future-proof CSS and forget old preprocessor specific syntax.
cssnext makes easy to make your own custom selectors to make easier to select similar group of elements e.g headings.in your variables file,
in root, they are defines like that :--headings.so now all headings from h1 to h6 will be covered.
psudo class selectors
:any-link (selects any link in your project)
:matches (matches any selector) e.g you can write :--headings:matches(.feature-description-headline) so now all headings of (.feature-description-headline ) selector will be selected.
:not (opposite of a sector)
you can use calc function in postcss to make calculations easy e.g line-height: calc(var(--line-height-base)-100%);.
2) PostCSS Flexbox provides an easy to use option for using CSS3 Flexbox layouts.
This is supported by IE 10+ and all evergreen browsers.
next generation css is allowing you to create group of properties that can be applied at same time.
for example a variable can have more than one property.
you neeed to add group of elements in :root section. whenever you want to use it, you can use an @apply command.
CSS Next uses a color transformation function which will help modify existing colors.
color( color|hue adjuster ).
1) First section is about explaing the html markup and gulp.js of the project.
2) Second section is about creating sass like variables and mixins.
3) Third section is about using flexbox to create a layout for header and footer.
It is also about creating shared section styles and usibg color function in post css.
4) section 4 is about creating full screen backgrounds and controlling layouts in sections.