Design and Front End

Catalyze your creativity

Can you have it all?

In an ideal world we would be able to get the things we want immediately, in perfect condition AND at just the right price (preferably free). Unfortunately the real world of business doesn’t work that way. We have to make some compromises and choose the project parameters we value most, while sacrificing others.

The SCSSy Wild West: Partial Organization for a Complete Site

"Where the hell is this style?" --- Any frontend-er anywhere.

What defines a good partial layout? How should I align my partials to the site? Will the structure of my partials make sense to a future developer onboarding onto the project? In a month, after being buried in other projects, can I quickly navigate my partials? Should I go back to one single stylesheet and use CTRL+F to find everything? Should I use the color module instead and roll a bartik subtheme?

Intro to Frontend Ops

Frontend development is becoming more critical as web development matures. As we grow our need for backend-like workflow tools increase. During our day-to-day site development in Drupal we all have to do repetitive tasks. Let's take the pain out of the process and focus on our actual work by learning how to utilize modern frontend automation tools.

JavaScript: Beyond the Drupal Way

You may know how to JavaScript The Drupal Way, but do you know how to write clean, maintainable scripts using some of the latest techniques available to JavaScript developers?

This session will cover how and when to use several key design patterns in JavaScript. Familiarity with IIFEs and Drupal behaviors is expected and won't be covered in this session. (These will be covered in JavaScript: The Drupal Way.)

Lean Drupal Markup

As wonderful as Drupal is, it can be a nightmare to theme and create a ton of unnecessary markup that will slow down your site. This presentation will provide an overview of how to use a few contributed modules to cleanup fields and panels markup. Additionally, the presentation will cover how to create lean reusable templates for views and remove the clutter from field output. A before/after demonstration will be provided for the following areas of interest:

1. Fields
2. Views
3. Panels

Getting SASS-y with Foundation

There's a lot that goes into developing a custom responsive theme. Learn to how use Compass, SASS and the Foundation framework to simplify theming.

Just as Drupal uses php and a database to output html, theming frameworks use Compass and SASS to output css. What's the benefit? How about something like:

.benefits-include {
color: $site-green;
}

You can create variables, mixins and functions. You can nest selectors. Keep theming elements organized in a logical way (views theming in _views.scss; block theming in _block.scss).

Backbone and Drupal

Backbone JS is a new way of handling and displaying data via Javascript, built around Models, Collections, and Views to build up complex interactions which don't necessarily require complex code. It's being used on more and more sites, and although it won't solve every problem, it's very good at helping front end developers with displaying, updating, and allowing users to interact with data without having to round-trip the user to the page.