| Page 1 of 1 | [ 10 posts ] |
|
I have been enjoying using YUI3 Grids for fine tuning the layout of web applications. It has proven itself useful to me for both mobile web applications and full desktop applications, but I'm starting to see other sites out there making use of css media queries. These sites gracefully reflow their layout as the browser's dimensions change. I like the idea of having one web application work everywhere and not having to maintain desktop and mobile forks. Here is a page of examples: http://mediaqueri.es/ These sites have a nice looking layout that adjusts when the browser window is resized or the phone's orientation changes. I haven't much researched media queries or dug into the css of these sites so I have a lot to learn about the subject, but at the moment, I don't see any good way to combine this functionality with grids. Grids is kind of the opposite; columns get resized with their container, and the stuff inside the columns reflows. Does a responsive layout completely go against everything that grids is made for or is this something that grids could support somehow? If this is not something that grids can do, could and should there be a YUI css module to help construct this style of markup?
|
KrisYUI Contributor
|
The main issue I've encountered with "responsive" design is that anything you need to change tends to need specific markup applied, making it less useful when putting the templates into a CMS, much better for small, static (or basic dynamic) sites.
you can use yui grids and media queries without issue, you just have to plan ahead. I knocked this up as a test: Markup - http://pastie.org/2867252 css/maxw340.css - http://pastie.org/2867245 css/minw900.css - http://pastie.org/2867249 |
|
This is very interesting thank you. The idea of responsive layouts is still new to me so I will spend some time figuring this out.
|
|
Lets Revisit this...
If you follow the example Kris Kelly posted there is 1 issue for wanting a 1/3 unit to span 100% once the smaller 340px screen size has been met... in this case you need more than a "min-width" defined... Any other ideas for a Responsive UI? Has YUI looked into this lately? i have seen twitter bootstrap and foundations JS take some different approaches... |
|
its really interesting to use YUI i will use again in my near future.
|
|
Hi,
let me pull this topic back. There are some news regarding YUI responsive grid on YUI Blog http://yuiblog.com/blog/, but I can't seem to find anything, yet. Do you know if grids are available? Regards, Zdravko |
|
I have found this responsive grid builder https://github.com/yui/gridbuilder Is it already a part of YUI 3?
How should it be used? Will there be a cssgrids-responsive.css or something similar, etc. A lots of questions... |
|
You should go to the GridBuilder home page at http://yui.github.com/gridbuilder/
There's documentation and examples on how it can be used here: http://yui.github.com/gridbuilder/layout.html Ping me if you have any questions |
|
Thanks. I saw it. But I can't figure out using y-u- instead of yui-u- and should I cut and paste the resulting css? Is it in any way dependant on yui3 cssgrids.css.
|
|
Yep. I just pushed an update so you can customize the "yui3-", and other prefixes. This will probably land in cssgrids sooner rather than later. Here's the pull request for that:
https://github.com/yui/yui3/pull/363 |
| Page 1 of 1 | [ 10 posts ] |
| You cannot post new topics in this forum You cannot reply to topics in this forum You cannot edit your posts in this forum You cannot delete your posts in this forum |
© 2006-2013 Yahoo! Inc. All rights reserved.
All code on this site is licensed under the BSD License unless stated otherwise.
About This Site · Security Contact Info
Powered by phpBB® Forum Software © phpBB Group