[css-d] dynamic CSS strategies
This is a CSS discussion list. So programming issues are not on topic here. But if I keep my dynamic CSS question abstract enough I don't see why it isn't a CSS issue as much as anything else. Let's say my content management system is currently using a three column layout, where a left side column of links is usually defined as 16% of available width. However, if it turns out the current page has a larger than normal number of navigation links, I could (somehow) set the navigation column width to 25% so it could contain two vertical rows of clickable links, rather than one vertical column. What is the best way to do this? My CMS codes could calculate the number of needed links before generating any output, and then choose from any one of several hard-coded CSS files depending on the total link count. Or I could manipulate the browser's CSS on the fly with Javascript and the DOM tree (which used to be a browser-sniffing nightmare, the last time I tried it). Are there any alternate strategies I'm not aware of.simply because I'm an amateur hacker and not a well-educated professional? -- /* Colin (Sandy) Pittendrigh --oO0 Have code will travel */ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] dynamic CSS strategies
On 10/9/11 10:22 AM, Colin (Sandy) Pittendrigh wrote: Let's say my content management system is currently using a three column layout, where a left side column of links is usually defined as 16% of available width. However, if it turns out the current page has a larger than normal number of navigation links, I could (somehow) set the navigation column width to 25% so it could contain two vertical rows of clickable links, rather than one vertical column. What is the best way to do this? With a media query? http://www.w3.org/TR/css3-mediaqueries/ ~d -- Desktop. Laptop. Tablet. Mobile! http://chelseacreekstudio.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] dynamic CSS strategies
One solution is to use your server-side programming to dynamically generate the CSS file. This way you can control all sorts of things in your layout and look-and-feel relative to your database queries. In your case, for your column of links, write an IF/ELSE statement based on the record count. This code would be in the file that generates the CSS file that is sent to the browser. Such as site_styles.cfm or .php or .asp, or ... which generates site_styles.css IF #record count# x [css for one column width] ELSE [css for two columns] The downside to this approach is that your CSS file is regenerated and transmitted with EVERY call from the browser. A workaround to this problem would be to use inline CSS in the page that contains the link-list column(s). This way you're not regenerating the entire CSS file, just the particular code (selectors and rules) that pertain to a specific area of your page. This, of course, generates the dreaded future maintenance problem(s)--you now can't go to one place to maintain your CSS, it is now distributed throughout the site code/pages. Dan K -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Colin (Sandy) Pittendrigh Sent: Sunday, October 09, 2011 7:22 AM To: css-d@lists.css-discuss.org Subject: [css-d] dynamic CSS strategies This is a CSS discussion list. So programming issues are not on topic here. But if I keep my dynamic CSS question abstract enough I don't see why it isn't a CSS issue as much as anything else. Let's say my content management system is currently using a three column layout, where a left side column of links is usually defined as 16% of available width. However, if it turns out the current page has a larger than normal number of navigation links, I could (somehow) set the navigation column width to 25% so it could contain two vertical rows of clickable links, rather than one vertical column. What is the best way to do this? My CMS codes could calculate the number of needed links before generating any output, and then choose from any one of several hard-coded CSS files depending on the total link count. Or I could manipulate the browser's CSS on the fly with Javascript and the DOM tree (which used to be a browser-sniffing nightmare, the last time I tried it). Are there any alternate strategies I'm not aware of.simply because I'm an amateur hacker and not a well-educated professional? -- /* Colin (Sandy) Pittendrigh --oO0 Have code will travel */ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] dynamic CSS strategies
None of the above: Use a class to determine the various layout
conditions. Assuming some kind of inline templating engine:
CSS:
.navigation {
width: 16%;
}
.navigationWide {
width: 25%;
}
Template:
div class=navigation[ if(linkCount = largeNumber){ print
navigationWide } ]
ul
lia href=etc
etc
etc
Keep all your CSS in one place, introduce CSS hooks from the backend
depending on your various conditions. If your back-end isn't that
flexible, DOM Javascript can provide.
Regards,
Barney Carroll
barney.carr...@gmail.com
07594 506 381
On 9 October 2011 15:40, Dan Kaufman d...@studiokaufman.com wrote:
One solution is to use your server-side programming to dynamically generate
the CSS file. This way you can control all sorts of things in your layout
and look-and-feel relative to your database queries.
In your case, for your column of links, write an IF/ELSE statement based on
the record count. This code would be in the file that generates the CSS file
that is sent to the browser. Such as site_styles.cfm or .php or .asp, or
... which generates site_styles.css
IF #record count# x
[css for one column width]
ELSE
[css for two columns]
The downside to this approach is that your CSS file is regenerated and
transmitted with EVERY call from the browser. A workaround to this
problem would be to use inline CSS in the page that contains the link-list
column(s). This way you're not regenerating the entire CSS file, just the
particular code (selectors and rules) that pertain to a specific area of
your page. This, of course, generates the dreaded future maintenance
problem(s)--you now can't go to one place to maintain your CSS, it is now
distributed throughout the site code/pages.
Dan K
-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Colin (Sandy)
Pittendrigh
Sent: Sunday, October 09, 2011 7:22 AM
To: css-d@lists.css-discuss.org
Subject: [css-d] dynamic CSS strategies
This is a CSS discussion list. So programming issues are not on topic
here.
But if I keep my dynamic CSS question abstract enough I don't see why it
isn't a CSS issue as much as anything else.
Let's say my content management system is currently using a three column
layout, where a left side column of links is usually defined as 16% of
available width.
However, if it turns out the current page has a larger than normal number
of navigation links, I could (somehow) set the navigation column width to
25% so it could contain two vertical rows of clickable links, rather than
one vertical column.
What is the best way to do this?
My CMS codes could calculate the number of needed links before generating
any output, and then choose from any one of several hard-coded CSS files
depending on the total link count. Or I could manipulate the browser's CSS
on the fly with Javascript and the DOM tree (which used to be a
browser-sniffing nightmare, the last time I tried it). Are there any
alternate strategies I'm not aware of.simply because I'm an amateur
hacker and not a well-educated professional?
--
/* Colin (Sandy) Pittendrigh --oO0
Have code will travel */
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] dynamic CSS strategies
Excellent solution Barney!
Same general concept IF, but much more elegantly and efficiently delivered.
Dan K
-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Barney Carroll
Sent: Sunday, October 09, 2011 8:14 AM
To: Dan Kaufman
Cc: Colin (Sandy) Pittendrigh; css-d@lists.css-discuss.org
Subject: Re: [css-d] dynamic CSS strategies
None of the above: Use a class to determine the various layout
conditions. Assuming some kind of inline templating engine:
CSS:
.navigation {
width: 16%;
}
.navigationWide {
width: 25%;
}
Template:
div class=navigation[ if(linkCount = largeNumber){ print
navigationWide } ]
ul
lia href=etc
etc
etc
Keep all your CSS in one place, introduce CSS hooks from the backend
depending on your various conditions. If your back-end isn't that
flexible, DOM Javascript can provide.
Regards,
Barney Carroll
barney.carr...@gmail.com
07594 506 381
On 9 October 2011 15:40, Dan Kaufman d...@studiokaufman.com wrote:
One solution is to use your server-side programming to dynamically
generate
the CSS file. This way you can control all sorts of things in your layout
and look-and-feel relative to your database queries.
In your case, for your column of links, write an IF/ELSE statement based
on
the record count. This code would be in the file that generates the CSS
file
that is sent to the browser. Such as site_styles.cfm or .php or .asp, or
... which generates site_styles.css
IF #record count# x
[css for one column width]
ELSE
[css for two columns]
The downside to this approach is that your CSS file is regenerated and
transmitted with EVERY call from the browser. A workaround to this
problem would be to use inline CSS in the page that contains the
link-list
column(s). This way you're not regenerating the entire CSS file, just the
particular code (selectors and rules) that pertain to a specific area of
your page. This, of course, generates the dreaded future maintenance
problem(s)--you now can't go to one place to maintain your CSS, it is now
distributed throughout the site code/pages.
Dan K
-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Colin (Sandy)
Pittendrigh
Sent: Sunday, October 09, 2011 7:22 AM
To: css-d@lists.css-discuss.org
Subject: [css-d] dynamic CSS strategies
This is a CSS discussion list. So programming issues are not on topic
here.
But if I keep my dynamic CSS question abstract enough I don't see why it
isn't a CSS issue as much as anything else.
Let's say my content management system is currently using a three column
layout, where a left side column of links is usually defined as 16% of
available width.
However, if it turns out the current page has a larger than normal number
of navigation links, I could (somehow) set the navigation column width to
25% so it could contain two vertical rows of clickable links, rather than
one vertical column.
What is the best way to do this?
My CMS codes could calculate the number of needed links before generating
any output, and then choose from any one of several hard-coded CSS files
depending on the total link count. Or I could manipulate the browser's
CSS
on the fly with Javascript and the DOM tree (which used to be a
browser-sniffing nightmare, the last time I tried it). Are there any
alternate strategies I'm not aware of.simply because I'm an amateur
hacker and not a well-educated professional?
--
/* Colin (Sandy) Pittendrigh --oO0
Have code will travel */
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org
Re: [css-d] dynamic CSS strategies
On 10/9/11 11:18 AM, Dan Kaufman wrote: Excellent solution Barney! Same general concept IF, but much more elegantly and efficiently delivered. Dan K Gentlepeople, How about trimming your replies to the list so all of us do not wind up with an in-box full of stuff we have already read [see list policy]. And top-posting, among other things, screws up the list archives so the next guy looking to find a solution to the same problem may have difficulty doing so [there is no list policy forbidding top-posting, but is appreciated by those among us who use the archives-- and have been on the list for awhile... Best, ~d PS I am not a list administrator. -- Desktop. Laptop. Tablet. Mobile! http://chelseacreekstudio.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
