Is there any CSS grid framework like blueprint, 960.gs specifically for mobile websites?
For media="handheld" and iphone both. With a good reset and Grid.
CSS Grid support for Mobile version
Try resize your browser to see how it works.
Check out 960 Grid on jQuery-Mobile:
http://jeromeetienne.github.com/jquery-mobile-960/
no, there are some mobile css resets but even css reset is too much on a mobile site as it must be optimized for speed and as less as possible bandwidth
Related
Are there an open source code for css grid layout, am aware of the existence of frameworks such as bootstrap and masonry,
am wondering if there are any way of getting grid layout without using these frameworks?
Sure there are many just grid frameworks without the overhead of full ui css framework, really just google css grid frameworks
old classic
http://960.gs/
responsive
http://getskeleton.com/
http://www.responsivegridsystem.com/
Sass
http://susy.oddbird.net/
Newer Flexbox based grid frameworks
http://flexboxgrid.com
http://studio51.github.io/gridlecss/
http://fclaussen.github.io/Flexbox-Framework/
Newest is the Css Grid Layout spec, from what I have read all major browser makers are committed to this spec, Chrome Canary has a good working implementation, Firefox is working on it. Webkit is also working on it.
See these resources for Css Grid Layout
Rachael Andrews site
http://gridbyexample.com/
Pollyfill
https://github.com/FremyCompany/css-grid-polyfill
Igalia shows how to enable in different browsers plus other examples
http://igalia.github.io/css-grid-layout/
With the Grid Layout spec you will no longer need a framework to layout a grid, hopefully by 2016 it will be in all major browsers
Also see flexbox based grids above as they seem to be gaining popularity.
But I am really excited about the Css Grid Layout Spec and having grid capabilities built right into the browsers
how to check whether the site is responsive or not,if We don't have all devices? Is there any perfect tool for that...we fallow responsinator.com or breakpoint of mozilla browser..
Just resize your browser and that will show you how your site looks like on smaller devices. If you want to test your site on specific platforms and browsers you do not have, i'd suggest something like browserstack.com
I would recommend you to read Ethan Marcotte's Responsive Web Design. In this book author explains everything about responsive web development.
http://www.amazon.com/Responsive-Design-Brief-People-Websites/dp/098444257X
https://www.responsinator.com/
use this link u can check responsive site
I am building a responsive layout with Twitter Bootstrap and I am finding it difficult to keep the layout looking good across all sizes/devices.
In my early attempts I tried simply using the grid for placement, but page elements never ended up where I wanted them at different sizes. Now I am at the point where I am using media queries to override some of Bootstrap's styles and my own styles. This seems like it may cause a maintenance headaches down the road.
Rather than overriding styles I am thinking that I should add/remove the styles based on the screen's size by registering for media query events.
Can someone offer advice on good practices for adjusting the layout of a page at different screen sizes using Bootstrap?
I am looking for general advice, but I can post code and screenshots if that will help.
Update: Looks like media query events are not well supported.
Your on the right track. Use CSS media Queries. Firefox has a nice add on that enables you to adjust the page to a particular viewport so that you can see the changes pixel by pixel, though Im sure chrome would have something similar
There are no special tricks just because its bootstrap, as long as you have enabled the responsive stylesheet then you are pretty much good to go
This is a good place to start for media queries
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Based on the MSDN link
http://msdn.microsoft.com/en-us/library/system.web.ui.page.clienttarget.aspx
Assuming I want to see how my page will look like on safari or mobile firefox, how do I implement it using Page.ClientTarget?
I can't seem to find any good resources for this API.
Thank you.
You could just use responsive design, that way you are not relying on the ClientTarget, but rather on the size of the browser.
Responsive Design basically means your design adapts to the size of the screen ... so tablets and phones can have different views of the same page.
Bootstrap is a decent place to start, but there are other frameworks.
For the fluid layouts, can i use 960 grid system for developing web applications..?
You can use the 960 grid system for web applications. If you want a fluid version you must select the fluid version to download. The default version is based on a fixed width of 960 pixels. See the download page:
http://www.spry-soft.com/grids/
Yes. Go to http://grids.heroku.com/ and download the fluid version instead of the normal version.
I personally like the 960.gs layout and think it looks good on any browser/system except mobile, then you should have a mobile version (jQueryMobile, Sencha etc).
Anyhow if you want something a little larger than 960 there is a new grid system that works quite well called 1140
http://cssgrid.net/
Check out their site. I found 1140 easier to use than 960.gs, in fact I wish they supported 960px resolution :)
Hope this helps!