Re: [css-d] The Simpsons in CSS
On 11/11/2013 12:33 PM, Theresa Jennings wrote: Deconstruct at your leisure. http://pattle.github.io/simpsons-in-css/ I had no idea CSS could do this. I need to get out more. someone has WAY too much time on his/her hands. But, it is a masterful display of CSS bill __ 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] Trying to get the big picture view on responsive design
Good responses. Thank you all. This has helped me clarify the issues. I have yet to design a site phones first, from the ground up. I'm currently busy trying to retrofit a few older ones. I am discovering I want to send different markup down the pipe--however--rather than media query CSS edits to the same markup. But that has to be done with server side codes that rely on a double GET for the first request, so a cookie can be set. Then you can send fewer images, different images and different markup, all matched with its own custom CSS. On Mon, Nov 11, 2013 at 1:17 PM, Tom Livingston tom...@gmail.com wrote: On Mon, Nov 11, 2013 at 2:37 PM, Colin (Sandy) Pittendrigh sandy.pittendr...@gmail.com wrote: I'm a beginner at responsive design. I understand the mobile first argument which (at least from the client side) boils down to Design for the phone first and then use CSS media queries to vary floats and widths as needed, and to use javascript to add non-essential images on the fly, for larger monitors. However. Intricately planning individual layouts for all possible devices seems error prone to me. If not a fool's errand. New gizmos show up all the time. In my limited experience totally fluid layouts scale well or well enough between desktop and tablet. The literature frequently faults fluid layouts for looking bad when the user drags the browser out to too wide. But I don't see that as a problem. When I drag a fluid layout out to too wide I immediately pooch it back to narrower again, until it looks right. I think that's what everybody does. So now (if fluid layout covers both desktop and tablet) all you have to worry about is one media query for phone size gadgets. Removing all floats invariably makes a mess. A better first draft is to make every block element float left. Full width blocks still stack vertically. Narrower blocks sit side by side. A small amount of custom tuning from that point on is usually all it takes. Or at least so it seems. I am new at this. I'll skip over server-side device detection for now. Although that seems like the most powerful technology--if detail-oriented micro-managed layout really is the goal. Does anybody want to argue against that big picture view? Or amend it some, for the benefit of a beginner? Fluid/flexible layouts are, IMO, best. Like you mention, new devices are coming out all the time. Percentage width on your structure help you cover all the varying widths. Start mobile first, and adjust layout with breakpoints when the *content* requires it. Sometimes a single column is all you need up to 600px wide or so. I generally use 3-4 breakpoints, adding in others as need to fine-tune widths or # of columns, etc. -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com -- /* 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/
Re: [css-d] The Simpsons in CSS
This is cool and all, but…seriously, is CSS being touted as an illustration tool? Am I missing a concept here? I am very impressed by the samples shown… 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] The Simpsons in CSS
nov 12 19.14 COM: This is cool and all, but…seriously, is CSS being touted as an illustration tool? Am I missing a concept here? If it's possible someone will make it a part of an illustration software tool. My guess would be not Adobe. I am very impressed by the samples shown… But is it responsible? :P __ 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] The Simpsons in CSS
On Nov 12, 2013, at 12:19 PM, MiB wrote: nov 12 19.14 COM: This is cool and all, but…seriously, is CSS being touted as an illustration tool? Am I missing a concept here? If it's possible someone will make it a part of an illustration software tool. My guess would be not Adobe. I am very impressed by the samples shown… But is it responsible? :P Well, what is the load time as opposed to say an svg? Might be some benefit there, but you take all that time saved and add it to production I am thinking. Karl DeSaulniers Design Drumm http://designdrumm.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] The Simpsons in CSS
On Tue, Nov 12, 2013 at 1:14 PM, COM j...@coffeeonmars.com wrote: This is cool and all, but…seriously, is CSS being touted as an illustration tool? Am I missing a concept here? I am very impressed by the samples shown… I think impressing was the main goal. That, and to an an exercise in what if? Tim -- 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] The Simpsons in CSS
Sent from my iPhone On Nov 12, 2013, at 3:18 PM, Karl DeSaulniers k...@designdrumm.com wrote: On Nov 12, 2013, at 12:19 PM, MiB wrote: nov 12 19.14 COM: This is cool and all, but…seriously, is CSS being touted as an illustration tool? Am I missing a concept here? If it's possible someone will make it a part of an illustration software tool. My guess would be not Adobe. I am very impressed by the samples shown… But is it responsible? :P Well, what is the load time as opposed to say an svg? Might be some benefit there, but you take all that time saved and add it to production I am thinking. I did notice it loaded extremely fast for me... __ 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] The Simpsons in CSS
12 nov 2013 kl. 22.39 skrev Tim Arnold: I think impressing was the main goal. That, and to an an exercise in what if? So how difficult would it be to implement CSS in a graphics app you think? I'd say it's doable. If it's an attractive feature today I'm not sure. But it could of course become one. How many designers thought we'd be doing simple animation with CSS just a few years ago? The menu choice Export graphic to CSS in an app real soon? Or never? What do you think? It's probably more realistic to construct with CSS of course. Logos in CSS do seem like an attractive feature. Or perhaps there is an even better vector graphics format there already? __ 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] The Simpsons in CSS
On 13/11/2013 5:14 AM, COM wrote: This is cool and all, but…seriously, is CSS being touted as an illustration tool? Am I missing a concept here? I am very impressed by the samples shown… John I have used CSS to demonstrate how CSS works or may work. This demos show how 'transform-origin' can be used. Imagine Bart tumbling over and over or cartwheeling. :-) http://css-class.com/test/css/3/2d-animation/box-turning-on-egde2.htm This demo shows how gradients could be theoretically be animated (only possible by using element() which only works in Firefox~Gecko). http://css-class.com/test/css/3/image/element-gradient-rotate-animation1.htm This demo shows how element() could be used (only works in Firefox~Gecko). http://css-class.com/test/css/3/image/element-water-background-movement1.htm -- 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] The Simpsons in CSS
At first glance I think these animations are totally cool. And then I start to think they're a bit like text blink on steriods. A changing line in the sixth place means real world caution is advised On Tue, Nov 12, 2013 at 8:23 PM, Alan Gresley a...@css-class.com wrote: On 13/11/2013 5:14 AM, COM wrote: This is cool and all, but…seriously, is CSS being touted as an illustration tool? Am I missing a concept here? I am very impressed by the samples shown… John I have used CSS to demonstrate how CSS works or may work. This demos show how 'transform-origin' can be used. Imagine Bart tumbling over and over or cartwheeling. :-) http://css-class.com/test/css/3/2d-animation/box-turning-on-egde2.htm This demo shows how gradients could be theoretically be animated (only possible by using element() which only works in Firefox~Gecko). http://css-class.com/test/css/3/image/element-gradient- rotate-animation1.htm This demo shows how element() could be used (only works in Firefox~Gecko). http://css-class.com/test/css/3/image/element-water- background-movement1.htm -- 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/ -- /* 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/
Re: [css-d] The Simpsons in CSS
I think they're more proof of concept than anything else. __ 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] The Simpsons in CSS
nov 13 2013 06.30 Theresa Jennings: I think they're more proof of concept than anything else. Of course, but what about in three years? Someone will always be going there first. __ 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/
