Re: [css-d] dealing with media breaks
Lately I've ceased worrying about device media break points and instead I've focused on our grid. Where we determine what the min/max width of a column is. How wide can one base column stretch, how narrow. When does it evolve to 2 columns, 3 columns, etc.. This has simplified the media breaks. Currently heavily investigating use of flexbox in this context, both using the CSS3 for it and the spirit of it depending on what browsers have to be supported. Haven't settled on which of several methods will give us the best performance: flex, calc() with floats, scripting or mix. Overall, going mobile first has also simplified things, including typography (modular scale based on the golden ratio) which only changes once at desktop and again at wall. ELIZABETH DAVIES Input | Intellection | Learner | Achiever | Belief -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of John Sent: Tuesday, March 25, 2014 8:16 PM To: CSS-Discuss Subject: [css-d] dealing with media breaks Are there best practices in dealing with setting up and modifying media breaks and the CSS for each? In the few responsive sites I've worked on, I find myself quickly getting clobbered by the several instances of each style that must be adjusted for each media break. I manage to deal with it, but wondering if others use methods to help keep it all straight as they work, or especially, if they have to come back to the code months later. 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/ All information in this message is confidential and may be legally privileged. Only intended recipients are authorized to use 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] dealing with media breaks
On Tue, Mar 25, 2014 at 9:16 PM, John j...@coffeeonmars.com wrote: Are there best practices in dealing with setting up and modifying media breaks and the CSS for each? In the few responsive sites I've worked on, I find myself quickly getting clobbered by the several instances of each style that must be adjusted for each media break. I manage to deal with it, but wondering if others use methods to help keep it all straight as they work, or especially, if they have to come back to the code months later. Thank you! John Mobile-first tends to keep repeat styles to a minimum. As your width increases, only change or add rules to deal with layout changes. My base (mobile) styles are heaviest, and sheets for increased widths tend to be extremely light, consisting only of tweaks. Also, I second the idea of content dictating break points, although other people where I work have expectations of where breaks occur, but that's another story... HTH -- 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] dealing with media breaks
On Tue, Mar 25, 2014 at 9:16 PM, John j...@coffeeonmars.com wrote: Are there best practices in dealing with setting up and modifying media breaks and the CSS for each? John John. There are a number of methods. You will find the one that works best for you and your clients. As with anything else on the Web, there is no such animal as too much testing before you let the horses out of the gate. Best, David Laakso __ 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] dealing with media breaks
David Laakso wrote: There are a number of methods. You will find the one that works best for you and your clients. As with anything else on the Web, there is no such animal as too much testing before you let the horses out of the gate. Testing can reveal only the presence of bugs, not their absence -- Edsger Dijskstra (11 May 1930 – 6 August 2002) __ 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] dealing with media breaks
mar 26 2014 17:54 Philip Taylor p.tay...@rhul.ac.uk: Testing can reveal only the presence of bugs, not their absence -- Edsger Dijskstra (11 May 1930 – 6 August 2002) Edsger was an avid tester was he? An automated test written to get rid of a specific bug, does indeed prove that this specific bug with the known circumstances does not occur any longer. Obviously it doesn’t prevent unknown bugs or unknown factors. What does? I’m not only a mobile first guy I’m a test-first guy. Using test-first does not imply over-interpretation on what they do. On the contrary, test first design gives a sane outlook on your project. I use Thucydides with jbehave for running specifications against HTML5 views (as well as getting data from server-side). There’s no graphical analysis going on of course, only content evaluations. I’m looking to start javascript testing later. I’m sure css will follow at some point. At the moment it’s too much work for little gain. Or? Device detection is something I imagine I will make tests for sooner rather than later. __ 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] Most Recent Post graphic not aligning correctly
Hi all, On this page http://www.xifin.com/news/blogs We have the green Most Recent Post graphic on the left of the first blog post and you can see that in some browsers it is not aligning and in others it is. Any ideas how to fix? Hopefully this will be a learning experience! Thank you! -- J.C. Berry, M.A. UI Developer 619.306.1712(m) jcharlesbe...@gmail.com http://www.mindarc.com This E-mail is covered by the Electronic Communications Privacy Act, 18 U.S.C. ?? 2510-2521 and is legally privileged. This information is confidential information and is intended only for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any dissemination, distribution or copying of this communication is strictly prohibited. __ 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] Most Recent Post graphic not aligning correctly
Den 27.03.2014 00:54, skrev J.C. Berry: Hi all, On this page http://www.xifin.com/news/blogs We have the green Most Recent Post graphic on the left of the first blog post and you can see that in some browsers it is not aligning and in others it is. Any ideas how to fix? Hopefully this will be a learning experience! Chech HTML validity first. Some unclosed elements in there, and browsers' error-correction do not always agree on how to render such things. 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/
