CSS

More and more these days, we need to add custom styles to content that the user enters. This can be a challenge for front end developers as we don't know how the information will be entered and have less control over the structure. One thing we can do to help content editors is to provide them with classes and styles based on these classes that they can add in the WYSIWYG.

As this is not a how to set up a WYSIWYG tutorial, I will just state that we use CKEditor.

Once CKEditor is installed, you can begin configuring it and adding your own styles and functionality.

While working on recent Drupal projects, I learned that Internet 10 and 11 (IE10-11) no longer support IE conditional comments. Conditional comments allow us to target specific versions or version ranges of IE to correct bugs or inconsitentices that normally are not present on other browsers. Typically for IE9 and below, we have been able to write conditional css by using something like this:

This presentation from DrupalCamp Atlanta 2015 covers a discussion on the d3.js library for an audience of site builders, themers, and developers.

Data-Driven Documents or D3 refers to a javascript library combining html, css and sag to build graphic visualizations for data. The d3.js library uses scalable vector graphics to generate charts, graphs and maps that are scalable and interactive.

Check out the session recording below. It covers: 

Writing CSS is easy. Writing CSS that can scale and can be easily maintained is not.

At DrupalCamp Atlanta 2015, I presented a session on how to achieve next-level CSS. My presentation focused on techniques and best practices for writing scalable, maintainable CSS. 

Check out this video of my session "Leveling up CSS with SMACSS and BEM" that explores:

I recently inherited a Drupal 7 theme that did not use CSS preprocessors like Sass or Less. While the CSS files were clearly organized, they contained more than 15,000 lines of code which made maintainability a difficult task.

Good markup matters. As a front-end developer, I interact with Drupal’s markup on a daily basis and I experience first-hand the benefits of good markup and the frustration of poor markup. A lot of the content on a Drupal website is produced by views. Whether they are out of the box or custom views, they are powerful and present us with great opportunities to manipulate the content and markup. Today I will walk you through a simple example on producing cleaner and semantic markup using views.

There have been plenty of blog posts touting the reasons to use Sass as a CSS preprocessor, and if you've been doing responsive design for a while, you're probably already using the Breakpoint gem with Sass. But there are many ways to use both of these tools, so let's talk about using breakpoints effectively. 

Start with the small screen first, then expand until it looks like sh*t. Time for a breakpoint!
- Stephen Hay.

One of Drupal’s best practices is to break up the site’s CSS and JavaScript into smaller files to make maintenance easier. Along with this, many modules will include their own CSS and JS files, so before long a site may have twenty, thirty, or more CSS and JS files that are downloaded by the visitor in order for the site to look and work correctly.

If you're familiar with Sass, you're probably well aware of the Breakpoint mixin and it's awesomeness. It's a tool that makes using media queries extremely easy. Instead of having to break up your CSS into large chunks by breakpoint or even into separate stylesheets, you can organize your CSS by base elements, layout, module, state, or theme.

Last night I was working on a project where the mockups called for some assymetrical button shapes that were all different sizes. Rather than creating a half a dozen background images for each button length, I wondered if I might just use an SVG or Scalable Vector Graphic file as the background which I could then stretch as needed. As you know, there's no penalty of pixelation when stretching SVGs because they are not based on pixels. This would also save a lot of load time on the site, as I can load one vector image instead of half a dozen pixel-based images.