css injection

Gulp for Beginners

Gulp is a tool that helps you out with several tasks when it comes to web development. It's often used to do front end tasks like:

  • Spinning up a web server
  • Reloading the browser automatically whenever a file is saved
  • Using preprocessors like Sass or LESS
  • Optimizing assets like CSS, JavaScript, and images

This is not a comprehensive list of things Gulp can do. If you're crazy enough, you can even build a static site generator with Gulp (I've done it!). So yes, Gulp is extremely powerful, but you'll have to learn how to use Gulp if you want to create your own customized build processes.

So that's what this article is for. It helps you get so good with the basics of Gulp that you can begin exploring everything else for yourself.

(more…)

Cross Browser CSS Injection

The ability to inject newly-modified CSS on every file change (without reloading the page) is the type of workflow-enhancement that you never truly appreciate... until you lose it.

This is exactly what happened to me recently.

For at least the last 12 months I had been using Grunt and the LiveReload browser extension to inject CSS when my files changed. It felt like a really nice workflow until I had to work on a project that required IE7 & 8 support. The LiveReload plugin I was using simply didn't support older versions of IE. For the first time in over a year I had to resort to manual page-refreshes every time I made a change to my CSS. It was painful. It's also why I built Browser-Sync

(more…)

#010 – CodeKit For Great Success

In this screencast we have CodeKit start watching our project. This makes lots of developer tasks much easier.

The first thing we do is us it to losslessly optimize an image. Easy one click.

Then we install Compass in the project. This gives us the ability to use CSS3 mixins provided by Compass, instead of having to create our own, which we should surely do a worse job.

Perhaps most importantly, Compass (through CodeKit) now watches our project folder and automatically compiles our .scss files into .css that we actually use. As an added bonus, when save our .scss files in our code editor, those new styles are "injected" into the page automatically, which is awesome.

Style Injection is for Winners

By "style injection", I mean being able to see styling changes immediately after authoring them without having to manually refresh your browser window. This isn't a brand new concept, I just mention it now because it's so awesome that if it's not a part of your workflow you should consider updating yours to include it.

(more…)

Inject New CSS Rules

If you need to change the style of an element with JavaScript, it's typically better to change a class name and have the CSS already on the page take effect and change the style. However, there are exceptions to every rule. For instance, you might want to programmatically change the pseudo-class (e.g. :hover). You can't do that through JavaScript for the same reason inline style="" attributes can't change pseudo classes.

(more…)

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag