Proposed Sessions

Responsive Web Design with Sass+Compass

Snugug — Tue, 18 Dec 2012 19:14:55 +0000

Mobile matters. There are more than 4x the number mobile devices activated each day than there are babies born and the question of how to effectively deliver your content to everyone, regardless of how they get there, should be the most important question for product owners and developers today. Enter responsive design.

Responsive design comes from the idea that there is not a mobile web and a desktop web but instead a single, unified web. The most obvious new design paradigm to come from this new thinking are websites that are not built on a fixed width grid but rather one that expands and contracts depending on how much screen real estate is available to the current user. To be able to do this, however, you want a powerful set of tools at your disposal in order to aid in you in the large amount of work needed to build a responsive design. Enter Sass+Compass

Sass 3.2 introduces a number of new features designed specifically to aid in responsive design including the ability to modularize your media queries and call them on-demand or to write media queries based on calculations in your Sass files. Compass v0.12 improves upon Compass's already impecable mixin and function libraries with a large update to Compass's Image Sprite functionality, a traditionally hard technique made drop-dead easy and essential to the Mobile First Responsive Design philosophy that should be taken when designing websites.

Compass also allows us to tap into all a community of extensions to make your lives easier, including some that are specifically designed to help us with the hard parts of Responsive Web Design. There are Susy and Singularity for semantic, responsive, custom fluid grids, Breakpoint and Respond-to for managing of your media queries, and Toolkit to provide responsive and progressive enhancement tools as well as helpers to get you up and running with a responsive web design stack quickly.

Schedule info

Status:

Proposed

Session Info

Speaker(s):

Snugug

Track:

Frontend

Featured:

Not Featured

Experience level:

Advanced

Taming Views with Themes, jQuery, and CSS

jrowny — Tue, 18 Dec 2012 22:13:55 +0000

With jQuery and Views you can create a wide array of useful widgets, blocks, and pages. From advanced "spreadsheet" style tables to implementing beautiful galleries, jQuery and Views is the way to go. In this session we'll expect beginners and build up skills in CSS, jQuery, and PHP to where you are comfortable customizing any view, even if you've never done it before.

Schedule info

Status:

Proposed

Session Info

Speaker(s):

jrowny

Track:

Frontend

Featured:

Not Featured

Experience level:

Beginner

Sass - OO'S'CSS w/Extends and Silent Placeholders

dale.sande — Wed, 19 Dec 2012 18:44:48 +0000

Click here to watch Sass - OO'S'CSS w/Extends and Silent Placeholders.

One of the frustrations of OOCSS concepts is the amount of presentational classes that need to be created and the method of applying them to the DOM.

Sass has looked to address this issue first with Mixins, then Extends, each with their own issues of duplicated code or creation of unnecessary code.

Sass 3.2 introduces the concept of 'silent classes' whereas standardized presentational classes can be created, but are silent until extended in a class used by the application.

BONUS NEW MATERIAL: How to create Placeholder Objects that can be simply applied and inherit values from a global config.

Slides:

Sass_Silent_Classes.pdf

Schedule info

Status:

Accepted

Time slot:

Wednesday, May 22 - 02:15pm-03:15pm

Room:

B 113 - NewMedia!

Session Info

Speaker(s):

dale.sande

Track:

Frontend

Featured:

Not Featured

Experience level:

Intermediate

Style Guide Driven Development

dale.sande — Wed, 19 Dec 2012 19:07:10 +0000

Comps and screen driven design is one of the greatest red herrings of app and web development.

Working on medium to large scale web projects, CSS can get away from you really quickly. Without an honest methodology and process for managing your UI assets, failure is almost certain.

This presentation illustrates the failures of many cross team large scale projects. Poor reuse of CSS and HTML and the failure of the design comp process.

Discussed are techniques for using a styleguide framework, templating solutions, elemental and modulare development patterns in the UI and how they will totally save your bacon!

Sorry, current slide deck is larger then allowed.

Schedule info

Status:

Proposed

Session Info

Speaker(s):

dale.sande

Track:

Frontend

Featured:

Not Featured

Experience level:

Beginner

Scalable and Modular Architecture for CSS

snookca — Wed, 02 Jan 2013 16:27:29 +0000

Click here to watch Scalable and Modular Architecture for CSS.

CSS is easy? CSS is messy! And as a project grows, it only gets messier. You find yourself throwing !important at everything or fighting with long selectors just to get a style to overrule another. This session looks at a few topics from the book, Scalable and Modular Architecture for CSS, that can help bring things under control.

Schedule info

Status:

Accepted

Time slot:

Tuesday, May 21 - 04:30pm-05:30pm

Room:

OR 204 - Blackmesh

Session Info

Speaker(s):

snookca

Track:

Frontend

Featured:

Featured

Experience level:

Intermediate

Clean out your Sass junk-drawer

dale.sande — Thu, 10 Jan 2013 22:03:34 +0000

CSS has had a long and sordid past. A developer never sets out with the goal of making a complete and total mess of things. Their intention is not to build something that is practically illegible, impractical to maintain and is limited in scale. But somehow, this is where many inevitably end up. Luckily, all is not lost. With some simple strategies, organizational methods and out-of-the box tools, we can really help get that junk-drawer inline.

For many of us getting started with Sass, at one time or another have created a junk-drawer of files. For most, this was a rookie mistake, but for others, this is a continuing issue with our architecture and file management techniques. Sass doesn't come with any real rules for file management so developers are pretty much left to their own devices.

Slides:

Sass_junk-drawer.pdf

Schedule info

Status:

Proposed

Session Info

Speaker(s):

dale.sande

Track:

Frontend

Experience level:

Beginner

Panels for Themers - Creating Highly Flexible Layouts

davidneedham — Wed, 16 Jan 2013 00:03:05 +0000

With the power of Panels, you never have to make a .tpl file ever again! Okay, that's not true entirely, but what Panels does give you is the ability you to create Drupal aware layouts that can be reused between dozens of other sites. If you create custom Panel pages per-content type, per-node, per-anything (instead of custom .tpl's for each) you will significantly reduce the number of .tpls you have to keep create and keep track of while saving a huge amount of time. Say goodbye to crowded templates folders!

This session is perfect for:

People who are sick and tired of creating the same sort of .tpls for every site
People who can't remember which .tpl they need to edit for XYZ
People who want to create custom Panel layouts
People who want to make their existing layouts more reusable

Lately it's been fairly common to require only page.tpl.php and a few .tpl files for views. Don't believe me? On my last project I had only four .tpls, including views!

Panel layouts are easy to make in the gui layout builder provided by the Panels module, but unfortunately it seems to have several drawbacks. This session will teach you how to make a panel layout from scratch the most performance-minded and efficient way possible - in code.

Panels also gives you the flexibility to add classes and even pre-configured styles to any region or pane. Ever wanted to make all of the panes in a region have rounded corners? How about throwing in some jQuery to create tabs from all of the panes in a region? Easy-peazy!

Slides available via github: http://is.gd/panel_webinar

Schedule info

Status:

Proposed

Session Info

Speaker(s):

davidneedham

Track:

Frontend

Experience level:

Intermediate

Beginner Theming

davidneedham — Wed, 16 Jan 2013 00:13:52 +0000

Session Description

Believe it or not, Drupal makes theming easy!

Drupal provides the themer with a system of overrides that allows you to change literally anything on your site. Themers decide what gets printed to the screen and what doesn't - essentially what lives and dies. For this and some other reasons, themers have ultimate control.

Don't let it get to your head though. Before you can make Drupal bend to your will, you have to introduce yourself via the .info file. From there, you can control style with the CSS we've all come to love. Want to add in your own divs, regions, classes, etc? That will require copying and tweaking one of Drupal's template files (a super easy process).

Following this easy pattern, you can get most of the way there without writing PHP. Even if you need to extend the way that breadcrumbs, pagers or other Drupal elements work via the template.php file, you can usually find a friendly companion on Drupal.org who has code you can copy and use without having to fully understand it.

By the end of the class, you'll be able to create your own themes, sub-themes and rock Drupal's world like you never have before - all while fulfilling the mantra of a themer: "Make it pretty."

[The techniques you learn in this session will apply to both Drupal 6 and Drupal 7, however I will be leading the session in Drupal 7.]

Intended audience:

Beginners who want to learn the basics of theming without knowing PHP.

Schedule info

Status:

Proposed

Session Info

Speaker(s):

davidneedham

Track:

Frontend

Experience level:

Beginner

Using Twig: The new template engine in Drupal 8

jenlampton — Thu, 17 Jan 2013 02:48:21 +0000

Click here to watch Using Twig: The new template engine in Drupal 8.

Drupal 8 will have a fancy new template engine (Twig) and a simplified theme layer. We'll show you the new syntax (don't worry, it's easy) and walk through how you can actually use Twig in your every day lives.

* Are you a theme developer? Come see how consistent, easy, and straightforward it will be to create your own custom themes.

* Do you maintain contributed modules? Come learn what you need to do in order to adapt your code for Drupal 8.

Schedule info

Status:

Accepted

Time slot:

Wednesday, May 22 - 03:45pm-04:45pm

Room:

Hall A1 - Acquia

Session Info

Speaker(s):

jenlampton

Fabianx

JohnAlbin

Track:

Frontend

Featured:

Featured

Experience level:

Beginner

CSS3: Now and in the Future

clamato1 — Fri, 18 Jan 2013 16:07:26 +0000

CSS continues to develop and with the advent of CSS3 there are some exciting things that are available to designers and developers in the Drupal world. In this session you will learn about new selectors - attribute, UI, structural and target - that you an use to grab anything for styling. You will learn techniques for implementing new CSS3 modules like rounded corners, opacity, text shadow, multiple backgrounds, gradients, @font-face, multi-column text, flexible box model, transitions & transformations, blending mode & filter effects & regions. We will cover Drupal modules that you can use to ensure your styles and layouts are as consistent as possible in all browsers - or gracefully degrade when needed. You will also leave with an arsenal of debugging tools that can help you build and maintain a modern Drupal site.

NOTE: The slides uploaded below are from an older presentation that will be updated and expanded for Drupalcon,

Slides:

ccs3-now-future.pdf

Schedule info

Status:

Proposed

Session Info

Speaker(s):

clamato1

Track:

Frontend

Experience level:

Beginner