Hi,
In my previous mail, I highlight how it's necessary to create per-page CSS
by enclosing the page in a DIV with a globally unique 'id' attribute and
scoping any CSS declarations within that.
For now, I've simply prefixed every page-specific CSS statement in
css/global.css with the page ID for the given page. That looks like this
for the account edit page (shortened; just for demo purpose):
/******** For account editing page */
#account-tabs #H div.inputline,
#account-tabs #A div.inputline
{
overflow: auto;
}
#account-tabs #H label,
#account-tabs #A label
{
display: block;
float: left;
text-align: right;
margin-right: 0.5ex;
}
#account-tabs #H div.inputgroup,
#account-tabs #A div.inputgroup
{
float: left;
display: block;
}
As you can see, the CSS gets cluttered with #account-tabs scoping. There
are CSS tools available e.g. SASS (http://sass-lang.com/) to make that look
much better. With SASS, the code would look like this:
/******** For account editing page */
#account-tabs {
#H div.inputline,
#A div.inputline
{
overflow: auto;
}
#H label,
#A label
{
display: block;
float: left;
text-align: right;
margin-right: 0.5ex;
}
#H div.inputgroup,
#A div.inputgroup
{
float: left;
display: block;
}
}
Or even shorter (and more comprehensible):
#account-tabs {
@mixin account-tabs-mixin($selector) {
#{$selector} {
div.inputline {
overflow: auto;
}
label {
display: block;
float: left;
text-align: right;
margin-right: 0.5ex;
}
div.inputgroup {
float: left;
display: block;
}
}
}
@include account-tabs-mixin("#H");
@include account-tabs-mixin("#A");
}
Unless there are objections, I'm going to create a new directory, next to
the css directory, called 'scss' in which we'll store SASS files. Next to
that, I'll make sure to write documentation on how to compile sass files
into css files. There are even tools to compile sass files to css files
immediately when they are being saved ('compass watch' from
http://compass-style.org/help/documentation/command-line/).
--
Bye,
Erik.
http://efficito.com -- Hosted accounting and ERP.
Robust and Flexible. No vendor lock-in.
------------------------------------------------------------------------------
_______________________________________________
Ledger-smb-devel mailing list
Ledger-smb-devel@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/ledger-smb-devel
