GNOME.org
 

Re: [Gimp-user] GIMP Site Redesign

Rather than wade through the twitter bootstrap code, I reworked the
original code to make *part* of it fluid, as a quick example of "how
to". Here's a temporary link to the revised, partially fluid code:
http://ninedegreesbelow.com/temp/gimp-site/gimp-redo-1.html

The original code is divided into header, body (not to be confused
with <body></body>), and footer sections. The body section is divided
into three subsections called "filters," "tools", and "downloads".
Each body subsection has an image, a header, and a short paragraph. In
the original code the images are background images, but I changed them
to regular images. I set the various max-width values to the values
indicated in the original code, and then at smaller screen sizes the
images and text scale proportionately.

You can resize the page and the images and text in (only) the body
section will resize to fit the available space, but of course the
fixed width header and footer spill over into a scrollbar. In Firefox
and Rekonq the fluid portion of the rewrite looks OK, but the layout
is broken in Chromium (the slideshow drops down over the body section,
haven't checked to see why; Kassim's original code doesn't have this
problem).

With a fluid layout, at anything smaller than a 600px wide screen a
media query should be triggered to start substituting different css
code so that the images are full screen and the text slides under the
images. Media query code works a charm, but I haven't put any in.
How-tos on the web are readily available and I can supply some example
code if it would help.

The apple-type icons are missing because I don't know where they came
from. Personally I find the icons a bit distracting, but probably a
lot of people like them.

Hope this example of "fluid rewrite" helps some!

Elle
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]