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.
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.
Is there any alternatives for bootstrap or any predefined CSS library to align and set up a HTML page pretty easily?
I'm doing my development with asp.net and bootstrap and now I got bored of it. So if there is a new library or CDN it would help me a lot.
There are a lot of other free css frameworks with easy to understand grid layouts.
For example:
http://foundation.zurb.com/
http://960.gs/
http://getbase.org/
But it totally depends on your usage case which to use (for example if you want to use sass, etc.).
yes you have many libraries
http://cardinalcss.com/
http://getskeleton.com/
etc
but remember the support ability is limited than Bootstrap. Also totally different keywords.
I am pretty bad with CSS and HTML5 designing/templates. So, I google around and found two frameworks to start with nice looking layouts, necessary js and html5 support. But I don't know which on to use.
I would appreciate your answers on
What is the main different between two except google analytics ?
Which one is more rails friendly ?
Which one fits best to e-commerce sites, i.e. create rich content, integrate with user management frameworks etc?
Combine them and use them both - http://www.initializr.com/
The HTML5 Boilerplate (H5BP) is a starting project template that is designed to be adapted to your needs. Bootstrap is a specialized, modular, HTML/CSS/JS toolkit.
boilerplate provides you with a best practice HTML5 document, some reset CSS and a lot of javascript goodness like modernizer.js; this Twitter toolkit provides you with stylesheets that define a lot more than just a reset.
The Twitter toolkit is better compared to CSS frameworks like blueprintcss and 960 grid system and positions itself somewhere in between those two. Twitter bootstrap comes with its own fixed look and feel so you can concentrate on your content and logic.
checkout this Quora Thread
Based on your question, I gather you misunderstand what these two projects are. "Google analytics" is not the difference.
Expanding on what #thomas has already stated, Boilerplate contains starter HTML templates with best practices built-in and Bootstrap is a library of CSS and JS UI elements. They are not mutually exclusive.
You may want to look at initializer as #Zlatan has already recommended, or Kickstrap, which is an extension framework for Twitter Bootstrap.
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.
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