planetoftheweb / postcsslayouts Goto Github PK

This is the repository for my course, Building a Responsive Single-Page Design with PostCSS on LinkedIn Learning and Lynda.com.

Home Page: https://www.linkedin.com/learning/building-a-responsive-single-page-design-with-postcss?trk=insiders_6787408_learning

HTML 59.37% JavaScript 4.12% CSS 36.51%

postcss precss css responsive layouts tutorial training linkedinlearning lynda lynda-com

postcsslayouts's Introduction

Building a Responsive Single-Page Design with PostCSS

This is the repository for my course Building a Responsive Single-Page Design with PostCSS. The full course is available on LinkedIn Learning and Lynda.com

Learn how to create responsive single-page websites with PostCSS, the CSS post-processor engine that extends the power of CSS through JavaScript. These step-by-step instructions take existing HTML markup and add style, animation, and responsive navigation. This combination allows for dynamic one-page sites—a popular design that's now even faster and easier to create with PostCSS. Along the way, Ray Villalobos introduces some handy plugins, tips for integrating PostCSS into a Gulp-based workflow, and techniques for making layouts more responsive with Flexbox.

Instructions

This repository has branches for each of the videos in the course. You can use the branch pop up menu in github to switch to a specific branch and take a look at the course at that stage. Or you can simply add /tree/BRANCH_NAME to the URL to go to the branch you want to peek at.

Branches

The branches are structured so that they correspond to the videos in the course. So, for example if I name a branch 02_03b then that branch corresponds to the second chapter and the third video in that chapter. The extra letter at the end of the name corresponds to the state of the branch. A b means that this is how the code looks at the beginning of the video, an e means that is how the code looked at the end of the video.

You may find additional branches that correspond to other states, so for example, you may see a t, which means this is a target branch. A target branch is something I use during development or updates of a course and it's for a branch that I'm working towards. For the purposes of taking a course, you may ignore any additional branches. The master branch usually has the state of the project as I'm working through it and the final state of the code when I finish the course.

Installing

Make sure you have these installed
- node.js
- git
Clone this repository into your local machine using the terminal (mac) or Gitbash (PC) > git clone CLONEURL
CD to the folder cd FOLDERNAME
Run > npm install to install the project dependencies
Run > gulp to start live preview server

More Stuff

Check out some of my other courses on LinkedIn Learning and lynda.com. You can follow me on LinkedIn, read my blog, follow me on twitter, or check out my youtube channel.

postcsslayouts's People

Contributors

Stargazers

Watchers

postcsslayouts's Issues

02_01b

Had an initial issue with erroring out when trying to save my postcss -- turned out that it didn't like the google font.

I am using node v8.1.2 and npm v5.0.3, I don't know if something has changed in this node version to create the error in trying to import the google font or it was a unique error to my experience, but you may find it valuable to pass along.

Solved it by adding this to the node modules:
postcss-google-font

alternatively, from the NPM site postcss-google-font

(add using npm in terminal) npm i postcss-google-font

I then altered the gulpfile.js slightly to (appended lines are below comments)

var gulp = require('gulp'),
  gutil = require('gulp-util'),
  webserver = require('gulp-webserver'),
  postcss = require('gulp-postcss'),
  autoprefixer = require('autoprefixer'),
  precss = require('precss'),
  cssnano = require('cssnano'),
  animation = require('postcss-animation'),
  //added in the following to utilize postcss-google-fonts
  googlefonts = require('postcss-google-font'),

  source = 'process/css/',
  dest = 'builds/postcss/';

gulp.task('html', function() {
  gulp.src(dest + '*.html');
});

gulp.task('css', function() {
  gulp.src(source + 'style.css')
  .pipe(postcss([
    //added in the following to utilize postcss-google-fonts
    googlefonts(),
    precss(),
    animation(),
    autoprefixer(),
    cssnano()
  ]))
  .on('error', gutil.log)
  .pipe(gulp.dest(dest + 'css'));
});

gulp.task('watch', function() {
  gulp.watch(source + '**/*.css', ['css']);
  gulp.watch(dest + '**/*.html', ['html']);
});

gulp.task('webserver', function() {
  gulp.src(dest)
    .pipe(webserver({
      livereload: true,
      open: true
    }));
});

gulp.task('default', ['html', 'css', 'webserver','watch']);

Seemed to solve the error. FYI.

Dig your tutorials, I've learned a ton from you.

Extra row (bottom) space on products in IE

I'm testing on Parallels and see there's extra line spacing between the products.

If I add overflow: visible to the styles, the extra space goes away, but on hover the red box is hidden by the section below. Not sure what to do?

Mobile browser address bar scroll issue

The 100vh for the background image causes the image to resize when the address bar hides or comes back. The result is mildly jarring. I've been poking around stack overflow for ideas: http://stackoverflow.com/questions/24944925/background-image-jumps-when-address-bar-hides-ios-android-mobile-chrome
Perhaps this is just on my end. Just curious if anyone else can confirm.

extra space above image in guarantee and people sections on safari

I am experiencing a large space between the image and the top of the window on the guarantee and people sections of this site. It seems to work well on chrome and firefox. I added some screenshots.

Thank you for the great tutorials!

planetoftheweb / postcsslayouts Goto Github PK

postcsslayouts's Introduction

Building a Responsive Single-Page Design with PostCSS

Instructions

Branches

Installing

More Stuff

postcsslayouts's People

Contributors

Stargazers

Watchers

Forkers

postcsslayouts's Issues

02_01b

Extra row (bottom) space on products in IE

Mobile browser address bar scroll issue

extra space above image in guarantee and people sections on safari

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent