[Pro] CSS Box Model: When are there enough boxes?

After following Dan Jasker’s very good CSS Box Modeling videos, I realized that I’m not sure how you know you’ve made enough boxes.

In the video, Dan makes MANY boxes and boxes within boxes and just when I think we’re ready to add some text…he makes another box!

How do you know when enough is enough?

Thanks.

Bob


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It’s enough when it’s enough. Those video’s are older and they may suffer a bit from over ‘div-ivitis’ but it’s a start somewhere.

It comes down to the design and sometimes you need a lot and sometimes you don’t. It’s inevitably your call.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks, Dan.

It’s a little confusing. I’ve avoided the box model and CSS layout because I haven’t yet come up with a layout that works without problems and I’m wondering if it’s a lack of boxes.

I guess I’ll experiment some more.

Bob


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Well, I will tell you it’s a big time-saver when it comes to building a site that uses dynamic or flexible content. FW does a great job at putting it together as it should.

You’ve got the right tool, you just need some time and you’ll figure it out.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Sometime around 8/9/09 (at 01:55 -0400) Dan J said:

You’ve got the right tool, you just need some time and you’ll figure it out.

You do have the right tool, but I reckon you need time AND paracetemol.

Me, I’ve never been able to come to terms with the box model
process’s illogical quirks. The rules you have to follow make less
sense than English language spelling! Oh, how I long for a neater,
more Freeway-like approach.

k


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 7 Sep 2009, 3:51 am, Robert Bovasso wrote:
How do you know when enough is enough?

This site has several of the most common web layouts here, each one shows you the box model structure required, you should be able to produce these in Freeway with a bit of trial and error. the thing to remember is to give your divs sensible names.

http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm

hope it helps

Gary


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

BTW: There are some box model Freeway templates here to get stared on
here:

http://www.softpress.com/downloads/templates/skeleton_css_templates/

David

On 8 Sep 2009, at 11:57, diarbyrag wrote:

On 7 Sep 2009, 3:51 am, Robert Bovasso wrote:
How do you know when enough is enough?

This site has several of the most common web layouts here, each one
shows you the box model structure required, you should be able to
produce these in Freeway with a bit of trial and error. the thing to
remember is to give your divs sensible names.

<Holy Grail 3 Column Responsive Layout (CSS Grid & Flexbox)

hope it helps

Gary


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Just as a comment, while the box model currently provides the best
scalable layout for most purposes, has it really a future? Modern
browsers seem to be tackling upscaling effectively without breaking
the layout, so that ‘standard’ layered CSS designs can be effectively
used without a problem. Once the new browsers become more the standard
offering. (I’ve tested the likes of Safari and Firefox using my oldest
and most ‘breakable’ layouts, with only one showing really bad
degradation).

The use of layers in a pseudo-DTP style is both more intuitive and
more flexible way of working - and Freeway’s greatest strength. Surely
it is also the way forward, especially as technologies for embedding
fonts become more possible. This method also allows the use of Master
pages in Freeway, a great boon when creating a site and if you need to
develop a site that is already live or wish to provide additional
pages for it. Even image upscaling is passable for many purposes,
though not ideal for image intensive/gallery based pages.

Non-specialist Internet user’s won’t worry about image deficiencies,
if they just want to increase the size of type matter to match their
personal visual acuity. Designers want a proportional representation
of the web page at all times - not the constraints of box model
upscaling. Plus, the design freedom of CSS with the development of
Javascript functionality, et al, should (even while my ageing fingers
can still the tap key board) provide almost Flash like performance to
the site visitor. Plenty of scope for funky sites as well as more
tightly structured, newsy styles.

So for those of you who find the box model tortuous - and having used
the technique, I can understand why - perhaps a campaign to promote
modern browsers is as much a priority as trying to ‘count the boxes’.
Maybe, long term, no need to worry about planning enough boxes in the
right order for SEO considerations (and the order can make a
difference to content priority).

There will always be a place for the technically perfect, hand coded
option, but for the rest of us, why not make life easier and encourage
browser upscaling supported, perhaps, by some increased CSS
functionality and font embedding control within Freeway Pro - v6?

Colin

On 8 Sep 2009, at 14:06, David Owen wrote:

BTW: There are some box model Freeway templates here to get stared
on here:

http://www.softpress.com/downloads/templates/skeleton_css_templates/

David

On 8 Sep 2009, at 11:57, diarbyrag wrote:

On 7 Sep 2009, 3:51 am, Robert Bovasso wrote:
How do you know when enough is enough?

This site has several of the most common web layouts here, each one
shows you the box model structure required, you should be able to
produce these in Freeway with a bit of trial and error. the thing
to remember is to give your divs sensible names.

<Holy Grail 3 Column Responsive Layout (CSS Grid & Flexbox)

hope it helps

Gary


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The payoff for a web designer creating a box model page is when you
don’t know what amount of content is to be put into each div (box)
further down the line. As Dan said for a CMS page. A well designed
box model page can look good with almost any amount of content added
at a later date, keeping all boxes expanding as the designers CSS
styling intended (and keeping that nice full page width footer intact
regardless).

Maybe Freeway can make it a slightly less fickle process in the
future. Currently a little background understanding of divs and floats
is needed to accomplish it.

Here a few things to look at to get your head around what is happening:-

and clearing floats:

The Box Model:

The ah ha moment!!

David

On 8 Sep 2009, at 15:14, Colin Alcock wrote:

Just as a comment, while the box model currently provides the best
scalable layout for most purposes, has it really a future?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Point taken - but then haven’t I seen a request or two for CMS to be
built into Freeway, so that you can adjust things there? But clients
will always be clients, whatever we designers do!

Colin

On 8 Sep 2009, at 17:22, David Owen wrote:

The payoff for a web designer creating a box model page is when you
don’t know what amount of content is to be put into each div (box)
further down the line.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You’re right, If you’ve got full control over content is much less of
an issue. Especially with browser scaling appearing. The difficulty
is browser scaling is and probably will always be optional, so
therefore someone might be only upping font size and breaking your
well crafted design as a result.

Luckily not all designs need a box model. However it’s perhaps worth
understanding for the times when you do, to add to your repertoire.

David

On 8 Sep 2009, at 17:45, Colin Alcock wrote:

Point taken - but then haven’t I seen a request or two for CMS to be
built into Freeway, so that you can adjust things there? But clients
will always be clients, whatever we designers do!

Colin

On 8 Sep 2009, at 17:22, David Owen wrote:

The payoff for a web designer creating a box model page is when you
don’t know what amount of content is to be put into each div (box)
further down the line.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I totally agree. Know the options (and how to produce them) and you
can use in the most appropriate way to fill the brief. That’s why I’ve
just done a complete box model site concurrent with another that’s
layers of CSS, but with some inline content “for expansion”.

Colin

On 8 Sep 2009, at 18:06, David Owen wrote:

You’re right, If you’ve got full control over content is much less
of an issue. Especially with browser scaling appearing. The
difficulty is browser scaling is and probably will always be
optional, so therefore someone might be only upping font size and
breaking your well crafted design as a result.

Luckily not all designs need a box model. However it’s perhaps
worth understanding for the times when you do, to add to your
repertoire.

David

On 8 Sep 2009, at 17:45, Colin Alcock wrote:

Point taken - but then haven’t I seen a request or two for CMS to
be built into Freeway, so that you can adjust things there? But
clients will always be clients, whatever we designers do!

Colin

On 8 Sep 2009, at 17:22, David Owen wrote:

The payoff for a web designer creating a box model page is when
you don’t know what amount of content is to be put into each div
(box) further down the line.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Is the basic problem text sizing? HTML standards seem to want to keep the user-enlarged-text capability, right? And I can sympathize. Some web sites are designed with superman XRay vision, or maybe microscope eyes, in mind. Tiny six pixel text my bifocals can’t resolve. So I’m constantly typing command-hyphen when I surf.

So, CSS absolute positioning can’t be bunged on every little bit. Text must have the ability to push stuff at least down the page rather than run over the stuff below it. So, anything that has to be pushed has to be either in a box with the stuff above it, or, floated and cleared.

I’ve got the hang of the first case, and FW seems to do a good job at it. The latter case I’m still studying!

I’d say, I need enough boxes to hold the different bits that have to push each other down, right? In vague terms.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

That right, if you need a site thats needs to cover all contingencies,
then a box model would fit the bill.

David

On 8 Sep 2009, at 21:28, Bucky Edgett wrote:

I’d say, I need enough boxes to hold the different bits that have to
push each other down, right? In vague terms.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 9 Sep 2009, 12:34 pm, David Owen wrote:
That right, if you need a site thats needs to cover all contingencies, then a box model would fit the bill.
David

And is it correct to say the various contingencies all stem from potentially enlarged text?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Mmm, not quite. It’s more to do with variable content. As in, I do
find when doing a box model site, once done, all I need do is
concentrate on the content. The page layout just scales around any
content you put inside the div boxes. Whereas an all layered site you
can end up juggling the rest of the page to sort things out as content
grows, together with testing if content overflows badly.

The only problem with a full box model page (apart from building it)
is, as page elements are all in-line, and Master pages break.

David

On 9 Sep 2009, at 13:47, Bucky Edgett wrote:

And is it correct to say the various contingencies all stem from
potentially enlarged text?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

As in, I do
find when doing a box model site, once done, all I need do is
concentrate on the content. The page layout just scales around any
content you put inside the div boxes.

The only problem with a full box model page (apart from building it)
is, as page elements are all in-line, and Master pages break.

David

This is the approach that I take and so far it works fine. With a bit of planning the box model is much easier for me. I have used the Simple Includes action quite successfully to accommodate the broken master page issue, especially in some navigation elements and footers.

Cheers, Marcel


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Oh, sure, I wasn’t thinking that far ahead. Thank you. Updates mean longer or shorter articles, more or less illustrations. Of course. Especially on news sites and product pages. I’m not accustomed to much of that. The sites I’ve worked on have involved replacing, but not often.

Excellent. Yes, boxing for inline content makes much more sense now. Of course I need more knowledge about boxing within boxing.

How though do Master pages break?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options