web designer + front-end developer

How to apply classes to elements with CKEditor 4, in Drupal 7

Posted on by Chip Cullen

I’m just jotting down a couple things that I figured out recently with regards to making modifications to the CKEditor WYSWIG editor in a Drupal 7 installation.

On a recent project, we had a client who wanted the ability to have images in the body float left or right. What I wanted to see happen, as a front end developer, is that the images would simply have a class attached to them, and my external CSS would handle the floating.

Why a class (as opposed to inline styling?):

  • Cleaner markup in general
  • Style attributes were being stripped by our text format, and I didn’t want to let any HTML fly within this format
  • Just adding a class would make future modifications easier (rather than trying to modify individual instances of inline styles)

After an afternoon of experimentation, I found out you need two files added to your theme, and a weird trick to make sure it works.

Continue reading →

Posted in Blog, Drupal Tagged ,

6 Comments Read More

SASS’s trailing ampersand and modular code

Posted on by Chip Cullen

I recently learned of a feature of SASS that I think is extremely powerful, and little known about. I’m not even sure if it has a proper name*, so I’ll make one up and call it the “insert parent selector”. And it can help you deal with exceptions or variations that might make otherwise modular code become unruly.

And all it comes down to is a trailing ampersand – “&”.

Continue reading →

Posted in Blog, Web Craft Tagged ,

Leave a comment Read More

SASS, Livereload and Chrome Dev Tool crashes

Posted on by Chip Cullen

I’ve been experiencing a bizarre behavior when using:

  • Livereload (either via the app or a command line utility like Grunt)
  • Google Chrome
  • Having Google Chrome Dev Tools open

Where, every time I make a change to an .scss file, and Chrome Dev Tools are open in the relevant window – it will crash when Livereload attempts to update the page.

Aw Snap! Error when using Livereload and Chrome Dev Tools

Continue reading →

Posted in Blog, Drupal, Web Craft Tagged , , ,

2 Comments Read More