On Mar 20, 12:25 pm, mdipierro <mdipie...@cs.depaul.edu> wrote:
> Yarko did it! The new welcome with ez.css is in trunk. We still need
> do add something to allow skinning and rearrange the css (right now we
> have:
>
> applications/welcome/static/base.css
> applications/welcome/static/calendar.css
> applications/welcome/static/ez-plug-min.css
> applications/welcome/static/ez-plug.css
>
FYI - ez-plug.css is for readability / development; you want to use
the minified version.
It turns out that there is at least one more change to be made (see
below).
We could (perhaps I could) do a short writeup - the key was to use css
classes already used in the table layout version, and add them
(accumulate them, literally) to the divs.
The ez-css pattern is fairly simple: pick a wrapper, add a layout
group inside of it, repeat...
Putting "what you want" for the ez-css div just means adding your css
class to the div, along with the ez-css one: either from base.css, or
from your own. It couldn't be simpler. You do need to be aware of
the order of defining / redefining behaviors, so inheriting, or NOT
setting for as long as you can stand it is a good method, and then
being judicious about where you put a setting.
I have done another site, replicating a layout that Massimo was
basically asking about, that is (top to bottom):
header: 2 part (66 / 33)
Status bar
3 part body pane: fixed size (side menu); expandable body; fixed
size pane
footer (spanning)
There are also selective, and not full-length borders / separators
between panes (replicating, essentially, their original site).
Try it - once you get used to it, I think you'll find it easier to
update / modify layouts than with tables.
You can imagine adding layers at any level, in any combination - just
by enclosing "chunks" in wrappers (I almost said "rows", but it
doesn't need to be), and putting an ez-css layout set inside the
wrapper, and a box element around each pane.
That, I think, is pretty much it. I kept these 2 pages open while
doing this:
http://www.ez-css.org/how-to
http://www.ez-css.org/layouts
It's so easy, that in fact I didn't read thru the how-to's all the way
- I just noticed the outermost ez-wr should probably be renamed to ez-
mr (for main wrapper), as the 'how-to' says.
I'm sure people will think of ways to use this, but after a few
layouts, I don't know if I'd need a layout tool / helper... it's
faster to just "do it".
We could have some CSS naming conventions, and write-up some
"standard" web2py css class descriptors and use guidelines in the
manual. A good convention might be to "leave ez-plug-min.css and
base.css" alone; do any additional extensions with a "myapp.css" file.
Have a look. It will be interesting to hear other's experience with
this.
Regards,
Yarko
> massimo
>
> On Mar 19, 6:05 pm, Yarko Tymciurak <resultsinsoftw...@gmail.com>
> wrote:
>
> > On Mar 19, 2:24 am, mdipierro <mdipie...@cs.depaul.edu> wrote:
>
> > > I played with ez-css (which I like) but yet it reminded why I used
> > > tables.
>
> > Yeah - the presence of tables in the layout really causes troubles!
>
> > > Here is my problem and I am sure it is just me being dumb. Say
> > > I want a header, a footer and two columns in between. I want the left
> > > column of fixed with (a menu, 200px) and a right column to foll the
> > > rest of the space (content). Because of the way it works (and most of
> > > these frameworks work the same way), the columns float to right
> > > therefore I must specifycontent before the menu. Hence I cannot find a
> > > way to make the menu fixed width and the content fill the rest of the
> > > space without messing up the alignment of the boxes. Can you do it?
>
> > If I understand you, I think this is pretty easy w/ ez-css. I have
> > now done a few layouts w/ it in web2py (as of last night), and have
> > sent you an ez-css layout.html for "welcome" app (it uses the css
> > classes from base.css, but a few settings that were assigned to table
> > elements, I had to update / put elsewhere - base.css has minor
> > changes; ez-plug.css remains stock).
>
> > There are probably other things that could be cleaned up in base.css,
> > but this was pretty easy (once I realized how to go about it).
>
> > - Yarko
>
> > > Massimo
>
> > > On Mar 18, 11:46 pm, Yarko Tymciurak <resultsinsoftw...@gmail.com>
> > > wrote:
>
> > > > On Mar 18, 10:31 pm, mdipierro <mdipie...@cs.depaul.edu> wrote:
>
> > > > > The problem I see is that it is too simple.
> > > > > sizeXofY does not seem to guarantee that all columns have the same
> > > > > lenght (ez-css does it).
> > > > > I like to have the menu column fixed width and the main column elastic
> > > > > and it does not do that (not sure if ez-css does).
>
> > > > I have installed ez-css to try out / play with... it does do fixed
> > > > width + variable width columns:
>
> > > > In multiple ways, actually (depending on how you nest it);
> > > > seehttp://www.ez-css.org/layouts
>
> > > > See module 2A, 2B, layout 2, layout 3, etc....
>
> > > > Each of these use "ez-50", a 50% width element, or "ez-33", a 33%
> > > > width element.
>
> > > > ez-css encourages you to create your own width element if the pre-
> > > > defined ones don't "do it" for you - so, create a
> > > > ez-500px, and you'd have what you want.
>
> > > > This seems like a really clean, easily modifiable and "combinable"
> > > > package... I'm going to play with it in the next few days to see how
> > > > my opinion holds up in use.
>
> > > > - Yarko
>
> > > > > On Mar 18, 8:59 pm, villas <villa...@gmail.com> wrote:
>
> > > > > > Ez-css seems like a good enough option, but before making your mind
> > > > > > up, have a look at the simplicity of oocss.org/grids_docs.html (with
> > > > > > Firebug). Oocss might give more possibilities, but admittedly, is
> > > > > > heavier.
>
>
--
You received this message because you are subscribed to the Google Groups
"web2py-users" group.
To post to this group, send email to web...@googlegroups.com.
To unsubscribe from this group, send email to
web2py+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/web2py?hl=en.
