Graphical comparison of basic layout structures

[chagrined]

I originally posted these in my own account, but then I read about that "give a comm some love" thing and thought maybe I should post them somewhere. A very helpful and kind person on #dw_styles told me I should post them here!

So, re-posted from my journal: simple graphics showing the basic structure of all the default DW layouts. Due to many of the layouts having identical basic structures, these narrowed down to six groups. I hope these are somewhat useful to others! I made them for myself mainly so I could visually compare the basic structures of the different layouts, to figure out which one(s) I want to play around with further, or what I'd want to do with them.


**The alignment of things (i.e., how on some layouts I have elements going horizontally rather than vertically) is just roughly based on whatever the layout was default styled as; these could of course be altered with your styling.


Bases:



Basic Boxes, Blanket, Boxes and Borders, Brittle, ColorSide, Crossroads, Fluid Measure, Funky Circles, Modish, Refried Tablet, Stepping Stones, Tabula Rasa, Tranquility III:



Drifting:



Negatives:



Skittlish Dreams, Sunday Morning, Transmogrified:



Zesty:

Comments

[tyger]

Okay this? This is super-awesome and shall be quite useful. :D *bookmarks*

[chagrined]

Yay! :D Haha, I think only one person on my dwircle found it useful, so I am glad at least one other person will find use for it, here.

[tyger]

Dude, it shows you how things are laid out! Theoretically this will lead to less screaming at things to move the way you want them to, damnit! So! :D

[chagrined]

:D :D Yes! Haha, I want to make an in-depth graphical guide to one or a few of the layouts, maybe, like I had seen done in the past for various layouts on LJ (like Expressive), but I have to figure out which of the layouts I want to play with first. Then I can make something that's a bit prettier and more detailed perhaps. :)

[tyger]

Hee~ That would be awesome. I totally enable this, as much as I can! (Have you seen the Bloggish one? It's kind of. Holy shit epic, and the most useful thing for that layout ever.)

[chagrined]

I hadn't seen that one! Though I have seen/used this one for Expressive in the past, which looks to be about the same level of detail. Anyway, if I end up doing something like this, that is at least the level of detail I'd want to go into. :D It is indeed so incredibly useful.

[tyger]

:D That's cool! (Actually, I think it's done by the same person. *snerks*)
*nodnodnod* I basically taught myself CSS from that and the W3 tutes, so. Yes. Very useful! :D

[foxfirefey]

I don't know if you have seen it, but there is some rough sketching out of S2 core2 CSS here:

http://wiki.dwscoalition.org/notes/S2_CSS

[chagrined]

Oh wow, that is great! I had not seen that before. Thanks for the link!

[chaosraven]

This is SO GREAT! I don't need it now, but I know how TOTALLY annoying it can be to figure out what bits do what.

[chagrined]

Yayyyy! :D Yeah, I really didn't feel like going through and applying each layout over and over again to be able to inspect it and remember what the structure was like, haha.

Oh. Thank you.

[celtic_maenad]

I think I owe you a large piece of my sanity. This helps me so much, I can't even say. I was actually thinking this morning about how I just don't *understand* how the modules & stuff work in the layout structure. This graphical representation? Makes it so. much. clearer.

Thank you. This is going in my memories.

Re: Oh. Thank you.

[chagrined]

Oh yay! Yeah, I didn't go super in-detail here, so don't have the classes/IDs for the individual module elements on here, but it's the same concept there. Boxes inside of boxes inside of boxes! Like those nesting dolls, haha. I am so glad to have been of some help!

[denise]

This is an awsomely useful resource. Thank you so much for doing it!

[chagrined]

:D I am glad it has found use here!

[holyschist]

Oooh, this makes styling look less intimidating! Thanks for posting!

[chagrined]

Goody! Yeah, I'm such a visual person when it comes to getting a grip on this stuff, and I'm pleased to provide a bit of help to others who may be the same. :D

[jana]

This is really useful. I was thinking about doing something similar, but now I don't have to anymore, thanks to you :)

[chagrined]

Haha, happy to do it on your behalf. ;D

[rydra_wong]

Ooooh. Oh, this is so awesome.

[chagrined]

Yayyyy I'm glad. :D

[elizaria]

This is so much awesome!! Thanks for sharing

[chagrined]

Certainly! I am pleased it's useful. :)

[syntheid]

I saved this, as I'm sure it will come in handy later, thank you. :)

[chagrined]

Sweet, you are welcome!

[foxfirefey]

Would you mind if I made a wiki page and put these on it, citing you?

[chagrined]

That sounds fine! And would probably make these easier to find for many people. :) Thanks.

[foxfirefey]

Here we go!

http://wiki.dwscoalition.org/notes/Style_Structure_Overview

[chagrined]

Woo! Thanks for doing that. :)

[baggyeyes]

Great work!

[chagrined]

Thank you! :) Haha, and thanks for the other day; I closed my support request and let them know that if they were going to award support points, they should give them to you. ;)

[softestbullet]

YAY VISUAL THINKERS. :)

[chagrined]

VISUAL THINKING IS QUITE GOOD! :D

[portisheart]

thankyouuu! ^^ this precious page is gonna spare me some awful hours searching in source code XDD

[foxfirefey]

I also recommend looking at S2 CSS if you haven't already! Also, Firebug is a really good exploration tool for CSS stuff.

[portisheart]

thx, i discovered s2 css parallel to your page ^^.
i checked firebug on FF's addons page - is it like a better source code view with editor? i'm just careful what i install, my FF is already so heavy with addons XD.

[foxfirefey]

It's really hardcore source code view with editor.

Like, it lets you hover over the page and it'll go to that item in the HTML source code, and show you what CSS applies to it, and you can edit the existing HTML and CSS.

I don't think it's an always on kind of add on, since it's so heavy duty you need to turn it on before it'll give you stuff.

[portisheart]

hmm.. worth trying, thx ^^