Suppose I download a 960 framework, I design my site on top. I now want
to start building the site and complete it in, I suppose two weeks time.
How do I translate the design from a image template to the development
stage ? I've watched many tutorials on this subject but the details that
I and many are concerned with are never explained, it can be those
details that makes it or breaks it from understanding something.
Chris Rockwell <mailto:ch...@chrisrockwell.com>
Friday, October 03, 2014 9:18 PM
When using a Grid FrameWork must you keep all the column classes
and gutters or that is only needed when designing ?
Not at all. If the grid framework is too difficult to modify for your
needs, choose another framework, or start form scratch.
A grid framework, or any framework for that matter should be used as a
tool to help you get done faster - not something you must adhere to
(although some are extremely opinionated). Most of the frameworks
I've encountered have classes to eliminate those gutters (e.g.
push()/pull() in Susy) as needed.
Layout development can be really quick when the designers are working
off of a grid template that the devs already have a shell for. For
example, 960.gs <http://960.gs> came with layout templates for many
popular design programs. The designer could say, I used a 1024px max
width layout, 16 column grid, 20px gutters.
I don't understand about grids, columns and gutters is if you use
a grid template with the columns and gutters within Ps and place
your graphics on the grid template, what good does it help ? I
mean you still are going to position things where you want them
and how you want them and CSS doesn't have a snapping feature that
for example means you want a graphic here or there.
Unfortunately, I'm not sure I understand the question (especially
about "columns and gutters within Ps"). I think, in this context,
you're talking about how you position things within, say, your
sidebar. The sidebar would align to the grid, and then how you
position elements within it (such as images) can be adjusted. You
could certainly mimic "snapping" by taking out margin. Again, I may
be way off because I'm not exactly sure of the question.
Instead have a grid template which you designed your site
<http://line25.com/tutorials/create-a-gnarly-snowboarding-themed-web-design>
on top, now your ready to build your page, you being to create
your div, headers etc, you cut up your graphics and now how do you
translate the design from the PSD to your grid, so you get an
exact representation of your site whether it's a responsive site
or not ?
This is what I was referring to earlier - using the same grid for a
design template and your css. I'll mention that it sounds awesome in
theory but, in my limited experience, doesn't work out so easily often.
I understand how a grid works in design, not so much in css
because you have gutters, except in design it's a little easier
you can essentially snap your graphics and designs in place, there
is no code involved.
You have gutters in design also; they're just most often referred to
as white space by designers.
I hope this helps!
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org
<mailto:css-d@lists.css-discuss.org>]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org <http://evolt.org> --
http://www.evolt.org/help_support_evolt/
Crest Christopher <mailto:crestchristop...@gmail.com>
Thursday, October 02, 2014 8:31 PM
When using a Grid FrameWork must you keep all the column classes and
gutters or that is only needed when designing ?
I don't understand about grids, columns and gutters is if you use a
grid template with the columns and gutters within Ps and place your
graphics on the grid template, what good does it help ? I mean you
still are going to position things where you want them and how you
want them and CSS doesn't have a snapping feature that for example
means you want a graphic here or there.
Instead have a grid template which you designed your site
<http://line25.com/tutorials/create-a-gnarly-snowboarding-themed-web-design>
on top, now your ready to build your page, you being to create your
div, headers etc, you cut up your graphics and now how do you
translate the design from the PSD to your grid, so you get an exact
representation of your site whether it's a responsive site or not ?
I understand how a grid works in design, not so much in css because
you have gutters, except in design it's a little easier you can
essentially snap your graphics and designs in place, there is no code
involved.
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
