Layout Design Patterns

Friday, 3:45pm - 4:45pm
Design & Theming
Experience Level: 

Most current CSS methodologies, such as SMACSS or BEM, revolve around one core concept–components must look and behave the same no matter where they are placed in a layout. Despite layouts being a fundamental aspect of responsive design, more attention is paid to components than layouts. In this session, we’ll focus on reusable solutions to common layout problems by beginning with foundation CSS layout concepts and building up to specific techniques for implementing complex layouts in Drupal.
Topics include:

  • Naming conventions
  • Isolation vs Float
  • Intrinsic Ratios


  • Semantic grid systems
  • Asymmetric vs Symmetric grids

Drupal Theming

  • Page layout vs the System Block
  • Creating custom layouts for Panels and Display Suite

John Ferris is Lead Front-end Developer at Aten Design Group. He has implemented many complex responsive layouts for clients such as and He has spoken at past conferences on topics such as writing maintainable CSS in Drupal and Photoshop best practices for web designers.

Learning Objectives & Outcomes: 

You will come away with; a deeper understanding of CSS layout models; what to look for when choosing the most appropriate grid framework for a project; techniques for creating reusable layouts in Drupal themes. All of which will enable you to solve any layout problem with confidence.

Platinum Sponsors

Gold Sponsors