Layout Design Patterns


Click here to watch Layout Design Patterns

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

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.


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.

Schedule info
Experience level: 
Drupal Version: 
Drupal 7.x
Time slot: 
Wednesday · 02:15-03:15
17 - Forum One | 4th floor