Problem/Motivation

If Zen doesn't provide responsive layouts CSS, it will become a relic of the past. All websites will become some form of responsive. So providing only fixed layouts is folly.

Andy Clarke posted recently:

Today, anything that’s fixed and unresponsive isn’t web design, it’s something else. If you don’t embrace the inherent fluidity of the web, you’re not a web designer, you’re something else.

Web design is responsive design, Responsive Web Design is web design, done right.

Proposed resolution

Add a responsive layout to Zen and make it the default layout. Use the Zen Grids mixins so that it is easy for sub-theme authors to create their own responsive layout. http://zengrids.com

Remaining tasks

  • Release Zen Grids 1.0 over at https://github.com/JohnAlbin/compass-zen-grids
  • Add an example responsive layout with media queries to Zen
  • Convert the old fixed width layouts to use Zen Grids too (since its way easier than the raw CSS.)
  • Ensure the Zen base theme settings has a layout switcher (to be used only by the base theme) so people testing Zen can see the possible layouts.

Original report by n8tron

I've turned Zen's layout-fixed.css into simple responsive layout starter project. This needs work... This was proportioned off of a 1024 canvas.

Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design

Comments

n8tron’s picture

/**
* @file
* Layout Styling (DIV Positioning)
*
* Define CSS classes to create a table-free, 3-column, 2-column, or single
* column layout depending on whether blocks are enabled in the left or right
* columns.
*
* This layout is based on the Zen Columns layout method.
*   http://drupal.org/node/201428
*
* Only CSS that affects the layout (positioning) of major elements should be
* listed here.  Such as:
*   display, position, float, clear, width, height, min-width, min-height
*   margin, border, padding, overflow
*/

/*
* Body
*/
body {
}

#page-wrapper,
.region-bottom {
  /*
   * If you want to make the page a fixed width and centered in the viewport,
   * this is the standards-compliant way to do that. See also the ie6.css file
   * for the necessary IE5/IE6quirks hack to center a div.
   */
  margin-left: auto;
  margin-right: auto;
  width: 93.75%; /* 960px / 1024px */
}

#page {
}

/*
* Header
*/
#header {
}

#header .section {
}

.region-header {
}

/*
* Main (container for everything else)
*/
#main-wrapper {
  position: relative;
}

#main {
}

/*
* Content
*/
#content,
.no-sidebars #content {
  float: left; /* LTR */
  width: 100%;
  margin-left: 0; /* LTR */
  margin-right: -100%; /* LTR */ /* Negative value of #content's width + left margin. */
  padding: 0; /* DO NOT CHANGE. Add padding or margin to #content .section. */
}

.sidebar-first #content {
  width: 79.1666666666667%;
  margin-left: 20.8333333333333%; /* LTR */ /* The width of .region-sidebar-first. */
  margin-right: -100%; /* LTR */ /* Negative value of #content's width + left margin. */
}

.sidebar-second #content {
  width: 79.1666666666667%;
  margin-left: 0; /* LTR */
  margin-right: -79.1666666666667%;; /* LTR */ /* Negative value of #content's width + left margin. */
}

.two-sidebars #content {
  width: 58.3333333333333%;
  margin-left: 20.8333333333333%; /* LTR */ /* The width of .region-sidebar-first */
  margin-right: -79.1666666666667%; /* LTR */ /* Negative value of #content's width + left margin. */
}

#content .section {
  margin: 0;
  padding: 0;
}

/*
* Navigation
*/
#navigation {
  float: left; /* LTR */
  width: 100%;
  margin-left: 0; /* LTR */
  margin-right: -100%; /* LTR */ /* Negative value of #navigation's width + left margin. */
  padding: 0; /* DO NOT CHANGE. Add padding or margin to #navigation .section. */
  height: 3em; /* The navigation can have any arbritrary height. We picked one
                    that is the line-height plus 1em: 1.3 + 1 = 2.3
                    Set this to the same value as the margin-top below. */
}

.with-navigation #content,
.with-navigation .region-sidebar-first,
.with-navigation .region-sidebar-second {
  margin-top: 3em; /* Set this to the same value as the navigation height above. */
}

#navigation .section {
}

/*
* First sidebar
*/
.region-sidebar-first {
  float: left; /* LTR */
  width: 20.8333333333333%;
  margin-left: 0; /* LTR */
  margin-right: -20.8333333333333%; /* LTR */ /* Negative value of .region-sidebar-first's width + left margin. */
  padding: 0; /* DO NOT CHANGE. Add padding or margin to .region-sidebar-first .section. */
}

.region-sidebar-first .section {
  margin: 0 10% 0 0; /* LTR */
  padding: 0;
}

/*
* Second sidebar
*/
.region-sidebar-second {
  float: left; /* LTR */
  width: 20.8333333333333%;
  margin-left: 79.1666666666667%; /* LTR */ /* Width of content + sidebar-first. */
  margin-right: -100%; /* LTR */ /* Negative value of .region-sidebar-second's width + left margin. */
  padding: 0; /* DO NOT CHANGE. Add padding or margin to .region-sidebar-second .section. */
}

.region-sidebar-second .section {
  margin: 0 0 0 10%; /* LTR */
  padding: 0;
}

/*
* Footer
*/
.region-footer {
}

/*
* Page bottom
*/
.region-bottom /* See also the #page-wrapper declaration above that this div shares. */ {
}

/*
* Prevent overflowing content
*/
#header,
#content,
#navigation,
.region-sidebar-first,
.region-sidebar-second,
.region-footer,
.region-bottom {
  overflow: visible;
  word-wrap: break-word; /* A very nice CSS3 property */
}

/*
* If a div.clearfix doesn't have any content after it and its bottom edge
* touches the bottom of the viewport, Firefox and Safari will mistakenly
* place several pixels worth of space between the bottom of the div and the
* bottom of the viewport. Uncomment this CSS property to fix this.
* Note: with some over-large content, this property might cause scrollbars
* to appear on the #page-wrapper div.
*/
/*
#page-wrapper {
  overflow-y: hidden;
}
*/
input {
  max-width:100%;
}

/*
* Small Screen
*/
@media screen and (max-width: 600px) {
  /* RESET */
  #content,
  #navigation,
  .region-sidebar-first,
  .region-sidebar-first .section,
  .region-sidebar-second,
  .region-sidebar-second .section {
    float:none;
    margin:0 !important;
  }
  #content,
  .one-sidebar .sidebar {
    width:100% !important;
  }
  .two-sidebars .sidebar {
    width:50%;
    float:left;
  }
}

n8tron’s picture

Maybe a starting point.

img,
embed,
object,
video,
input {
  max-width: 100%;
}

/*
* Small Screen
*/
@media screen and (max-width: 600px) {
  /* RESET */
  #logo,
  #name-and-slogan,
  #content,
  #navigation,
  .region-sidebar-first,
  .region-sidebar-first .section,
  .region-sidebar-second,
  .region-sidebar-second .section {
    float:none !important;
    margin:0 !important;
  }
  #content,
  .one-sidebar .sidebar {
    width:100% !important;
  }
  .two-sidebars .sidebar {
    width:49%;
    float:left;
  }
  #header {
    text-align:center;
  }
}

JohnAlbin’s picture

Version:7.x-3.1» 7.x-5.x-dev
KrisBulman’s picture

after reading @beep's book, I am very interested in seeing this come into play. Hope to see some interest in this.. mix it up with Sass and we have gold.

JohnAlbin’s picture

Title:Simple Baseline Responsive Layout CSS» Add responsive layouts to Zen

Just closed a duplicate issue. See #1249838: Add responsive layouts to Zen

I said:

If Zen doesn't provide responsive layouts CSS, it will become a relic of the past. I'm of the belief that all websites will become some form of responsive. So providing only fixed layouts is folly.

And Kris Bulman replied:

Reminds me of something Andy Clarke posted about recently

Today, anything that’s fixed and unresponsive isn’t web design, it’s something else. If you don’t embrace the inherent fluidity of the web, you’re not a web designer, you’re something else.

Web design is responsive design, Responsive Web Design is web design, done right.

http://forabeautifulweb.com/blog/about/i_dont_care_about_responsive_web_...

jorisx’s picture

yes would be nice to see some responsive zen, http://nerd.vasilis.nl/adaptive/zengarden.html haha :)

But for real, where to start with zen and responsive css layout design?
guess I would like 3 column layout on a monitor, a 2column on a tablet(horizontal) and an 1 column-layout on a tablet(vertical) and phone..

KrisBulman’s picture

I think many projects will require a fixed responsive layout of a few set widths over a completely fluid approach which requires an extreme amount of development time.. Chris Eppstein's grid demos the fixed width responsive approach..

demo here:
http://style.caring.com/layouts/two-col-right

documentation here:
http://chriseppstein.github.com/blog/2011/08/21/responsive-layouts-with-...

This example supports 3 widths, but can be adapted to support more.

desktop (which doubles as tablet-landscape)
handheld-landscape
handheld-portrait

There are grids such as semantic.gs, which support both fluid and fixed layout options, which could be used instead of his pixel only approach, but I think the idea he demos is the right idea and gives lots of options.

JohnAlbin’s picture

I've added the Zen Grids mixins to 7.x-5.x. http://zengrids.com/

We (at Palantir) are stress-testing it on a project right now and figuring out to improve it. But we're almost done. Already up to Zen Grids 1.0.beta.5. I've got some tutorials planned, but the reference docs are mostly up-to-date. http://zengrids.com/help/

JohnAlbin’s picture

Assigned:Unassigned» JohnAlbin
Priority:Normal» Major

I've added Zen Grids 1.0.rc.2 to Zen.

This is the final issue before a Zen 7.x-1.0-beta1 7.x-5.0-beta1 release. I'm going to use the same responsive layout design that we added to Stark in Drupal 8 last week (but using Zen Grids instead of raw CSS.)

anniegreens’s picture

This is the final issue before a Zen 7.x-1.0-beta1 release.

Should this be 7.x-5.0-beta1?

anniegreens’s picture

Also, I wanted to request that

gem install zen-grids --pre

be in the documentation in the 7.x-5.x-dev branch until Zen Grids 1.0 is released. The --pre is key, since RubyGems cannot find a valid gem called 'zen-grids'.

JohnAlbin’s picture

Automatically closed -- issue fixed for 2 weeks with no activity.

Anonymous’s picture

Issue summary:View changes

Add issue summary