Practical Site Example

[snetErz]

Hey all

I've been working on a practical example using GSS. Focuses on a basic two column layout with header banner and footer area. I plan to add some navigation elements, and later focus on adding in mobile specific layout changes.

Let me know what you think, and feel free to break it down.

Example

http://sneterz.com/portfolio/gss/

[paulyoung]

Hey there! It's coming along. Keep it up!

A couple of notes after a quick scan:

Plural selectors You may have run into some issues with using plural selectors, which might explain some of your approach. This is an issue with the current version of GSS and is being addressed in a development branch. The workaround for now is to use IDs.

Percentages I find using percentages for main layout to be unconventional since it keeps GSS in the dark about parts of the layout. You could do this instead:

#wrapper, #header, #banner, #content, #footer {
  width: == ::window[width];
}

#side-col[width] == (::window[width] / 100) * 30;
#main-col[width] == (::window[width] / 100) * 70;

Virtuals You should be able to eliminate the need for wrapper elements by using virtual elements. In the current version they're limited to being used in the scope in which they're defined but that should be changing soon.

You can use them like this:

#body {
  @virtual "wrapper";
  "wrapper"[width] == ::window[width];
  "wrapper"[max-width] == [myWidth];

  @v |-[#header]-[#banner]-[#content]-[#footer]-| in("wrapper");
}

Texture and structure We use the terms "texture" and "structure" which translates to texture.css and structure.gss (vs styles.css and layout.gss.

Along these lines, things like color: #FFF; would live in texture.css.