Hi there,
On Thursday, July 11, 2013 6:28:07 PM UTC+2, rusi wrote:
>
> Hey Paul
> Thats a thoughtful and detailed answer -- thanks!
>
css is so immense to start with, and it totally makes no sense when
starting with it. Even reading up about the box model you talk about bit
later on, its still not logical, but hold on, it will make sense if you
stick with it,
>
> Since I get some of what you say, half-get some, I hope you will permit me
> to rephrase your suggestions according to my understanding.
>
the only way to go
>
> > try using a seperate css and html page, and dont use inline-styling (eg.
> style=""...)
>
> Sorry for the inlines -- just part of my hacks to figure things out.
>
sure, i figured that, just to let you know
> I thought when in total-hack mode, I'd keep css internal though not inline
> and then move it to another file when more stable/ready.
>
but there my way differs, especially when using less (for example)
my "typical" project has a bunch of css (less) files
- site.less
includes all the other css files i use, nothing more, this is the
file i include in my html
- functions.less
http://lesselements.com/ for example, that stuff goes in this file,
here's also where you solve your cross browser stuff, just have a function
deal with it and keep your own css clean
- vars.less
sutff like colors, fonts paddings, margins maby box sizes go here
- holmes.css
just to make sure your html is valid, it wont do a thing otherwise
- base.less
contains the styling of always recurring elements, like header,
footer, menu body and the basic container class, and some default element
styles (h1,2.3,... ul li etc)
but also popup box styline, message styling, error styling stuff like
that, global recurring elements
- layout.less
for example the 960 grid, of your custom version of it, tho i always
build upon the basics of 960, i just ignore their grid sizes and paddings,
but the clearing and container stacking, pushing/pulling is nice
layout also contains the box and container styles, but just their
defaults no mention of red or blue versions there
- lists.less
styling of list headers, lists (ul, dl) list items (dd, li, dt), list
footers (just different class name) etc.
- parts.less
functionality is almost always contained in a box (div) give it a
base class name and just style its details prefixed with he base class name
- theme.less
here go the variations of the default styles, like a red box instead
of a blue one, so what goes here should be only refer to visual styling not
structural.
sooo not just one file :) i use many many files, and if i include
frameworks i put those in another nested folder and include them in my
site.less
doing things this way you always know where to find some styling, files are
slim and easy to read, you also create a basic styling you can include in
other projects with this
great for just hacking up a fast site/app with default ok looking styling
(like bootstrap does for you)
and best of all, you can see what css is not used anymore, go ask 20 ppl
about their css, and theyll all tell you they have css rules that arent
needed but theyre not sure if they can safely remove them
> > visually it looks like your div#center is right of the div#left but
> actually its overlapping
> > the div#left
> > remove the height properties form div#left and cus half the text, and
> youll see what i
> > mean, it works besause the text is in there and pushing away the
> div#center
> > if you were to put some block-level elements (for example) there instead
> of inline text
> > the div#center would render over your left container.
>
> > so tip: design your templates without texts in them, and when that
> works, add text
> > and dictate the behaviour of it (by using float for example)
> >
>
> Vow! Thanks to your firebug tip now I see what you are saying.
> Ive tried to use the hover trick you refer to but I did not see that it
> covers margin and border. Speaking of firebug/debugging:
>
make some html file, and put a bunch of elements in it, (h1...6, p, ul, li,
div, ...?)
open the file in chrome /ff, and press F12
on chrome: goto the left tab, elements and unflod some part of the html
if you click the ul, then on tie right part you can see some styling of it
the top is "computed style", its usefull to see the real active styling of
the element, nice if it has a lot of properties inherited
the "styles" box tells you its style and its inherited styles from parents
/ css rules
the "metrics" box is a handy tool for you to see its measurements and their
buildup
here you can see that your default unstyled ul has 16px top/bottom margin,
and 40px left padding
if you hover the element in the left part of the debugger (elements tab)
you can see it light up
using the same colorset as in the metrics box, salmon for maring, orange(?)
for border, green for padding, blue for inner-size
Is firebug better or web developer? One thing I would like is some decent
> documentation -- cant seem to find. Another thing: some help to debug my
> (mis)understandings of the box-model. Found dom inspector plus but cant
> make sense of how to use it:
> https://addons.mozilla.org/en-us/firefox/addon/dom-inspector-dm/
>
ok, so, i use ff and chrome both, i kinda always use chrome, just because
its so much faster.
that being said, sure i had my preference of debugger in the past, but they
all have their benefits/cons, and i can say that i just go for the default
chrome's debugger and firebug when on ff.
i checked the screenshot of that dom inspector you mentioned, and it
looks.. well clutterd, but maby that just takes some getting used to
>
>
> > Use html5 doctype
>
> Ok... In view of your other comment (cross-browser compatibility is less
> to be thought today) I guess I should just jump on that bandwagon! I
> thought its too hot and bleeding edge for a noob like me!
>
well adding less to your starting setup and then also some framework maby
sure will increase the learning curve a bit, but oh boy its so worth it!!
after using a css processor (like less) you wont be able to imagine how you
used to do things before
>
> At a high level, I gather you are suggesting bootstrap-framework?
>
if you wanna learn things, then nope, they fixed way to much issues for you
in the framework, you need to understand those first if you wanna be good
at css
> Well earlier I had tried 960. And it did not quite work out.
>
same, i just use their method, push/pull etc etc. but not their metrics, i
make boxes like box_123 for a box with 123px width, that way it works for
every project
but you can still use things like push, alpha/omega clearfix etc.
> Gathered I need to know basics of css and so better to start with the
> right scale of complexity. So thought I'd start with 'guru-given' css,
> which worked out a layout and then play with the other aspects
> (colors,fonts etc) as I work out the mysteries of the box model, the
> cascade etc -- all the grand stuff I understand in theory but is woeful in
> practice.
>
yes!, but... like the html file you posed in your origional question, its
idea of a 2 column layout was probably copied from some example, however
that example used text inside the boxes, and as i hope i explained a bit,
the layout wont hold when you remove the texts, so be weary of things
working in examples, many times they only work in those clean environments
instead of working always and everywehere
> I am a programmer, so concepts/syntax is not an issue usually, though
> chaos is!
>
then you're gonna love less's funcitons
>
> Anyway those are my thoughts and if you are suggesting some other line I'd
> be pleased to hear
>
>
> here are some of my most used less functions (its to create the 960 grid
behaviour but my variation of it)
//useable for both liquid and fixed layouts :), add width for fixed, add
min-width if needed for liquid
.box() {
padding:@padding-box;
margin:@margin-box;
display:inline-block;
overflow:hidden;
position:relative;
float:left;
//width: 1px; //:P just to make sure youll set the width
width: 100%;
}
.row (@width: 100%) {
float:left;
display:block;
clear:both;
width:@width;
}
//NOTE!! columns allow for overflows, sometimes you will have the need to
position a column's content outside of the column itself
//with negative margins (for example), this wont be possible if it captures
its contents like a box
//eg. always use .box() types inside a column
.column(@width) {
width: @width - 2* @margin;
float:left;
padding:@padding-box;
.box {
margin:0 0 2*@margin 0;
}
}
the vars (prefixed with a @) come from vars.less
so if i wanted to make a box-based style
.box_contact {
.box();
background-color:red;
}
boxes are always 100% width, so they will adapt to the column theyre in,
which is really awesome, cus that way it works like a component
sorry this mail is as big as the last one, theres so much to be said
gl again
--
--
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
---
You received this message because you are subscribed to the Google Groups
"Design the Web with CSS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
For more options, visit https://groups.google.com/groups/opt_out.
