Re: [css-d] Pure CSS variables (no preprocessors)
At 08:08 PM 5/21/2017, Karl DeSaulniers wrote: Maybe a re-install is in order? Dunno. I asked about it on a Eudora group, I'm not the only one who has experienced this. Working hypothesis ATM: randomly-triggered bug in the Eudora v7.1.0.9 message viewer. Reese __ 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] Pure CSS variables (no preprocessors)
Maybe a re-install is in order? Best, Karl DeSaulniers Design Drumm http://designdrumm.com > On May 21, 2017, at 4:01 PM, Reese <cs...@reeza.com> wrote: > > I hope this is correctable on my end, that it isn't something > that will force me to abandon use of Eudora. __________ 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] Pure CSS variables (no preprocessors)
At 09:24 PM 5/18/2017, Eric A. Meyer wrote: On 18 May 2017, at 19:26, Reese wrote: > Wow, the formatting on that got clobbered. Will probably get clobbered > on this email also. > > How long has that been happening? Hard to say. What formatting got clobbered? You initial post didn't look mangled to me. -- Eric A. Meyer - http://meyerweb.com/ Weird. Looks fine in the archives too. What I see above though, is compressed into a single format-flowed paragraph with zero line breaks. I hope this is correctable on my end, that it isn't something that will force me to abandon use of Eudora. Reese ______ 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] Pure CSS variables (no preprocessors)
On 18 May 2017, at 19:26, Reese wrote: Wow, the formatting on that got clobbered. Will probably get clobbered on this email also. How long has that been happening? Hard to say. What formatting got clobbered? You initial post didn't look mangled to me. -- Eric A. Meyer - http://meyerweb.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] Pure CSS variables (no preprocessors)
> On May 19, 2017, at 4:20 AM, Reese <cs...@reeza.com> wrote: > > Is anyone playing with this yet? Using it in production? Yes and yes. To the second question “production” is for webviews inside an iOS app. > Browser support is reportedly 69% worldwide, US-only support is 77% > according to caniuse.com (as reported in the article) and IE-Edge > support is in the works That is the crux of the issue if you want to deploy those stylesheets on the open web, right? MS Edge 15 (latest version) has only minimal penetration so far (not surprising, it has not been widely released…). All previous version don’t support css variables. FWIW, I have _on average_ a 15%~20% user base for IE 11. Philippe -- Philippe Wittenbergh https://l-c-n.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] Pure CSS variables (no preprocessors)
At 03:20 PM 5/18/2017, Reese wrote: Wow, the formatting on that got clobbered. Will probably get clobbered on this email also. How long has that been happening? Reese __ 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-d] Pure CSS variables (no preprocessors)
Is anyone playing with this yet? Using it in production?
Browser support is reportedly 69% worldwide, US-only support is 77%
according to caniuse.com (as reported in the article) and IE-Edge
support is in the works:
https://medium.com/dev-channel/css-variables-no-really-76f8c91bd34e
What it looks like:
:root {
--borders: 1px solid black;
--heights: 100px;
--widths: 100px;
}
.class {
border: var(--borders);
height: var(--heights);
width: var(--widths);
}
I tested this, it seemed to work fine on Ubuntu running Firefox
v53.x (64-bit).
Could this make preprocessors like LESS and SASS obsolete?
Are there any gotcha's?
Reese
__
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] Using CSS to style a back button
The browser back button works, but it's not what I want from a UX standpoint. I want to direct or guide their flow and keep the cursor in the center of the page for ease of use. On Thu, Feb 23, 2017 at 4:58 PM, Tom Livingston <tom...@gmail.com> wrote: > Would the browser back button not be suffice? > > > > On Thu, Feb 23, 2017 at 7:27 PM Rod Castello <rodcastel...@gmail.com> > wrote: > > > Thank you Marie, I will try this out. > > > > On Thu, Feb 23, 2017 at 3:56 PM, <ma...@telenet.be> wrote: > > > > > Hi Rod, > > > > > > Use cursor:pointer; > > > Instead of " > > onClick="history.back(-1)">Back to Product" = html5 > > > > > > Regards, > > > > > > Marie > > > > > > -----Original Message- > > > From: css-d [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of > > Rod > > > Castello > > > Sent: donderdag 23 februari 2017 23:49 > > > To: css-d@lists.css-discuss.org > > > Subject: [css-d] Using CSS to style a back button > > > > > > Hi, > > > I'm using this code to generate a button that takes my users to the > page > > > the just came from. > > > onclick="history.back(-1)"/> > > > > > > It works fine, but I would like to style it and set the cursor to > "hand". > > > I'm trying to find out how to add a class or id to it, but haven't been > > > able to find anything online as of yet. > > > > > > The other way I could do it is create the button with HTML and CSS but > > > then I don't know how to add the javascript functionality to it. > > > > > > Would love a little coaching on this. > > > Here's the pages involved. Click where it says "CLICK HERE FOR > > NUTRITIONAL > > > INFORMATION" > > > http://www.lotuspetfoods.com/for-cats/canned-pate/duck-vegetables/ > > > The back button is here: > > > http://www.lotuspetfoods.com/canned-pates-nutrient-table/ > > > > > > Ideally I'd like the Nutritional Information to be on a pop up like > what > > > happens when you click on the button called "GLOSSARY". I haven't been > > able > > > to figure that one out yet. > > > > > > Thanks in advance for any help. > > > > > > -- > > > Rod Castello > > > DIGITAL DESIGN AND DEVELOPMENT > > > 818.437.7880 > > > rodcastel...@gmail.com > > > www.smashcube.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/ > > > > > > > > > > > > -- > > Rod Castello > > DIGITAL DESIGN AND DEVELOPMENT > > 818.437.7880 > > rodcastel...@gmail.com > > www.smashcube.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/ > > -- > > Tom Livingston | Senior Front End Developer | Media Logic | > ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com > > > #663399 > __ > 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/ > -- Rod Castello DIGITAL DESIGN AND DEVELOPMENT 818.437.7880 rodcastel...@gmail.com www.smashcube.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] Using CSS to style a back button
Would the browser back button not be suffice? On Thu, Feb 23, 2017 at 7:27 PM Rod Castello <rodcastel...@gmail.com> wrote: > Thank you Marie, I will try this out. > > On Thu, Feb 23, 2017 at 3:56 PM, <ma...@telenet.be> wrote: > > > Hi Rod, > > > > Use cursor:pointer; > > Instead of " > onClick="history.back(-1)">Back to Product" = html5 > > > > Regards, > > > > Marie > > > > -Original Message- > > From: css-d [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of > Rod > > Castello > > Sent: donderdag 23 februari 2017 23:49 > > To: css-d@lists.css-discuss.org > > Subject: [css-d] Using CSS to style a back button > > > > Hi, > > I'm using this code to generate a button that takes my users to the page > > the just came from. > > > > > > It works fine, but I would like to style it and set the cursor to "hand". > > I'm trying to find out how to add a class or id to it, but haven't been > > able to find anything online as of yet. > > > > The other way I could do it is create the button with HTML and CSS but > > then I don't know how to add the javascript functionality to it. > > > > Would love a little coaching on this. > > Here's the pages involved. Click where it says "CLICK HERE FOR > NUTRITIONAL > > INFORMATION" > > http://www.lotuspetfoods.com/for-cats/canned-pate/duck-vegetables/ > > The back button is here: > > http://www.lotuspetfoods.com/canned-pates-nutrient-table/ > > > > Ideally I'd like the Nutritional Information to be on a pop up like what > > happens when you click on the button called "GLOSSARY". I haven't been > able > > to figure that one out yet. > > > > Thanks in advance for any help. > > > > -- > > Rod Castello > > DIGITAL DESIGN AND DEVELOPMENT > > 818.437.7880 > > rodcastel...@gmail.com > > www.smashcube.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/ > > > > > > > -- > Rod Castello > DIGITAL DESIGN AND DEVELOPMENT > 818.437.7880 > rodcastel...@gmail.com > www.smashcube.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/ -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ 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] Using CSS to style a back button
Thank you Marie, I will try this out. On Thu, Feb 23, 2017 at 3:56 PM, <ma...@telenet.be> wrote: > Hi Rod, > > Use cursor:pointer; > Instead of " onClick="history.back(-1)">Back to Product" = html5 > > Regards, > > Marie > > -Original Message- > From: css-d [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Rod > Castello > Sent: donderdag 23 februari 2017 23:49 > To: css-d@lists.css-discuss.org > Subject: [css-d] Using CSS to style a back button > > Hi, > I'm using this code to generate a button that takes my users to the page > the just came from. > > > It works fine, but I would like to style it and set the cursor to "hand". > I'm trying to find out how to add a class or id to it, but haven't been > able to find anything online as of yet. > > The other way I could do it is create the button with HTML and CSS but > then I don't know how to add the javascript functionality to it. > > Would love a little coaching on this. > Here's the pages involved. Click where it says "CLICK HERE FOR NUTRITIONAL > INFORMATION" > http://www.lotuspetfoods.com/for-cats/canned-pate/duck-vegetables/ > The back button is here: > http://www.lotuspetfoods.com/canned-pates-nutrient-table/ > > Ideally I'd like the Nutritional Information to be on a pop up like what > happens when you click on the button called "GLOSSARY". I haven't been able > to figure that one out yet. > > Thanks in advance for any help. > > -- > Rod Castello > DIGITAL DESIGN AND DEVELOPMENT > 818.437.7880 > rodcastel...@gmail.com > www.smashcube.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/ > > -- Rod Castello DIGITAL DESIGN AND DEVELOPMENT 818.437.7880 rodcastel...@gmail.com www.smashcube.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] Using CSS to style a back button
I needed a quick easy to find back button because they get to the nutritional page from many different products, so from a user point of view this made sense. 1. Click the Nutrition Info Bar 2. Go to Nutrition page 3. Click "BACK" to go back to the page they were on, which could be one of 6 different products. On Thu, Feb 23, 2017 at 4:11 PM, Mi B <digital.disc...@gmail.com> wrote: > > > 23 feb. 2017 kl. 23:48 skrev Rod Castello <rodcastel...@gmail.com>: > > > > Hi, > > I'm using this code to generate a button that takes my users to the page > > the just came from. > > > I'm trying to find out how to add a class or id to it, but haven't been > > able to find anything online as of yet. > > > > The other way I could do it is create the button with HTML and CSS but > then > > I don't know how to add the javascript functionality to it. > > > > Would love a little coaching on this. > > Here's the pages involved. Click where it says "CLICK HERE FOR > NUTRITIONAL > > INFORMATION" > > http://www.lotuspetfoods.com/for-cats/canned-pate/duck-vegetables/ > > The back button is here: > > http://www.lotuspetfoods.com/canned-pates-nutrient-table/ > > > > Ideally I'd like the Nutritional Information to be on a pop up like what > > happens when you click on the button called "GLOSSARY". I haven't been > able > > to figure that one out yet. > > > > Thanks in advance for any help. > > > > -- > > Rod Castello > > DIGITAL DESIGN AND DEVELOPMENT > > 818.437.7880 > > rodcastel...@gmail.com > > www.smashcube.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/ > > __ > 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/ > -- Rod Castello DIGITAL DESIGN AND DEVELOPMENT 818.437.7880 rodcastel...@gmail.com www.smashcube.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] Using CSS to style a back button
> 23 feb. 2017 kl. 23:48 skrev Rod Castello <rodcastel...@gmail.com>: > > Hi, > I'm using this code to generate a button that takes my users to the page > the just came from. > I'm trying to find out how to add a class or id to it, but haven't been > able to find anything online as of yet. > > The other way I could do it is create the button with HTML and CSS but then > I don't know how to add the javascript functionality to it. > > Would love a little coaching on this. > Here's the pages involved. Click where it says "CLICK HERE FOR NUTRITIONAL > INFORMATION" > http://www.lotuspetfoods.com/for-cats/canned-pate/duck-vegetables/ > The back button is here: > http://www.lotuspetfoods.com/canned-pates-nutrient-table/ > > Ideally I'd like the Nutritional Information to be on a pop up like what > happens when you click on the button called "GLOSSARY". I haven't been able > to figure that one out yet. > > Thanks in advance for any help. > > -- > Rod Castello > DIGITAL DESIGN AND DEVELOPMENT > 818.437.7880 > rodcastel...@gmail.com > www.smashcube.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/ __________ 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] Using CSS to style a back button
Hi Rod, Use cursor:pointer; Instead of "Back to Product" = html5 Regards, Marie 2017-02-23 23:48 GMT+01:00 Rod Castello <rodcastel...@gmail.com>: > Hi, > I'm using this code to generate a button that takes my users to the page > the just came from. > > > It works fine, but I would like to style it and set the cursor to "hand". > I'm trying to find out how to add a class or id to it, but haven't been > able to find anything online as of yet. > > The other way I could do it is create the button with HTML and CSS but then > I don't know how to add the javascript functionality to it. > > Would love a little coaching on this. > Here's the pages involved. Click where it says "CLICK HERE FOR NUTRITIONAL > INFORMATION" > http://www.lotuspetfoods.com/for-cats/canned-pate/duck-vegetables/ > The back button is here: > http://www.lotuspetfoods.com/canned-pates-nutrient-table/ > > Ideally I'd like the Nutritional Information to be on a pop up like what > happens when you click on the button called "GLOSSARY". I haven't been able > to figure that one out yet. > > Thanks in advance for any help. > > -- > Rod Castello > DIGITAL DESIGN AND DEVELOPMENT > 818.437.7880 > rodcastel...@gmail.com > www.smashcube.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/ -- Groetjes, Marie ______ 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-d] Using CSS to style a back button
Hi, I'm using this code to generate a button that takes my users to the page the just came from. It works fine, but I would like to style it and set the cursor to "hand". I'm trying to find out how to add a class or id to it, but haven't been able to find anything online as of yet. The other way I could do it is create the button with HTML and CSS but then I don't know how to add the javascript functionality to it. Would love a little coaching on this. Here's the pages involved. Click where it says "CLICK HERE FOR NUTRITIONAL INFORMATION" http://www.lotuspetfoods.com/for-cats/canned-pate/duck-vegetables/ The back button is here: http://www.lotuspetfoods.com/canned-pates-nutrient-table/ Ideally I'd like the Nutritional Information to be on a pop up like what happens when you click on the button called "GLOSSARY". I haven't been able to figure that one out yet. Thanks in advance for any help. -- Rod Castello DIGITAL DESIGN AND DEVELOPMENT 818.437.7880 rodcastel...@gmail.com www.smashcube.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/
[css-d] IMG CSS Sprite Animation ?
From what I know, I can't create a css animated sprite using @keyframe with an img unless I can ? http://www.thecreativesheep.ca/wdp/wip/css_keyframe.htm Christopher __ 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-d] LESS CSS
A bit off-topic; any good current resources for LESS issues anyone can share? Thank you! John __ 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] LESS CSS
Is using LESS for CSS off-topic? Have you looked at Stack Overflow? stackoverflow.com Chris Rockwell On Mon, Dec 8, 2014 at 1:05 PM, John j...@coffeeonmars.com wrote: A bit off-topic; any good current resources for LESS issues anyone can share? Thank you! John __ 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] validating CSS when?
nov 25 2014 17:49 Barney Carroll barney.carr...@gmail.com: A task runner like Gulp would be useful for this kind of thing. This guy wrote an excellent introduction (and starter kit) [0] that covers automated SASS Browserify code compilation and filesystem-browser synchronisation. I've used Gulp for my last 2 major project for all my development and build needs. When a *.js file changes, it reads over my code and warns me (in the console) of any code style deviations or syntax errors, compiles it, tells the browser to reload it, and runs my unit tests, notifying me of any errors. When a *.scss file changes, it runs compass, concatenates, minifies, writes source maps, then tells the connected browsers to reload that particular resource. Using a system like this you could easily chuck in a CSS validation report on each change after the SCSS compilation but before the browser-prefixing. There's a plugin that reports back from the W3C service [1] which has been adapted to Gulp [2]. So much more convenient than asking a technical question on CSS-D and waiting for the reply back with the link to http://validator.w3.org/! ;) That’s very interesting as I installed Gulp in a more complex framework the other day. I haven’t looked it over yet, as I was mostly interested in the server-side things there. I’ll make sure I check out gulp more thoroughly. Thanks. __ 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] validating CSS when?
Are there any good lists--populated by serious developers, like this one--wear on topic includes all the trades real developers use, like server side scripting, databases, javascript AND CSS? There are many such forums. But forums tend to be populated by beginners while lists tend to be populated by real coding soldiers. On Tue, Nov 25, 2014 at 10:30 AM, Philip Taylor p.tay...@rhul.ac.uk wrote: Barney Carroll wrote: That's an interesting approach. Any particular reason(s) not to use HTML5 at all times? Yes, but this is not the place to discuss it/them ! Philip Taylor __ 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/ -- /* Colin (Sandy) Pittendrigh --oO0 */ __ 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-d] validating CSS when?
As I often feel inclined to use vendor-prefixes in order to meet business requirements, my CSS typically don’t validate fully. I always know why and using SASS have shielded me somewhat from seeing this issue, as I can postpone any prefixes to the final phase. Are you developers handling this differently and if so how? __ 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] validating CSS when?
A task runner like Gulp would be useful for this kind of thing. This guy wrote an excellent introduction (and starter kit) [0] that covers automated SASS Browserify code compilation and filesystem-browser synchronisation. I've used Gulp for my last 2 major project for all my development and build needs. When a *.js file changes, it reads over my code and warns me (in the console) of any code style deviations or syntax errors, compiles it, tells the browser to reload it, and runs my unit tests, notifying me of any errors. When a *.scss file changes, it runs compass, concatenates, minifies, writes source maps, then tells the connected browsers to reload that particular resource. Using a system like this you could easily chuck in a CSS validation report on each change after the SCSS compilation but before the browser-prefixing. There's a plugin that reports back from the W3C service [1] which has been adapted to Gulp [2]. So much more convenient than asking a technical question on CSS-D and waiting for the reply back with the link to http://validator.w3.org/! ;) [0] http://viget.com/extend/gulp-browserify-starter-faq [1] https://www.npmjs.org/package/css-validator [2] https://www.npmjs.org/package/gulp-css-validator Regards, Barney Carroll barney.carr...@gmail.com +44 7429 177278 barneycarroll.com On 25 November 2014 at 15:50, MiB digital.disc...@gmail.com wrote: As I often feel inclined to use vendor-prefixes in order to meet business requirements, my CSS typically don’t validate fully. I always know why and using SASS have shielded me somewhat from seeing this issue, as I can postpone any prefixes to the final phase. Are you developers handling this differently and if so how? __ 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] validating CSS when?
Den 25.11.2014 10:50, skrev MiB: As I often feel inclined to use vendor-prefixes in order to meet business requirements, my CSS typically don’t validate fully. I always know why and using SASS have shielded me somewhat from seeing this issue, as I can postpone any prefixes to the final phase. Are you developers handling this differently and if so how? I only run stylesheets through the validator when: 1) I can not find one of my own disable this declaration markers, 2) I can not manage to debug a problem in browsers locally, and/or 3) I have to share my CSS code with a developer who is paranoid when it comes to validity -- something I am not. Point 2) and 3) above also apply to if/when I run HTML through validators. I have HTML Tidy, and have it set up to clean up most of the markup versions I may use -- including HTML5 as it stands right now. My rule is that markup and style should ideally follow the rules defined by W3C -- it is definitely the safest approach to designing cross-browser. But, if a browser (usually a slightly older one) has to be hacked in order to play ball, making it work as intended across browser-land is usually more important than serving perfectly valid code. regards Georg __ 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] validating CSS when?
I only run stylesheets through the validator when: 1) I can not find one of my own disable this declaration markers, 2) I can not manage to debug a problem in browsers locally, and/or 3) I have to share my CSS code with a developer who is paranoid when it comes to validity -- something I am not. Agreed. When familiarising myself with CSS HTML, I found the validator invaluable as an educational tool. But after a year or so, you will usually be more confident of thoroughly-tested hacks than you are of the validator approval. It would be trivial for me to add validation to my build step and get automatic reports at no extra effort, but I still don't think it's worth it. __ 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] validating CSS when?
Validating CSS : When ? -- For me : a) Whenever something does not behave as anticipated; b) Before signing anything off as complete. If it fails at either stage, then ensure that any deviations from the specification are (a) intentional, (b) essential, and (c) have no undesirable or unanticipated side-effects, as far as can be reasonably ascertained. Exactly the same for HTML, except that there is also a choice of DTD, so (a) HTML 4.01 Strict (preferred, used unless compliance would be impossible); (b) HTML 4.01 Transitional (if Strict compliance is impossible); and finally (c) HTML 5, but ONLY if new elements such as audio, video or canvas are required. Philip Taylor __ 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] validating CSS when?
On Tuesday, 25 November 2014, Philip Taylor p.tay...@rhul.ac.uk wrote: …HTML 5, but ONLY if new elements such as audio, video or canvas are required. That's an interesting approach. Any particular reason not to use HTML5 at all times? -- Regards, Barney Carroll barney.carr...@gmail.com +44 7429 177278 barneycarroll.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] validating CSS when?
Barney Carroll wrote: That's an interesting approach. Any particular reason(s) not to use HTML5 at all times? Yes, but this is not the place to discuss it/them ! Philip Taylor __ 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-d] Collecting css attributes for an item
I have been tasked to sift through a site and collect the attributes of items (buttons, panels, etc) to include in a style guide. Problem is is that the attributes are littered throughout many style sheets. It's a mess. Is there any tool that will collect all the attributes of a selected object (like when it's selected in firebug) and consolidate the style attributes so I can put them in one place? Thanks, MIchael __ 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] Collecting css attributes for an item
It might be worth taking a look at this discussion: http://stackoverflow.com/questions/754607/can-jquery-get-all-css-styles-associated-with-an-element Rick Gordon - On 11/14/14 9:57 AM, Michael Beaudoin wrote: I have been tasked to sift through a site and collect the attributes of items (buttons, panels, etc) to include in a style guide. Problem is is that the attributes are littered throughout many style sheets. It's a mess. Is there any tool that will collect all the attributes of a selected object (like when it's selected in firebug) and consolidate the style attributes so I can put them in one place? ___ RICK GORDON EMERALD VALLEY GRAPHICS AND CONSULTING ___ WWW: http://www.shelterpub.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/
[css-d] Bootstrap CSS...
Hi all, It's been awhile since I've been doing front end work, but I'm getting back into it and learning Bootstrap in the process. I am putting together a sample UI and have come across some issues that I'm hoping I can get some assistance with. I'm sure it's a combination of rust and Bootstrap, but I've hit a wall and I'm not seeing the solutions. Frustrating. The sample page is located at: http://192.185.4.142/~badoyn/report_test/ Questions are: - In the left sidebar (Choose a Report) I would like the hover to extend the complete width of the sidebar and midway up/down between the items. I used display:block but I can't seem to get it fine tuned. - Footer: not sure why the color is not extending throughout the entire width of the footer. - The Reports Parameters box. Is there a way when this box is short (as shown now) the My Reports box beneath can tuck up beneath? Thanks all for the help. It's been awhile and glad to be back. Michael __ 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] Bootstrap CSS...
On Tue, 25 Feb 2014 11:39:41 -0600, Michael Beaudoin mich...@ba-doyn.com wrote: The sample page is located at: http://192.185.4.142/~badoyn/report_test/ Questions are: - In the left sidebar (Choose a Report) I would like the hover to extend the complete width of the sidebar and midway up/down between the items. I used display:block but I can't seem to get it fine tuned. Is the effect that you're looking for similar to the nav bar on the left side of pages at http://www.freelancetraveller.com ? If so, you're welcome to pull up screen.css from that site (which is mine, mine, all mine) and umborrow [sic]/modify the stuff relevant to .nav -- Jeff Zeitlin, Editor Freelance Traveller The Electronic Fan-Supported Traveller® Fanzine and Resource edi...@freelancetraveller.com http://www.freelancetraveller.com http://come.to/freelancetraveller http://freelancetraveller.downport.com/ ®Traveller is a registered trademark of Far Future Enterprises, 1977-2009. Use of the trademark in this notice and in the referenced materials is not intended to infringe or devalue the trademark. Freelance Traveller extends its thanks to the following enterprises for hosting services: CyberNET Web Hosting (http://www.cyberwebhosting.net) The Traveller Downport (http://www.downport.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] Bootstrap CSS...
Questions are: - In the left sidebar (Choose a Report) I would like the hover to extend the complete width of the sidebar and midway up/down between the items. I used display:block but I can't seem to get it fine tuned. You should apply display:block to the anchor elements (a) to make them extend the full width of their container. Note that their containers parent has padding applied to it, so they will not extend the full width of the Create Report box like you may want/expect them to. For vertical spacing you can try a couple of things: display:table/table-row/table-cell, setting a height, using padding, using line-height (what I'd probably do), among others I'm sure. - Footer: not sure why the color is not extending throughout the entire width of the footer. Hmm, maybe you mean height? A couple of options here as well. 1. You can float the footer and apply a width of 100% 2. You can apply overflow: auto to the footer 3. you can use a clearfix on the footer (just add the class 'clearfix' as you've already defined it) - The Reports Parameters box. Is there a way when this box is short (as shown now) the My Reports box beneath can tuck up beneath? You could hack it up with javascript and negative margin or positioning, but, since it's supposed to be in that column anyways, I would wrap it (My Reports) in the same parent as Report Parameters and be done with it. Hope that helps! __ 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] Bootstrap CSS...
You might want to add the menu collapse classes, and relevant media queries. They make things easier to use in a tablet or phone viewing. Greg -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Michael Beaudoin Sent: Tuesday, February 25, 2014 9:40 AM To: css-d@lists.css-discuss.org Subject: [css-d] Bootstrap CSS... Hi all, It's been awhile since I've been doing front end work, but I'm getting back into it and learning Bootstrap in the process. I am putting together a sample UI and have come across some issues that I'm hoping I can get some assistance with. I'm sure it's a combination of rust and Bootstrap, but I've hit a wall and I'm not seeing the solutions. Frustrating. The sample page is located at: http://192.185.4.142/~badoyn/report_test/ Questions are: - In the left sidebar (Choose a Report) I would like the hover to extend the complete width of the sidebar and midway up/down between the items. I used display:block but I can't seem to get it fine tuned. - Footer: not sure why the color is not extending throughout the entire width of the footer. - The Reports Parameters box. Is there a way when this box is short (as shown now) the My Reports box beneath can tuck up beneath? Thanks all for the help. It's been awhile and glad to be back. Michael __ 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] Bootstrap CSS...
The sample page is located at: http://192.185.4.142/~badoyn/report_test/
- In the left sidebar (Choose a Report) I would like the hover to extend the
complete width of the sidebar and midway up/down between the items. I used
display:block but I can't seem to get it fine tuned.
- Footer: not sure why the color is not extending throughout the entire width
of the footer.
- The Reports Parameters box. Is there a way when this box is short (as shown now) the My
Reports box beneath can tuck up beneath?
With the pretty verbose HTML at hand, the following will answer your
questions quite nicely...
.panel-body p {margin: 1px 0;}
.panel-body p a {display: block; padding: 3px 2px; background: #ddd; /*
remove/change background after testing */}
footer {overflow: hidden;}
@media (min-width:992px) {
.col-md-3 {margin-bottom: -200px;}
}
Tune line-up as you like :-)
regards
Georg
__
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-d] [OT] CSS/HTML Work Needed
This is a one-time post to ask for help. It will not be repeated. We tried to do this on our own, but we're programmers here, not designers. So we could really use your help. Our SurfShop shopping cart was recently released as open source. It's been around for awhile and, unfortunately, it shows. Although the code has been constantly updated and improved, the cart still looks like it's 10 years old. It really needs an update. Our site does, too, but that's another story. :\ Being that this is an open source project, we're hoping to find someone to write us a new front-end in exchange for exposure of your services. However, we will entertain paying for this, if need be. We'd like to have our new look in place before we transfer our project to GitHub, so time is of the essence. We're also implementing a store to sell skins for our cart, so anyone can write templates and sell them. The person(s) who supply us with a default template will be able to sell their other templates in our store without the customary 15% fee taken out. Even if you decide not to work with us, feel free to download our cart and let us know what you think. Constructive criticism goes a long way to improving open source projects. Please write me directly if you have any questions. Thanks in advance for your help, Frank Jance http://www.surfshopcart.com/ Setting up shop has never been easier! Since 2003 __ 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-d] Comprehensive CSS Selector Test Without JavaScript?
Has anyone put together a comprehensive test page for CSS selectors, which does not use JavaScript? I'd like to be able to test it in various ereaders, many of which don't support JavaScript. -- ___ RICK GORDON EMERALD VALLEY GRAPHICS AND CONSULTING ___ WWW: http://www.shelterpub.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] Comprehensive CSS Selector Test Without JavaScript?
On 20/11/2013 9:54 AM, Rick Gordon wrote: Has anyone put together a comprehensive test page for CSS selectors, which does not use JavaScript? I'd like to be able to test it in various ereaders, many of which don't support JavaScript. Here some old pages of mine with structural and attribute selectors along with negation. It's 6 pages starting here. http://css-class.com/test/css/selectors/str-pseudo-class.htm Alan -- Alan Gresley http://css-3d.org/ http://css-class.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] Comprehensive CSS Selector Test Without JavaScript?
Alan, would it be OK to crib code from that to compile into EPUB format for testing -- non-commercially -- just to help a community of ebook production folks (conferring at https://twitter.com/search?q=%23ePrdctnf=realtime) try and sort out the state of ereaders these days? Thanks. I'll wait for permission before suggesting that. Rick Gordon -- On 11/20/13 at 12:04 PM +1100, Alan Gresley wrote in a message entitled Re: [css-d] Comprehensive CSS Selector Test Without JavaScr: Here some old pages of mine with structural and attribute selectors along with negation. It's 6 pages starting here. http://css-class.com/test/css/selectors/str-pseudo-class.htm Alan -- Alan Gresley http://css-3d.org/ http://css-class.com/ -- ___ RICK GORDON EMERALD VALLEY GRAPHICS AND CONSULTING ___ WWW: http://www.shelterpub.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] ADMIN: ★ Css D, Mark left a message for you
Well, I learned something today: that Mailman apparently uses the Reply-To: as well as he From: header to decide if mail should be let through. Also that Mailman lets administrators use regular expressions in sender-blocking filters, as in ^.*badoo.*. Also also that Badoo, whatever that is, should be denounced and shunned by all right-thinking citizens of the world. Carry on, everyone, and sorry for the noise. -- Eric A. Meyer (http://meyerweb.com/eric/), List Chaperone CSS is much too interesting and elegant to be not taken seriously. -- Martina Kosloff (http://mako4css.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/
[css-d] responsive css
I'm having a couple of issues with my attempt at adding responsive aspects to
an existing design. Files at http://skunkworks.pixelalchemy.com/responsive/
1. How do I target both mobile and skinny browser windows: I've tried:
@media screen and (max-device-width: 480px) {
@media (max-width: 480px) {
The first works for a mobile device, and the second OMM when I'm developing,
but neither works for both.
2. Why is everything so small on a mobile device (iOS specifically)?
Dave Solko
Pixel Alchemy
d...@pixelalchemy.com
513.300.2165
__
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] responsive css
On Mon, May 20, 2013 at 10:30 AM, Dave Solko d...@pixelalchemy.com wrote:
I'm having a couple of issues with my attempt at adding responsive aspects to
an existing design. Files at http://skunkworks.pixelalchemy.com/responsive/
1. How do I target both mobile and skinny browser windows: I've tried:
@media screen and (max-device-width: 480px) {
@media (max-width: 480px) {
The first works for a mobile device, and the second OMM when I'm developing,
but neither works for both.
2. Why is everything so small on a mobile device (iOS specifically)?
Dave Solko
Pixel Alchemy
d...@pixelalchemy.com
513.300.2165
I generally use @media only screen and (min-width: [breakpoint]){}
with a mobile-first layout. As far as size go, it may be the 13px font
size on the body.
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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] responsive css
To solve the second point you raise about everything being small, the viewport
meta tag would adjust how your design appears on mobile devices.
There's numerous good resources available but as a starter a suggestion would
be
meta name=viewport content=width=device-width, initial-scale=1.0
Perhaps try the second media query again with the viewport added, hopefully it
will solve the skinny browser and mobile view.
Regards
Dez
_
On 20 May 2013, at 15:30, Dave Solko d...@pixelalchemy.com wrote:
I'm having a couple of issues with my attempt at adding responsive aspects to
an existing design. Files at http://skunkworks.pixelalchemy.com/responsive/
1. How do I target both mobile and skinny browser windows: I've tried:
@media screen and (max-device-width: 480px) {
@media (max-width: 480px) {
The first works for a mobile device, and the second OMM when I'm developing,
but neither works for both.
2. Why is everything so small on a mobile device (iOS specifically)?
Dave Solko
Pixel Alchemy
d...@pixelalchemy.com
513.300.2165
__
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-d] Recommended css font settings
Hi list,
I had a break from designing websites for 5 years and I am aware that
MANY things have changed since then so I have got a few basic questions
regarding fonts/text display.
I know there's no one-size-fits-all solution but as a good start, could
anyone tell me what the recommended values are for thing like:
font size, line-spacing, number of characters per line or any other css
parameter that matters in this respect. Do you guys use a starting
template for your websites, eg:
h1 {...}
h2 {...}
...
p {}
I have also noticed an interesting font solution which is @font-face
with the fonts uploaded to a server. Is it wide spread and recommended?
When I used to create websites mobile devices were so widespread so I
definitely don't know about font issues related to that?
I appreciate your tips.
Thank you
John
__
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] Recommended css font settings
Check out this article:
http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/,
it has a lot of useful info. There are also some good articles on the IA
website on typography.
- Koen.
On Feb 23, 2013, at 5:31, John wasteland.t...@gmail.com wrote:
Hi list,
I had a break from designing websites for 5 years and I am aware that
MANY things have changed since then so I have got a few basic questions
regarding fonts/text display.
I know there's no one-size-fits-all solution but as a good start, could
anyone tell me what the recommended values are for thing like:
font size, line-spacing, number of characters per line or any other css
parameter that matters in this respect. Do you guys use a starting
template for your websites, eg:
h1 {...}
h2 {...}
...
p {}
I have also noticed an interesting font solution which is @font-face
with the fonts uploaded to a server. Is it wide spread and recommended?
When I used to create websites mobile devices were so widespread so I
definitely don't know about font issues related to that?
I appreciate your tips.
Thank you
John
__
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] Recommended css font settings
On Feb 23, 2013, at 7:46 AM, Koen van der Drift koenvanderdr...@gmail.com wrote: Check out this article: http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/, it has a lot of useful info. There are also some good articles on the IA website on typography. I notice that article is 3 1/2 years old. Some things (like me) get better with age. But web practices and techniques have always seemed a marathon race where I have been running continually without really catching up to the pack. Secondly, I'm among those who don't recognize the IA website. TIA… Chuck M __ 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] Recommended css font settings
Sorry for the confusion, IA is http://informationarchitects.net/ - Koen. On Feb 23, 2013, at 9:39, Charles Miller chuckmil...@new.rr.com wrote: On Feb 23, 2013, at 7:46 AM, Koen van der Drift koenvanderdr...@gmail.com wrote: Check out this article: http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/, it has a lot of useful info. There are also some good articles on the IA website on typography. I notice that article is 3 1/2 years old. Some things (like me) get better with age. But web practices and techniques have always seemed a marathon race where I have been running continually without really catching up to the pack. Secondly, I'm among those who don't recognize the IA website. TIA… Chuck M __ 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] Recommended css font settings
Inadvertently replied off-list earlier. Posting again in case someone else can benefit. Apologies for the dupe John. On Sat, Feb 23, 2013 at 9:41 AM, Jon Reece jon.re...@gmail.com wrote: On Sat, Feb 23, 2013 at 5:31 AM, John wasteland.t...@gmail.com wrote: I know there's no one-size-fits-all solution but as a good start, could anyone tell me what the recommended values are for thing like: font size, line-spacing, number of characters per line or any other css parameter that matters in this respect. Do you guys use a starting template for your websites, eg: A good starting point is normalize.css from Nicolas Gallagher: http://necolas.github.com/normalize.css/ You also might want to check out HTML5 Boilerplate (which includes normalize): http://html5boilerplate.com/ -- Jon Reece jon.re...@gmail.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] Recommended css font settings
Might as well throw in Meyer reset too: http://meyerweb.com/eric/tools/css/reset/ Sent from my iPhone On Feb 23, 2013, at 2:19 PM, Jon Reece jon.re...@gmail.com wrote: Inadvertently replied off-list earlier. Posting again in case someone else can benefit. Apologies for the dupe John. On Sat, Feb 23, 2013 at 9:41 AM, Jon Reece jon.re...@gmail.com wrote: On Sat, Feb 23, 2013 at 5:31 AM, John wasteland.t...@gmail.com wrote: I know there's no one-size-fits-all solution but as a good start, could anyone tell me what the recommended values are for thing like: font size, line-spacing, number of characters per line or any other css parameter that matters in this respect. Do you guys use a starting template for your websites, eg: A good starting point is normalize.css from Nicolas Gallagher: http://necolas.github.com/normalize.css/ You also might want to check out HTML5 Boilerplate (which includes normalize): http://html5boilerplate.com/ -- Jon Reece jon.re...@gmail.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/ __ 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] Recommended css font settings
On 23/02/13 20:21, Tom Livingston wrote: Might as well throw in Meyer reset too: http://meyerweb.com/eric/tools/css/reset/ Sent from my iPhone On Feb 23, 2013, at 2:19 PM, Jon Reece jon.re...@gmail.com wrote: Thank you all. I'll have a look at the links and ask if I have any doubts. regards John __ 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] Recommended css font settings
I had a break from designing websites for 5 years and I am aware that
MANY things have changed since then so I have got a few basic questions
regarding fonts/text display.
I know there's no one-size-fits-all solution but as a good start, could
anyone tell me what the recommended values are for thing like:
font size, line-spacing, number of characters per line or any other css
parameter that matters in this respect. Do you guys use a starting
template for your websites, eg:
h1 {...}
h2 {...}
...
p {}
I have also noticed an interesting font solution which is @font-face
with the fonts uploaded to a server. Is it wide spread and recommended?
When I used to create websites mobile devices were so widespread so I
definitely don't know about font issues related to that?
If you are starting again after a short break then the best thing is to start
something simple and using nothing but default settings for your fonts etc.
When the website is progressing, you can then have a look at it and then post
questions here to fine tune your settings.
Your question is too wide to help you in a meaningful manner IMHO.
Good luck.
__
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] Recommended css font settings
On Sat, Feb 23, 2013 at 5:31 AM, John wasteland.t...@gmail.com wrote: Hi list, I had a break from designing websites for 5 years and I am aware that MANY things have changed since then so I have got a few basic questions regarding fonts/text display. I suppose it depends on your goal. If it can be said that the purpose of typography is to make content readable and legible on the Web-- then a way of achieving this is to set no font smaller than default. Children of all ages -- even those in hand -- will appreciate this... Best, David Laakso -- Chelsea Creek Studio http://ccstudi.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] ADMIN: CSS linear gradient in Android tablet not extending to bottom of page
At 10:05 -0500 1/29/13, Kim Fernandez wrote: My Manager is looking for a graphic designer for a 2 week job...please respond to this email if interested. To everyone besides Kim: if you do, please make sure to do so off list, but also consider whether you want to work on such a short-term basis for a nameless firm that apparently doesn't see fit to respect the rules of conduct of a public forum. (See http://css-discuss.org/policies.html, a URL found in the footer of every message sent via the list.) In the meantime, the original poster Debbie's question about gradients is interesting, and I hope it gets an informative answer. I'd investigate it myself if I had an Android tablet handy. -- Eric A. Meyer (http://meyerweb.com/eric/), List Chaperone CSS is much too interesting and elegant to be not taken seriously. -- Martina Kosloff (http://mako4css.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] ADMIN: CSS linear gradient in Android tablet not extending to bottom of page
At 10:36 -0500 1/29/13, Kim Fernandez wrote: EricYou obviously are a rude individual with no respect. Perhaps so, but I'm also the person in charge of the list and enforcing its rules on those who rudely disrespect them. If you wish to act in accordance with the list's policies, then you are welcome to rejoin. If not, then please feel free to assign all the blame to me and abstain from further subjecting yourself to the indignity of dealing with me. Thank you. -- Eric A. Meyer (e...@meyerweb.com) http://meyerweb.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] ADMIN: CSS linear gradient in Android tablet not extending to bottom of page
Oops. That was supposed to be sent in private, not to the list. Sorry about that, everyone. Let this stand as a testament to the universal truth: that eventually, no matter how long you have been online or how careful you try to be, you will eventually fall victim to one of the classic blunders: the inappropriate Reply All. Please don't perpetuate this fraying side of the thread any further, as I did. In penance, I will now go add my own email address to the approve before posting list filter, so that the next few times I reply I will be reminded of my error and (with luck) learn from it. -- Eric A. Meyer (e...@meyerweb.com) http://meyerweb.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/
[css-d] Minimal CSS Design: searching for inspiration
Hi all, I'm actually kinda bored of all these resource websites who present pseudo-minimal CSS designs which feature a lot of graphics and decorations instead. I'm searching for a true minimal CSS design, much like one of the past designs of David Laakso site. I need a strong focus on my contents, just as Nicolas Gallagher shows on his blog. All information will be greately appreciated. Thanks in advance. Gabriele http://gabrieleromanato.com http://blog.gabrieleromanato.com/ (English) __ 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] Minimal CSS Design: searching for inspiration
Strongish opinions follow; consider accordingly. ...Or disregard if you have a good art history education. Gabriele, a look at your site makes it clear that you already understand at least SOME of what follows. It seems like what you're really trying to do is strip away all the parts that aren't essential to the user experience. On 9/16/12 1:04 PM, Gabriele Romanato wrote: I'm actually kinda bored of all these resource websites who present pseudo-minimal CSS designs which feature a lot of graphics and decorations instead. I'm searching for a true minimal CSS design, much like one of the past designs of David Laakso site. I need a strong focus on my contents, just as Nicolas Gallagher shows on his blog. By minimal do you mean lacking accents or conveying an emphasis on simplicity ...? In the first case, start with hierarchy, minimze (but don't eliminate) your use of color, don't be afraid to let negative space lie, and set limits on additive iteration. Cf. http://www.quotationspage.com/quote/26979.html . In both cases, you won't gain much from looking at the trend for inspiration - these days it's rather about custom brushes and distressed whatsits. Instead, start plumbing art, design, and architecture from the late Twenties through the early Sixties, when emphasis on simplicity was something of a fetish. That may require a trip to the bookstore or the library in the end, but there are searches you can do - Gropius, van der Rohe, Paul Rand, and Saul Bass are gimmees. I'm tempted to add Eero Saarinen to the list, but that's a bit more of a challenge. (...And I apologize for the U.S.-centricity of these names, but you write what you know, right?) You'll likely discover once you've sketched something out that the styles will be easy to write. Related: with respect to composition the Fibonacci squares and the Golden Ratio (approx. 1.618:1) will be your best friends. If you really want to get down to brass tacks: 1. Decide on the relationship between IA and hierarchy 2. Choose three colors - foreground, background, and accent 3. Create a single column layout while avoiding any and all shades and tints of your palette colors -- Ben Henick lurker...@henick.net Sitebuilder At-Larget:@bhenick +1 785 856 1863 __ 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] Minimal CSS Design: searching for inspiration
Ben Henick wrote: (what appeared to be a great deal of sense, but parts of it left me completely bemused) ... Ben, what do you mean by : don't be afraid to let negative space lie set limits on additive iteration. Gropius, van der Rohe, Paul Rand, and Saul Bass are gimmees. Decide on the relationship between IA and hierarchy Philip Taylor __ 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] Minimal CSS Design: searching for inspiration
On 9/16/12 2:03 PM, Philip TAYLOR wrote: don't be afraid to let negative space lie Don't be afraid to leave parts of the canvas completely blank/empty. set limits on additive iteration. Keep under control the impulse to add accents or tweak the design. Gropius, van der Rohe, Paul Rand, and Saul Bass are gimmees. These are the names of well known artists, architects, and in the latter two cases designers who might inspire good work. Decide on the relationship between IA and hierarchy Every site has an architecture and flow - establish those first, freeze your decisions, and then sketch/compose ideas that focus on absolutely nothing more than conveying the desired priority and wayfinding cues to the various parts of the site's content. And here's what a classic says about hierarchy in particular: http://webstyleguide.com/wsg2/page/hierarchy.html -- Ben Henick lurker...@henick.net Sitebuilder At-Larget:@bhenick +1 785 856 1863 __ 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] Minimal CSS Design: searching for inspiration
Many thanks, Ben : much clearer, and just one question remains -- what are gimmees, as in Gropius et al are gimmees ? Philip Taylor __ 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] Minimal CSS Design: searching for inspiration
Hi all, I'm actually kinda bored of all these resource websites who present pseudo-minimal CSS designs which feature a lot of graphics and decorations instead. Gabriele So do a layout that uses no graphics or decorations. It does not necessarily mean that it must be boring as a consequence. Best, David Laakso aside Do you have a CSS comment or question? -- Chelsea Creek Studio http://ccstudi.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] Minimal CSS Design: searching for inspiration
On 9/16/12 2:22 PM, Philip TAYLOR wrote: Many thanks, Ben : much clearer, and just one question remains -- what are gimmees, as in Gropius et al are gimmees ? http://www.urbandictionary.com/define.php?term=gimme - fourth definition, second sense. -- Ben Henick lurker...@henick.net Sitebuilder At-Larget:@bhenick +1 785 856 1863 __ 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] Minimal CSS Design: searching for inspiration
Ben Henick wrote: On 9/16/12 2:22 PM, Philip TAYLOR wrote: Many thanks, Ben : much clearer, and just one question remains -- what are gimmees, as in Gropius et al are gimmees ? http://www.urbandictionary.com/define.php?term=gimme - fourth definition, second sense. OK, thanks Ben. So in this context, and in slightly more standard English, we might say that Gropius et al are all easily accessible authorities on the subject, if I understand 4th def., 2nd sense correctly. I have no idea what the fifth definition is trying to tell me at all, but that has nothing to do with CSS so I simply state it as a fact. Philip Taylor __ 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] Custom CSS resets
Andrew Cunningham wrote: if you consider b and i elements to be purely presentational, then I guess you can leave browsers to their own devices. But I work on sites that are multilingual and where user generated content could be in any language, so if these elememts are purely presentational then they should never occur in the templates or in user content. If on the other hand you see these elements as symantic, then the resets make sense, since the appearance of these elements should be styled on a per language or a per writing script basis. If the b and I elements are symantic, then b isn't necessarily bold, and i isn't necessarily italic I cannot imagine any situation in which the b and i elements could ever be anything other than purely presentational; obviously the preferred semantic elements are strong and em, but they are for authors : with a CSS reset, we are attempting to re-style extant documents over which we may have little or no control. Philip Taylor __ 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] Custom CSS resets
We're going a little off-topic here. ;-) My point is not about tags, but about how a CSS reset should be used. Eric's reset is a general-purpose tool that should be always tailored to your specific needs and not copied and pasted without knowing exactly what it does (as many authors do). Since CSS is not a programming language, authors can modify the original file by adding or removing specific rules with ease. Eric's reset is not like jQuery or Prototype: its core can be modified to address specific projects. For example, if you use XHTML and not HTML5 you can remove the reference to HTML5 tags. And so on. :-) -- http://gabrieleromanato.com/ http://blog.gabrieleromanato.com/ (English) __ 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-d] Custom CSS resets
Hi all. I've been working on a mini project to make Eric Meyers reset a little more useful for me. The basic Idea is to use Sass to give the reset a few options. Full source, demo, docs can be found here = https://github.com/pebblecode/PCR I'd love to get some feedback on this. Whether the implementation seems ok to you, and more importantly whether you think this is a good idea as a concept? Comments / criticisms greatly appreciated. Many thanks Mark -- Mark Durrant UX/UI Designer @ pebblecode.com Office # +44 (0) 20 3327 3940 __ 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] Custom CSS resets
Hi,
CSS resets are useful (I mean, really useful) on a specific range of
projects. For example, they're useful on web apps because they can
also be combined with other frameworks to get you started ASAP.
They're less useful when a significant portion of your site contents
are generated by users (such as in a CMS).
In this case, resets should be rewritten in a way that allows you to
leave some browser's default styles intact or at least not
overwritten. Consider this:
b, i {
font-style: normal;
font-weight: normal;
}
If you forget to redefine your styles, a client of yours might call
you just to say that all of its MS Word contents inserted in the CMS
editor look like plain text without any kind of basic formatting (bold
and italic).
In these particular projects, CSS resets should be selective and not massive.
HTH
Gabriele
--
http://gabrieleromanato.com/
http://blog.gabrieleromanato.com/ (English)
__
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] Custom CSS resets
Gabriele Romanato wrote:
In this case, resets should be rewritten in a way that allows you to
leave some browser's default styles intact or at least not
overwritten. Consider this:
b, i {
font-style: normal;
font-weight: normal;
}
If you forget to redefine your styles, a client of yours might call
you just to say that all of its MS Word contents inserted in the CMS
editor look like plain text without any kind of basic formatting (bold
and italic).
I do not understand. Why might a CSS-reset stylesheet want to set
font style and weight to normal for the b and i elements ?
That is not a reset (normalising everything to a common
intelligent default) but more of an aberation. I have little use
for CSS-resets myself, but the particular example you adduce seems
perverse as best. What Eric actually proposes for the b and i
elements (along with most others) is :
{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
i.e., leave font-weight and style to the browser, which can be relied
on to do the intelligent thing.
Philip Taylor
__
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] Custom CSS resets
On Monday, 13 August 2012, Philip TAYLOR i.e., leave font-weight and style to the browser, which can be relied on to do the intelligent thing. if you consider b and i elements to be purely presentational, then I guess you can leave browsers to their own devices. But I work on sites that are multilingual and where user generated content could be in any language, so if these elememts are purely presentational then they should never occur in the templates or in user content. If on the other hand you see these elements as symantic, then the resets make sense, since the appearance of these elements should be styled on a per language or a per writing script basis. If the b and I elements are symantic, then b isn't necessarily bold, and i isn't necessarily italic -- Andrew Cunningham Project Manager, Research and Development Social and Digital Inclusion Unit Public Libraries and Community Engagement State Library of Victoria 328 Swanston Street Melbourne VIC 3000 Australia Ph: +61-3-8664-7430 Mobile: 0459 806 589 Email: acunning...@slv.vic.gov.au lang.supp...@gmail.com http://www.openroad.net.au/ http://www.mylanguage.gov.au/ http://www.slv.vic.gov.au/ __ 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] Custom CSS resets
The only CSS reset I normally use is this:
* {
margin: 0;
padding: 0;
border: 0;
}
This covers almost everything and you can now control the tags because of not
many things to worry about.
I've been working on a mini project to make Eric Meyers reset a little
more useful for me. The basic Idea is to use Sass to give the reset a few
options.
Full source, demo, docs can be found here =
https://github.com/pebblecode/PCR
I'd love to get some feedback on this. Whether the implementation seems ok
to you, and more importantly whether you think this is a good idea as a
concept?
__
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] Custom CSS resets
Then you all need to appreciate this:
http://necolas.github.com/normalize.css/
--
Kuzeko
On 13 August 2012 22:31, John D xfs...@hotmail.com wrote:
The only CSS reset I normally use is this:
* {
margin: 0;
padding: 0;
border: 0;
}
This covers almost everything and you can now control the tags because of not
many things to worry about.
I've been working on a mini project to make Eric Meyers reset a little
more useful for me. The basic Idea is to use Sass to give the reset a few
options.
Full source, demo, docs can be found here =
https://github.com/pebblecode/PCR
I'd love to get some feedback on this. Whether the implementation seems ok
to you, and more importantly whether you think this is a good idea as a
concept?
__
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] Custom CSS resets
Looks both interesting and potentially useful. Thank you. Philip Taylor Kuzeko Web Design - Matteo Lissandrini wrote: Then you all need to appreciate this: http://necolas.github.com/normalize.css/ __ 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] ADMIN: css-d back
Ok here -Fred Hahnel -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Dean Mah Sent: Monday, June 11, 2012 1:47 PM To: cs...@lists.evolt.org Subject: [css-d] ADMIN: css-d back Hi all, We've been having server crashes over the last little while. After one of these, the list information for css-d was corrupted. We've rolled back to a previous version which is hopefully not too out of date. Sorry for the inconvenience. Dean - on behalf of evolt.org __ 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/ This message contains information which may be confidential and privileged. Unless you are the intended recipient (or authorized to receive this message for the intended recipient), you may not use, copy, disseminate or disclose to anyone the message or any information contained in the message. If you have received the message in error, please advise the sender by reply e-mail, and delete the message. Thank you very much. __ 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-d] ADMIN: css-d back
Hi all, We've been having server crashes over the last little while. After one of these, the list information for css-d was corrupted. We've rolled back to a previous version which is hopefully not too out of date. Sorry for the inconvenience. Dean - on behalf of evolt.org __ 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] mobile css problems
On Mon, Apr 9, 2012 at 5:58 PM, Norman Fournier nor...@normanfournier.comwrote: Hello, I am working on a website here: http://www.wwater.com/pharmacists/ Any suggestions would be greatly appreciated. Norman There's more than one way to skin a cat. Cursory checked in Android/2.2.2, Opera Mobile, and Opera Mini. http://ccstudi.com/4.html Best, David Laakso * * -- Chelsea Creek Studio http://ccstudi.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/
[css-d] mobile css problems
Hello, I am working on a website here: http://www.wwater.com/pharmacists/ I have two serious layout problems, first, when the window is resized to less than 850px, the navigation rejigs to a link on each line, in blocks. The first link is nicely formatted but each subsequent link has a large margin of white space on the lh side which I cannot stamp out. The second problem is the two content wells, one called sidebar-ease and the other an aside. When the window resizes smaller than 850px I would like the aside to drop below the sidebar-ease but have been unable to accomplish that. Any suggestions would be greatly appreciated. Norman --- www: http://www.normanfournier.com facebook: http://www.facebook.com/normanfournierdotcom linkedin: http://www.linkedin.com/profile/view?id=18127460 youtube: http://www.youtube.com/user/normanfournier __ 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] mobile css problems
On Apr 10, 2012, at 6:58 AM, Norman Fournier wrote: I am working on a website here: http://www.wwater.com/pharmacists/ I have two serious layout problems, first, when the window is resized to less than 850px, the navigation rejigs to a link on each line, in blocks. The first link is nicely formatted but each subsequent link has a large margin of white space on the lh side which I cannot stamp out. The parent ul still has a margin-left: 10% specified for '#navcontainer ul' in pharmacists.css, you need to override that in your mobi-pharmacists.css The second problem is the two content wells, one called sidebar-ease and the other an aside. When the window resizes smaller than 850px I would like the aside to drop below the sidebar-ease but have been unable to accomplish that. Kill the 'float: left' and 'float: right' by specified on those blocks 'set to 'float:none' (and the absolute positioning on that 'aside'). Learn to use the web developer tools that ship with most browsers nowadays; they'll quickly tell you what is happening. -- Philippe Wittenbergh http://l-c-n.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] mobile css problems
On 2012-04-09, at 6:29 PM, Philippe Wittenbergh wrote: On Apr 10, 2012, at 6:58 AM, Norman Fournier wrote: I am working on a website here: http://www.wwater.com/pharmacists/ I have two serious layout problems, first, when the window is resized to less than 850px, the navigation rejigs to a link on each line, in blocks. The first link is nicely formatted but each subsequent link has a large margin of white space on the lh side which I cannot stamp out. The parent ul still has a margin-left: 10% specified for '#navcontainer ul' in pharmacists.css, you need to override that in your mobi-pharmacists.css The second problem is the two content wells, one called sidebar-ease and the other an aside. When the window resizes smaller than 850px I would like the aside to drop below the sidebar-ease but have been unable to accomplish that. Kill the 'float: left' and 'float: right' by specified on those blocks 'set to 'float:none' (and the absolute positioning on that 'aside'). Learn to use the web developer tools that ship with most browsers nowadays; they'll quickly tell you what is happening. -- Philippe Wittenbergh http://l-c-n.com Hello, The main problem was the style sheets were cascading in the wrong order. Thanks for your help. Norman --- www: http://www.normanfournier.com facebook: http://www.facebook.com/normanfournierdotcom linkedin: http://www.linkedin.com/profile/view?id=18127460 youtube: http://www.youtube.com/user/normanfournier __ 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-d] Is CSS affecting my Flash?
Hi. Something is making my Flash file look off on a maximized IE at 1024x768. It looks fine on every other browser I'm trying, so I'm wondering if it's a CSS float issue. I know I screw up CSS floats sometimes, and I'm wondering if this is one of those times. _http://www.suffolksites.com/affordable_roofing_remodeling/_ (http://www.suffolksites.com/affordable_roofing_remodeling/) Any insight would be greatly appreciated. Thanks Bruce __ 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] IE7 css box class not working
On Sun, Dec 11, 2011 at 10:07 AM, Carol Swinehart ckfswebdevelopm...@gmail.com wrote: www.socilfairfieldhocking.org/index6.html on this page you will see where in the leftcol div .box The .box tag does not work in the css as the first box is code that way and is not working. The other boxes (left column) are coded using style=... This is a problem with IE7 only. Carol IE7 does not see the float:left; declaration on line 403. This may have something do with astonishing number of CSS syntax errors :-) Fixing those will placate IE7. http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.socilfairfieldhocking.org%2Findex6.htmlprofile=css3 You can see a preview here: http://roughtech.com/t/socil.html Regards, Chetan Crasta __ 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-d] IE7 css box class not working
www.socilfairfieldhocking.org/index6.html on this page you will see where in the leftcol div .box The .box tag does not work in the css as the first box is code that way and is not working. The other boxes (left column) are coded using style=... This is a problem with IE7 only. Carol __ 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-d] mobile css reference
Can anyone recommend a good mobile css reference? I'm trying to build a handheld css file for a site I'm working on and can't seem to get it to read properly. __ 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] mobile css reference
The media type of 'handheld' is not well supported. Typically, a very basic stylesheet of text styles and maybe some spacing is really the safest you can do for less-than-smart devices. You could then add polish with media queries for smarter devices. HTH On Tue, Nov 8, 2011 at 2:16 PM, Chris Kavinsky ckavin...@gmail.com wrote: Can anyone recommend a good mobile css reference? I'm trying to build a handheld css file for a site I'm working on and can't seem to get it to read properly. __ 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/ -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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/
[css-d] can CSS do flick panning?
Sorry if this is the wrong word, but it's what Adobe uses to describe how you can click-drag in a Photohop document and when you let go of the pen or mouse, the image continues to scoot in the direction you dragged it..it then slows down nicely as though friction and gravity are working on it. I thought that might be an elegant way to let users go through an array of images, other than or in addition to a scroll bar. thank you in advance for any info on this. John __ 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] can CSS do flick panning?
Use Jquery --Mensaje original-- De: John Remitente: css-d-boun...@lists.css-discuss.org Para: CSS-Discuss Asunto: [css-d] can CSS do flick panning? Enviado: 21 de oct, 2011 10:15 Sorry if this is the wrong word, but it's what Adobe uses to describe how you can click-drag in a Photohop document and when you let go of the pen or mouse, the image continues to scoot in the direction you dragged it..it then slows down nicely as though friction and gravity are working on it. I thought that might be an elegant way to let users go through an array of images, other than or in addition to a scroll bar. thank you in advance for any info on this. John __ 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/ Enviado desde BlackBerry® de COMCEL S.A. __ 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] can CSS do flick panning?
Hiya Jon, currently only possible in iOS5 Safari with -webkit-overflow-scrolling: bounce; This needs to be on top of overflow: scroll. Regards, Barney Carroll (+44) 742 9177 278 __ 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-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/
[css-d] Check CSS In Browser Versions
Hello again! Can anyone tell me if there a website where I can visually check my site in other versions of IE, etc? And along the same lines, where can I find information about how these versions work so that I can send different stylesheets to accommodate each? I'm already familiar with IE's box model debacle but I'm unaware of other hiccups that I might have to compensate for. Thanks again! Mary __ 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] Check CSS In Browser Versions
Try http://www.browsercam.com ? On Wed, Sep 14, 2011 at 7:17 PM, Mary Villanueva mvilla5...@gmail.com wrote: Hello again! Can anyone tell me if there a website where I can visually check my site in other versions of IE, etc? And along the same lines, where can I find information about how these versions work so that I can send different stylesheets to accommodate each? I'm already familiar with IE's box model debacle but I'm unaware of other hiccups that I might have to compensate for. Thanks again! Mary __ 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/ -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.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/
[css-d] Pure CSS Drop Down Menu Help
Hello CSS Discuss,
I have a site all coded up and the only besides cross browser checking left to
do is integrate a drop down behavior to one of the menu items: About. I found a
couple of articles and I can't the sub menu to work and drop when one hovers
over About. I have tried the methods in the following two articles:
http://www.htmldog.com/articles/suckerfish/dropdowns/ - the code semi works for
this one with the exception that once the sub menu drops down once and is
hovered over again, it won't stay open if you try to hover over it again the
second time around.
So I then decided to give this one a try:
http://matthewjamestaylor.com/blog/centered-dropdown-menus -even though my menu
isn't center aligned thought I could still incorporate the part for the drop
down behavior but I can't get that one to work either.
Please take a look here for the coded page and try hovering over About -
nothing happens: http://e7flux.com/dfd/index.html
Here is the snippet of code related to the navigation:
#main-nav {
overflow: hidden;
margin-top: 106px;
padding: 0 98px;
}
#main-nav li {
float: left;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif; /* Whitney Medium */
font-size: 12px; /* 14pt in Whitney Medium */
text-transform: uppercase;
color: #FFF;
}
#main-nav li.home, #main-nav li.about {
margin-right: 72px;
}
#main-nav li.about a {
display: block;
}
#main-nav li.get-involved {
margin-right: 326px;
}
#main-nav li.blog, #main-nav li.donate {
margin-right: 72px;
}
#main-nav a {
color: #FFF;
font-style: normal;
}
#main-nav a:hover {
color: #023f3b;
background: none;
}
#main-nav li ul#sub-nav {
display: none;
position: absolute;
right: auto;
background: url(../images/subnav-bg.png) no-repeat;
margin-top: 3px;
width: 117px;
height: 136px;
padding: 11px 15px 0;
}
#main-nav li ul#sub-nav li {
margin: 0 0 9px;
left: auto;
}
#main-nav li ul#sub-nav, #main-nav li ul#sub-nav a {
font-family: Georgia, Times New Roman, Times, serif;
font-size: 12px;
font-style: italic;
text-transform: none;
color: #0c4440;
}
#main-nav ul#sub-nav a:hover {
background: url(../images/link-hover-bg.png) bottom repeat-x;
}
If anyone can help I'd greatly appreciate it - this is due today and this is
the one issue that is holding me up!!! I am working off of FF3.6
TIA,
Elli Vizcaino
Web Designer Developer
http://www.E7Flux.com
The Best Compliment We Can Receive Is A Referral!
__
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] Pure CSS Drop Down Menu Help
Something along the lines of
#main-nav li:hover ul {display:block;}
should help. May also want to check the support for the :hover pseudo
element on LIs to make sure it accommodates your audienc (
http://www.quirksmode.org/css/contents.html).
Kevin
On Fri, Sep 9, 2011 at 9:46 AM, Elli Vizcaino elli...@yahoo.com wrote:
Hello CSS Discuss,
I have a site all coded up and the only besides cross browser checking left
to do is integrate a drop down behavior to one of the menu items: About. I
found a couple of articles and I can't the sub menu to work and drop when
one hovers over About. I have tried the methods in the following two
articles:
http://www.htmldog.com/articles/suckerfish/dropdowns/ - the code semi
works for this one with the exception that once the sub menu drops down once
and is hovered over again, it won't stay open if you try to hover over it
again the second time around.
So I then decided to give this one a try:
http://matthewjamestaylor.com/blog/centered-dropdown-menus -even though my
menu isn't center aligned thought I could still incorporate the part for the
drop down behavior but I can't get that one to work either.
Please take a look here for the coded page and try hovering over About -
nothing happens: http://e7flux.com/dfd/index.html
Here is the snippet of code related to the navigation:
#main-nav {
overflow: hidden;
margin-top: 106px;
padding: 0 98px;
}
#main-nav li {
float: left;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif; /* Whitney Medium */
font-size: 12px; /* 14pt in Whitney Medium */
text-transform: uppercase;
color: #FFF;
}
#main-nav li.home, #main-nav li.about {
margin-right: 72px;
}
#main-nav li.about a {
display: block;
}
#main-nav li.get-involved {
margin-right: 326px;
}
#main-nav li.blog, #main-nav li.donate {
margin-right: 72px;
}
#main-nav a {
color: #FFF;
font-style: normal;
}
#main-nav a:hover {
color: #023f3b;
background: none;
}
#main-nav li ul#sub-nav {
display: none;
position: absolute;
right: auto;
background: url(../images/subnav-bg.png) no-repeat;
margin-top: 3px;
width: 117px;
height: 136px;
padding: 11px 15px 0;
}
#main-nav li ul#sub-nav li {
margin: 0 0 9px;
left: auto;
}
#main-nav li ul#sub-nav, #main-nav li ul#sub-nav a {
font-family: Georgia, Times New Roman, Times, serif;
font-size: 12px;
font-style: italic;
text-transform: none;
color: #0c4440;
}
#main-nav ul#sub-nav a:hover {
background: url(../images/link-hover-bg.png) bottom repeat-x;
}
If anyone can help I'd greatly appreciate it - this is due today and this
is the one issue that is holding me up!!! I am working off of FF3.6
TIA,
Elli Vizcaino
Web Designer Developer
http://www.E7Flux.com
The Best Compliment We Can Receive Is A Referral!
__
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] Pure CSS Drop Down Menu Help
Thanks for the suggestion but I'm not targeting IE 6 if that is what you're
referring to and my document validates as XHTML transitional as per client
request :). I went ahead and changed the code based on this:
http://www.htmldog.com/articles/suckerfish/dropdowns/ - so yes the drop down
drops on hover now but it just wont stay there so one can hover over the
submenu links, so it's still a problem.
Here is the revised code snippet and the url again:
http://e7flux.com/dfd/index.html
#main-nav {
overflow: hidden;
margin-top: 106px;
padding: 0 98px;
}
#main-nav li {
float: left;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif; /* Whitney Medium */
font-size: 12px; /* 14pt in Whitney Medium */
text-transform: uppercase;
color: #FFF;
}
#main-nav li.home, #main-nav li.about {
margin-right: 72px;
}
#main-nav li.about a {
/*display: block;*/
padding: 0;
}
#main-nav li.get-involved {
margin-right: 326px;
}
#main-nav li.blog, #main-nav li.donate {
margin-right: 72px;
}
#main-nav a {
color: #FFF;
font-style: normal;
}
#main-nav a:hover {
color: #023f3b;
background: none;
}
#main-nav li ul#sub-nav {
position: absolute;
left: -999em;
background: url(../images/subnav-bg.png) no-repeat;
margin-top: 3px;
width: 117px;
height: 136px;
padding: 11px 15px 0;
}
#main-nav li:hover ul#sub-nav {
left: auto;
}
#main-nav li ul#sub-nav li {
margin: 0 0 9px;
}
#main-nav li ul#sub-nav, #main-nav li ul#sub-nav a {
font-family: Georgia, Times New Roman, Times, serif;
font-size: 12px;
font-style: italic;
text-transform: none;
color: #0c4440;
}
#main-nav ul#sub-nav a:hover {
background: url(../images/link-hover-bg.png) bottom repeat-x;
}
Elli Vizcaino
Web Designer Developer
http://www.E7Flux.com
The Best Compliment We Can Receive Is A Referral!
- Original Message -
From: Kevin A. Cameron kevinacame...@gmail.com
To: Elli Vizcaino elli...@yahoo.com
Cc: CSS Discuss css-d@lists.css-discuss.org
Sent: Friday, September 9, 2011 12:57 PM
Subject: Re: [css-d] Pure CSS Drop Down Menu Help
Something along the lines of
#main-nav li:hover ul {display:block;}
should help. May also want to check the support for the :hover pseudo
element on LIs to make sure it accommodates your audienc (
http://www.quirksmode.org/css/contents.html).
Kevin
__
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] Pure CSS Drop Down Menu Help
On Fri, Sep 9, 2011 at 1:15 PM, Elli Vizcaino elli...@yahoo.com wrote: ...so yes the drop down drops on hover now but it just wont stay there so one can hover over the submenu links, so it's still a problem. Here is the revised code snippet and the url again: http://e7flux.com/dfd/index.html It's really just a matter of distance. The UL that opens up is too far down and so your mouse pointer is leaving the hover area for a second before it gets to the UL. Remove that 3px top margin and it should be better. -Tim __ 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] Pure CSS Drop Down Menu Help
It's really just a matter of distance. The UL that opens up is too far down and so your mouse pointer is leaving the hover area for a second before it gets to the UL. Remove that 3px top margin and it should be better. -Tim Wow can't beleive it was a matter of something so simple. Thanks a million! :)) Elli Vizcaino Web Designer Developer http://www.E7Flux.com The Best Compliment We Can Receive Is A Referral! __ 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] Pure CSS Drop Down Menu Help
Wow can't beleive it was a matter of something so simple. Thanks a million! :)) It's only simple when you've done the same thing half a dozen times :) -- tim.arn...@gmail.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] Pure CSS Drop Down Menu Help
It's only simple when you've done the same thing half a dozen times :) Haha so true. I've been coding for years now but it just didn't occur to me that the margin could be the culprit. I don't do a whole lot of drop margins but this design called for it and the spacing between the containing li and ul in the design is what caused it - go figure. Sometimes, I think we tend to think the problem is more complicated then it actually really is or at least I did any ways :P. Thanks again :) Elli Vizcaino Web Designer Developer http://www.E7Flux.com The Best Compliment We Can Receive Is A Referral! __ 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-d] IE7 css issue
Hi, I am working on a website, and while this works on some browsers, IE7 doesn't quite work. The website is: www.centralcaribooarts.com and the stylesheet being used is http://www.centralcaribooarts.com/css/base.css In Firefox and safari, it works well, but in IE7, the wrapper is being overlapped over the header. It has been a long while since I last developed a website, so my memory is foggy. I think it has to do with margins and floats, but I'm hoping someone here would be able to help pinpoint the issue and give suggestions on how to fix it. the CSS and the HTML has been validated. Laurie Landry creat...@cartierbaileystudio.com Cartier Bailey Creative Studio Box 105 Wells, BC V0K 2R0 __ 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/
