Better CSS breakpoints

[gluxon]

The Responsive Mode is currently not utilizing available space the best it can.

At 850px width, the clock places the current time at the top of the script. This should be changed to a lower value.

There is another change at 767px, which should also be adjusted.

[ethnt]

You're right—my original goal was to get it to the point where it looked good on iOS devices. The breakpoints could be better.

[ethnt]

The framework I'm using (Susy) is using a CSS preprocessor called Compass. This is based off of a language called SCSS, which adds functionality to CSS. That includes what are called "mixins".

Basically, with Susy, you can use the at-breakpoint mixin:

$total-columns: 4;

.page {
  // Establish our default 4-column grid container.
  @include container;

  // Create a media-query breakpoint at a min-width of 30em
  // And use a larger 8-column grid within that media-query.
  @include at-breakpoint(30em 8) {
    // Establish our new 8-column container.
    @include container;
  }
}

I'm currently not utilising this, but I plan to rewrite a good majority of structural CSS (#259) using this mixin.

[ethnt]

We could possibly re-write the clock CSS using "mobile first" philosophy. The 320 and Up framework does this.

There's a good post about it here.

[gluxon]

I actually don't understand the concept of 320 and up. Why benefits do you get from coding smaller to larger, and not the other way around? I can't find any page on their site that explains this.

[ethnt]

Basically it aims for you to prioritize for different devices. You'd load CSS as you need it (so if you were on a screen with a width of 480px, you'd only load the 480px stylesheet. If you are on a screen with a width of 1048px, you'd load only that stylesheet). It also helps you organize and prioritize your HTML.

[gluxon]

I got that part, but the concept 320 and up uses is: first create CSS for 320px devices. Then add code to modify the layout at 480px, then 640px, and so-on. My implementation is doing the opposite. It goes from large to big in the CSS code, using 1050px as the start base, compared to 320 and up using 320px as the base. I don't understand why either way would be better.

Back then we were just getting started with responsive web design and many sites, including mine, and frameworks and boilerplates like HTML5 Boilerplate, structured their CSS3 Media Queries from the desktop down, rather than for small screens up. (Oh how we laughed when we realised our mistake.)

Just curious as to if you knew the answer. ;)

[ethnt]

You should put your implementation on GitHub!