search

18F / web-design-standards-drupal

A Drupal base theme that uses the U.S. Web Design System. (ARCHIVED)
Other
46 stars 12 forks source link

Add Gulp plugins #25

Open iris-i opened 8 years ago

iris-i commented 8 years ago

As a contributor I want to add extra gulp plugins, so I can improve my development workflow. We could build a task with the following plugins: sourcemaps, autoprefixer, (I believe that bourbon takes care of prefixing) browsersync?(haven't tried this. Appreciate thoughts/opinions on it) css linting, bourbon & neat using node (https://www.npmjs.com/package/node-bourbon) -- and any other useful plugins. This issue is dependent on #20

fureigh commented 8 years ago

@iris-i Thanks for this! #20 is now merged, so I believe this is unblocked.

Potentially relevant: the "CSS architecture" section of the design standards' documentation.

jenter commented 8 years ago

@fureigh this is already being tracked but wanted to give more details on a desirable scenario.

patrickcate commented 8 years ago

autoprefixer, (I believe that bourbon takes care of prefixing) I'd recommend using posstcss/autoprefixer. Yes bourbon has mixins for some prefixing, but there are support and maintenance disadvantages:

  1. You rely on Bourbon to add mixins for new CSS properties.
  2. Bourbon has their own browser support guidelines which may not match those using the Drupal theme. Bourbon removes prefixing mixins which fall outside their supported versions. Autoprefixer doesn't care what level of browser support you need, it adjusts to whatever level you configure it for.
  3. As browser support changes, you have to add/remove/replace mixins with their native CSS properties. With autoprefixer, you use the native properties from the start, and it does all the prefixing based on your browser support config and caniuse data.
  4. Postcss/autoprefixer is very fast. Whether you'll notice the difference however depends on the size and complexity of your CSS.

After using autoprefixer, I never looked back to using mixin libraries for this prefixing. You can read more about the advantages of autoprefixer at: https://css-tricks.com/autoprefixer/ The article is a little old, but still relevant.

browsersync?(haven't tried this. Appreciate thoughts/opinions on it)

I've used it in several projects. It's superior to livereload in almost every way. When making RWD themes, it's particularly nice how it tracks/syncs browser scrolls and clicks in different browser windows. It's also nice that you can view your local site on actual mobile devices if they are on the same wifi network. The only disadvantage I've run into is that the initial config takes a little more time than livereload, where you're just adding a script tag.