Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
What are some very simple CSS frameworks / design packages?
I don't need the added complexity of a combined HTML, CSS, and JS framework.
I will be creating only a few general page layouts for this site.
I'm building the site on TinyMVC.
I want very minimalistic design (mostly black text on a white background).
I'm planning only one and two column layouts.
I need tables, forms, lists, and other "basic elements" (use your best judgement).
**I wouldn't mind CSS3 with HTML5 in mind.
EDIT#1:
I need a grid system.
I need a CSS reset.
I made my last website with compass and 960 grid system. I was very happy with the speed and results. With compass you have a reset and much more. (a lot of css3 mixins like border radius and gradients etc)
Check it out:
http://960.gs/
http://compass-style.org/
an intro into compass
http://css-tricks.com/video-screencasts/88-intro-to-compass-sass/
here are some nice 960 grid sketches to help you designing your webpage in the 960 grid system
https://github.com/nathansmith/960-Grid-System/raw/master/sketch_sheets/960_sketch.pdf
Variable Grid System might be for you. I used it for some of my projects and it works. Not sure if I'm so much a grid system user, though. It usually gives you much more flexibility than you'll need/use. The cost of that is unnecessary CSS code size.
I tried 960 Grid and Blueprint.
Both were great and both were very similar to each other.
I chose Blueprint because it satisfied my requirements the best and gave the simplest and cleanest appearance out of the box, with settings that I'ev barely had to touch for my site.
960 Grid would probably appeal to many people also.
They are both so easy to test, that I suggest trying both, and choosing the one after playing with them for 15 minutes each.
You might want to check out Cascade Framework Light. It's only 2Kb large, has excellent browser support and should have enough features to fit your needs.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Here's the link to the page I made: https://thawing-savannah-89995.herokuapp.com/
This is my first webpage I've made without help using only a PSD.
Here's a SS of the area I'm having issues with and keeps breaking when I shrink the browser size. This layout was very difficult for me to think through and I don't think it should've been. How can I better design the html and CSS for that part?
I don't have enough rep at the time of this post to comment. Sorry, I would if I could.
I suggest using a thing in css called flexbox. It takes a little extra work instead of Bootstrap or 960 or something, but in combination with percentage units, and even maybe vh/vw if you want to be new age.
This guide explains it better than I could ever hope to; basically, it's a dynamic alignment system. Centering is made trivial, compared to the alternatives. Keep in mind, you might need some #media breakpoints, mostly to change the flex-direction.
It has recently gained almost (sorry IE) universal browser support. If you do care about IE, use a shim like flexibility.
If you do want to use bootstrap-like grid systems, there are better alternatives, if you want to look into them. Personally not a fan of bootstrap (anymore...) but whatever floats your boat I suppose.
The best lesson I learned with creating Responsive sites is to design how you want this to look on a mobile device and work your way up to the Desktop.
I can suggest that you use Twitter Bootstap or Foundation as well as downloading responsive templates. Read as many articles you can find about different techniques that you can find to help you best understand the concept of how do to this.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I've used Materialize CSS in the past and I really like the framework. However a lot of our projects require IE9 support which Materialize doesn't support. Could anyone recommend a similar framework (preferable responsive, mobile first) they might have used in the past which supports IE9.
I've looked at Google's MDL which has 'B' support for IE9. but I'm looking for something which even if has a subset of features, does fully support IE9.
If you don't care about the material design aspects, then there are plenty of good frameworks out there with good legacy support.
If you want a material design look and feel, then these are your two choices. Obviously, MDL is the better choice, since it's fully supported by Google. AFAIK, the "B" in support for IE9 relates to features like "waves" radiating out when you press on a button. It does not mean anything breaks; it means some (gratuitous) features will degrade (gracefully), or not function.
Users of older browsers need to understand that refusing to update their browsers comes with a cost. Where do you draw the line? Do you support IE6? IE7? IE8? One survey shows IE9 with a market share of 2%. To what lengths are you willing to go to give those 2% of people some kind of amazing animated input box experience?
I understand that sometimes these decisions are made not by us wise developers, but by business people who operate under, shall we say, a different set of priorities. If that's the situation, the easiest way to get through to them is simply give them an estimate of two person-years for IE9 support.
Try Bootstrap Material Design. Bootstrap itself supports IE9. But I don't guarantee a full 100% support. The market share of IE9 is so small that no one will make something fully compatible with it.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I would like to create a responsive layout using html5 and css3. After reading a bit on the internet I got really confused as where to start. From what I've read there are frameworks that help develop responsive layouts:
Foundation
Twitter Bootstrap
This is where the confustion starts:
What is the benefit of using these frameworks?
Where can I find tutorials that would teach me to go from PSD => HTML5 Responsive layout => and I guess then use the framework.
Do I need to use these frameworks?
These frameworks have lots of classes generated to set up a grid system really quickly and easily. For example, Bootstrap has a bunch of classes that help set up a fluid grid with each <div> or container having a fluid width that could be different compared to its adjacent container.
To go from a PSD to a responsive layout to using a framework is tricky, and a lot of people like to work from mobile layouts and create PSD's for those smaller devices to help them figure out what is the most important content and put that in the top of the page for mobile and more towards the center or with more emphasis on desktop. To move to a responsive layout, it's really all about creating a PSD for pretty much every breakpoint you plan to have, that way you know where everything should go and it makes it a lot easier. Using the responsive layout framework is pretty much a part of the layout design process, because you use the framework for its abilities, so it's important to know what the framework can and can't do that way you don't design something that is impossible.
These frameworks just create lots of nice features that make responsive development a lot easier and simpler for beginners, you may want to just make a sample site with the framework, and then after you could move on to doing it yourself because lots of times you may not use everything the framework offers and taking it out and overriding its classes is a pain. Frameworks get you started and learning and you decide if you are comfortable using them.
Happy coding!
Some of the work is done for you already. (If they do things in a way you don't want, then that isn't a benefit, of course).
Questions asking for tutorial recommendations are off-topic for Stackoverflow
No.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 4 years ago.
Improve this question
jQuery is cross browser, so it abstract JavaScript.
Is there any library for CSS that cross browser, so if I write for Mozilla Firefox, it will show nicely on any other browser, even older version of ie5, 6 ?
Maybe these two will help:
CSS Reset
Blueprint (demos)
EDIT: Your question is duplicate of: Cross-browser CSS
Check out Frame, a pretty damn good cross-browser CSS framework:
http://frame.serverboy.net/
I have used the 960 Grid system for my last few projects. I highly recommend.
I don't think it's technically feasible to create a (javascript) library that can analyze an entire CSS file and modifies it on the fly to make it work in other browsers, because it would have to:
simulate Firefox' rendering to know what the page should look like,
know about all the rendering quirks of other browsers,
know which change to apply to which style rule to fix the design, which implies it should also have to simulate the rendering of other browsers to validate the fix.
jQuery 'only' has to deal with small aspects of a page's rendering. But making an entire design cross-browser compatible is in a league of its own.
Using CSS resets and frameworks, as the other answers suggested, will help a lot in realizing a cross-browser design. But there's no magic library that will fix your entire design in all browsers. And if there is, I'd love to know about it!
I usually use 960, but a lot of times, like with Wordpress it's too time consuming to implement. A lot of times I'll use a javascript browser hack:
http://rafael.adm.br/css_browser_selector/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 4 years ago.
Improve this question
I'm C/C++, Java developer and now in order to put some variety into my work, I decided to start playing with web development - i'm using django. However, I'm hopeless with graphics and advanced css. I would like to build and ship some apps with elegant and simple design. Are there any frameworks/templates which let me build something great looking without photoshop skills?
I'm looking for something useful like: http://960.gs.
Tacit CSS framework would be very in-line with what you're searching:
I'm hopeless with graphics and advanced css. I would like to build and ship some apps with elegant and simple design.
You include the library on your HTML pages and it will give the page a tidy and modern look by default, without the need to define classes to HTML elements or do any CSS code.
Here is an example of my personal page. Only CSS work I had to do was the inclusion of Tacit, and the page gets that look, working both on Desktop and on Mobile.
http://www.freecsstemplates.org/
Here you can find a nice comparison about responsive frameworks. In my personal experience, I've worked with Twitter Bootstrap on several projects and like it. Since I've used the other frameworks so extensively I cannot (or should not) say it's the best, but at least it fits my requirements and I find pleasing to work with it.
There's a lot of projects integrating these UI frameworks with web frameworks like Django or Rails.
With a simple web search you'll find a lot of themes (free and paid ones), pick what best fits your needs.