Skeleton is made to scale to also fit mobile browsers, following the principles of responsive web design. Does Bootstrap offer the same?
Not yet - http://groups.google.com/group/twitter-bootstrap/browse_thread/thread/6db57d09f654a326?pli=1
But it will be, at some point. The Roadmap has this in for version 2.0. It's lightweight enough that in my experience you can add in your own media queries without much trouble.
EDIT - As of 1 Feb 2012, version 2.0 is out, which is responsive down to mobile out of the box.
EDIT - As of 19 Aug 2013, version 3.0 is out, which is not only responsive but takes a mobile-first approach:
With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, Bootstrap is mobile first. Mobile first styles can be found throughout the entire library instead of in separate files.
Apparently it should support it now.
Originally built with only modern browsers in mind, Bootstrap has
evolved to include support for all major browsers (even IE7!) and,
with Bootstrap 2, tablets and smartphones, too.
Source: http://twitter.github.com/bootstrap/#grid-system
If you go to the site and resize your browser, you will se it's fitting nicely.
Yes Twitter Bootstrap's 2.0 version is based on responsive web design. look at their website: http://twitter.github.com/bootstrap/. You will have to play around with it when you download, cause the download version does not have it. You will have to rename the responsive css, best option is to look at their website and try to reverse engineer it.
Mobile-friendly has many meanings. Bootstrap is responsive, which is a mobile-friendly attribute. It's also extremely heavy (it's designed for applications) - which is not mobile-friendly, especially for websites.
The Yahoo Pure framework is about 1/10th the weight, and provides the same feature set for websites. I'd suggest something similar over Bootstrap for a mobile website.
Related
We will still be relying on IE 8 and IE 9 in my company (too large to switch rapidly), so this stays. We have been trying to use bootstrap for the new internal site designs (with all the recommended quirks).
I noticed that the SB Admin v1 & v2 consistently break on these two browsers - both the official sites, and when we try to use these libraries locally. It still renders crazy, and code appears to be working differently on these two browsers compared to Chrome and IE11.
It is possible we're trying to use wrong frameworks, which were meant to target chiefly handheld device browsers?
Has anyone had luck adapting bootstrap to run with IE8? And if you gave up, what did you use instead?
I am using Foundation 5 that working fine with all browser except IE8. I have also try with polyfill but still css issues exist on IE8.
Any other solution for this.
For some businesses it is not a viable option to drop support for IE8. I had to get a Foundation 5 site working in IE8 and here are the steps I took to get it working.
Breakdown:
Use jQuery v1.x and not v2.x
Include IE8 grid support CSS
Include shims in HEAD after your CSS
cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js
s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js
html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js
cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js
github.com/es-shims/es5-shim - shim.js
Include Foundation js fix before initiating foundation
Include REM shim at very bottom of page
For a more in depth look at how to do this check out the link below:
https://kyco.io/blog/getting-foundation-5-to-work-in-ie8
According to http://foundation.zurb.com/learn/faq.html and http://foundation.zurb.com/docs/compatibility.html:
Why doesn't Foundation support IE7 or IE8? Or: why we don't support a dying species.
This is probably the biggest question we get. Consider this: most of
today's popular browsers automatically upgrade themselves including
Chrome, Firefox and Explorer (starting with 9). IE 8 is the last IE
supported on Windows XP, which Microsoft will officially stop
supporting next year. That played a part in our decision.
Besides that, since Foundation 4, our framework is built mobile-first,
meaning it relies on media queries to layer in more complex layouts
and components. Browsers or devices that don't support media queries
will be restricted to a simple, single-column layout. In some ways,
Foundation 4 better supports IE6-7 insomuch as it provides a mobile
but not entirely broken experience. If IE8 support is important for
your users / customers, you can use Foundation 3.2, which supports
IE8. It's not mobile first but it's good stuff.
Is there is any feature that enable auto switch of css files based on different browsers.
I don't want to use javascript code for browser detection and switch of css files.
As browser files in asp.net help in loading different css props for different server controls on runtime. Is there is any feature for us to use for auto switching of css files
Thanks
This would bring in a lot of overhead in development and maintenance. The typical way in supporting multiple browsers is by creating a main stylesheet for you site which covers your targeted devices. You also rely heavily on the knowledge stored in those browser files. What if the user agent string is not the actual browser visiting the site?
Use techniques such as:
Utilising vendor prefixes -webkit- -moz- etc.
Media Queries
Ensuring you use percentages as much as possible, fluid layouts.
& Lots of Trial and Error
If this is to cover older versions of IE then you can utilise IE stylesheets and IE selectors.
As described in the Holy Bible for CSS: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
I know this is not the sort of thing you looking for but I feel your going down a very bumpy and messy road.
Thanks,
Mike
After a long time i got a new project, where i'm going to implement the RWD. Before getting project i was talking a lot the RWD, but when it comes to writing the code, i see lot of confusion. I really need your suggestions and ideas for proceeding further.
Here are my questions:
How to support support media queries stuff to the older versions of browser(ie6 ie7 ie8 etc) or what is the alternative way to do it.
Do i need to use the flexible layout within the fixed main layout (like percentage based widths)
What about using the Boilerplate or bootstrap etc which supports for fallback version also
What about using modernizer?
i recommend if you are stuck please look at conditionizr http://conditionizr.com/
for more information on media queries go here http://css-tricks.com/css-media-queries/
I'm looking for a CSS framework including:
Layout and grid (like the 960.gs framework) definitions
A dropdown menu (or similar) definitions
Fonts definitions
Icons included (if possible)
OpenSource
Tested on the most common browsers (like Firefox, Chrome, IE, Safari, Opera,..)
I will create a administration system for my application written in JSF 2.0.
For now, I have template(s) which include a dropdown menu, and grid. But I would also like to have some icons and fonts. Thereby the question
Is there any "standard css frameworks" to use? Please, keep in mind that I'm more a backend programmer than a webguy, so the "reset css frameworks around" is not enough =)
Please help me, I'm totally lost in the css jungle =)
B.R
I would recommend taking a look at HTML 5 boilerplate, which you can use along with 960.gs
It's more like an HTML/css foundation for your site, and things like dropdown menus have to be implemented according to your needs, they're not something like grid systems, which are always the same in every site that uses them.
Just take a look at suckerfish and the likes - they can be added to your site easily enough.
I would definitely recommend materialize css framework. I simplifies google's polymer design ideas.