Comparing sites designed in 960 with sites designed using Blueprint, it seems to me the 960 sites are a lot sharper.
I don't know if this is a coincidence of the samples I'm looking at.
Or is there something about 960 that is more conducive to good design?
i personally think that the main difference is learning curve and flexibility.
the 960 will let you do 960px wide sites and learning curve is very low. watch this video you'll have your site design up in few minutes: http://net.tutsplus.com/videos/screencasts/a-detailed-look-at-the-960-css-framework/
blueprint is more flexible. but still 960.gs is my personal preference.
In agreement with Chris Schmitz I prefer to use my own more semantic set of classes, but that's not to say I don't delve into a framework occasionally. If I do use a framework, then I tend to strip it back to bare bones and customize it extensively depending on my required layout. I know in some ways this defeats the object of using a framework but it gives me the best of both worlds: Knowing it will work across most browsers, as well as being semantic and sitting comfortably alongside my existing code.
Personally, I use Blueprint (if and when I need a framework). The 960 Grid system is well built but quite restrictive. When it comes to customization Blueprint wins.
in addition to Chris Schmitz post - when I use the blueprint CSS I always have a question, should I use 2 or more classnames for one div
<div class="span-13 prepend-7 my-class-name">
.span-13 {width:510px;} // from blueprint
.prepend-7 {padding-left:280px;} // from blueprint
.my-class-name {font:, color: background}
or union it in one class
<div class="my-class-name">
.my-class-name {font:; color:; background:; width:510px; padding-left:280px;}
and I always select the second variant,
also I didn't happy with this (using blueprint is requirement)
reset code in blueprint
h1 {font-size:3em;line-height:1;margin-bottom:0.5em;}
h2 {font-size:2em;margin-bottom:0.75em;}
h3 {font-size:1.5em;line-height:1;margin-bottom:1em;}
to avoid any differents in browsers I always ovverride the blueprint values with zero in my classes
.my-class-name h1 {margin: 0px;}
So, conclusion is - if you didn't want to have your styles and design -> blueprint is your choice
Related
I am a newbie in web design. Now I am frequently using float property to design my layouts. I also have learned a bit both about grid system and flexbox system. My question is which method should i use and why, is there any other method other than floats, grids and flexbox to design the layout of a website? If so please explain.
As others have stated, no single method is overarching. If there was one, we'd all be using it and nothing else.
However, it sounds like you might be asking if flex is better than grid, grid better than flex, floats better than grid, etc. I use a combination of all of these in most projects I work on. They each have strengths and weaknesses that need to be utilized or avoided in certain situations.
You will, however, need to be aware of browser support (or lack thereof) and will need to provide fallbacks for those cases (e.g., CSS grids and IE11).
The best method to design your site layout is to start with a piece of scratch paper and a pencil. Draw rough drafts of where you envision the different parts of the site, what page leads to another page, etc. Then figure out how to make it all functional.
There is no one method of coding, you develop your style through experience using a combination of any of several coding languages. Decide first what you want to see on your page, then look for a solution. It is a process.
What is the point of these CSS Frameworks? I don't understand them. When I look at them, all I see is boring layouts that seem overbearingly-difficult to adapt to your own unique designs.
Is this the case, or am I just missing something here? I'm referring to (frameworks in general) things like Blueprint, Less, Skeleton, 960 Grid system, Base, Gridless, etc etc etc.
I know this is a really simple thing but I just don't get it. I have searched but have not found anything that helps me to understand what the big deal is. When I look at their code, all I see is mess. Weird class and id names all over the place.
(This isn't a rant or complaint by the way, I just really don't get it.)
CSS frameworks are pre-prepared software frameworks that are meant to
allow for easier, more standards-compliant web design using the
Cascading Style Sheets language. Most of these frameworks contain at
least a grid. More functional frameworks also come with more features
and additional JavaScript based functions, but mostly design
orientated and unobtrusive. This differentiates these from functional
and full JavaScript frameworks. -Wikipedia
Advantages
They can help you learn CSS. You might just literally not know how to pull off a solid multi-column layout. A framework may be a
good place to get your feet wet understanding how CSS works.
They provide code that you just don't need to write from scratch every time, like resets. I've long been a proponent that the star
selector (*) margin/padding reset is a fine reset. I use it all the
time. But... if you are starting a major new project that is going
to be loads of pages, live for years and years, and will grow over
time, you should invest right away in a more robust reset. All
these frameworks start with brilliant resets that cover all the
bases and will have you covered for years to come.
They relieve cross-browser concerns. You can't undervalue this. We've all felt the burn of finding out our sites are borked
in some browser or another at a hugely inopportune time. Frameworks
are built to bring their magic to all browsers.
It helps you build good habits. Like including a print stylesheet in your projects. I always intend to build one, and I
often do, but the chances are a lot higher that I do it if I have
one there from the get-go.
They encourage grid based design. Which is a good thing. Grids don't mean boring! They just help you achieve better
readability, scanability, balance visual weight, flexibity,
expandability, and just overall page page cohesiveness.
They come with documentation. If you need help getting started, framework generally come with some support files. This can be
particularly nice if you are designing a site you will be handing
off to a client. You can just let them know what framework you used
and refer them to that documentation for support requests.
They lay groundwork. If you are using something like YUI, your life will be a lot easier if you use All-YUI-Stuff-All-The-Time.
It's built to work together and built for expandability.
CSS-Tricks
Also see: Comparison of CSS frameworks
I'm looking into Bootstrap vs Foundation my criterias are:
Lightweight
Easily customized
Easily build complex HTML layout
Mobile / Responsive
In my past experience with Bootstrap, building layout from a designer mockup as a "pixel perfect" HTML was not trivial.
Your thoughts, ideas are appreciated.
Bootstrap and Zurb Foundation are both CSS frameworks, but they have a different purposes.
The primary goal of Bootstrap is fast prototyping of websites or web applications that have a base style. Since the styles are opinionated, that makes it more work to get it to match a custom design. It is heavily supported and a large community. It is built on Less and that can be a plus for some people.
Zurb Foundation 4 takes a different approach. It is more of a base framework for a project that will be customized fully based on project need. The styles are easily overridable. It is a great prototyping tool and it is not opinionated with styles. The grid system is great, and anyone can understand it. If you use Foundation your designer will think differently (they will keep mobile in mind more). It is built on SASS. That makes it easy to incorporate Compass sprite generation. I found the CSS classes in foundation to be easier for beginners to pick up and remember.
You can watch some of the Zurb presentation videos on the internet and they really help you understand why they built it.
I was working on my own framework to realize that everything I needed and more was already built into Foundation. The hardest part is understanding Compass and Sass. After that you will get the hang of Foundation easily.
It really depends on which of your criteria are more important.
Foundation is built for making complex, responsive websites, but it has a pretty big footprint if you want to use everything it has to offer. Bootstrap, on the other hand, is comparatively small but doesn't have anywhere near as much functionality built in. I can't speak to how easy it is to customize Bootstrap, but altering Foundation to fit your needs is very simple (especially if you use the SASS version).
It's a subjective choice: if your priority is to use something with a small footprint, go with Bootstrap. If having a big, responsive-ready library to work with is more important to you, go with Foundation.
I have been looking at CSS3/HTML5 frameworks available, but there is simply too many to make a decision quickly, and they all seem to be focused on streamlining javascript development and UI elements.
In particular, a very useful part of a framework would be to create CSS-based layouts quickly - without having to worry about browser compatibility. However, without actually using the existing frameworks it seems impossible to understand whether the existing frameworks do that, or how they do it.
For example, I would like to create a simple layout that fills the whole page but has a minimum height/width. This should be a 5-line CSS declaration but it's a headache because of IE. Ideally a good framework would allow me to define this once, instead of adding in a special solution for every browser.
Which of the existing frameworks address this? I'm not talking necessarily about frameworks (as the meaning of 'framework' is somewhat loose when talking about HTML/CSS) but other things that you find helpful in development.
I have looked at column-layout frameworks like 960.gs or blueprint but they seem to be geared toward website development, rather than web application development.
Thanks,
960 sounds right up your alley. http://960.gs/ you can tie it with adapt.js to make it adaptive. http://adapt.960.gs/
personally if i have to use a css framework, i'll go with oocss https://github.com/stubbornella/oocss/wiki but i think 960 is exactly what you are looking for.
Is there an existing framework that satisfies the needs of your projects with minor modifications, or have you developed your own along the way? What do you recommend for someone trying to make that decision with these priorities:
CSS reset
Attention to typography; baseline grid
Semantic classes
Accessibility
Lots of "Helper" classes: e.g. .demphasized, .errormsg, .readmore etc.
Grid system, unless it conflicts with #3
Not a priority:
- Fluid/Elastic layout support
- Type in ems/%s
Thanks in advance.
No framework out there is going to do everything you want.
But Blueprint should have enough to get you started.
I have managed to get pretty far with these:
960 Grid for layouts
Blueprint
The jQuery UI CSS Framework
YAML
Elastic css framework can do it almost all you want, except baseline (yet) but you can integrate it including your baseline.css, got to elasticss.com.
No cryptic classnames, support for combinig classes, centering x and y, same height, seo friendly (support for templates and adaptive layouts)
lots of helper classes, and definetely non intrusive with your classes, or absolute positioning. all for free and for all browsers :) hope you like it.
and yes it supports fixed, fluid, elastic layouts, and you just can combine them to get advanced stuff, you also get unlimited nesting, so elastic wont let you down after first level
I recommend you Siimpler it's a simple html framework with ready made file/folder structure but your can configure it for you needs. For exp. you can choose between CSS reset and Normalize.css.