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.
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've recently been going over some HTML and CSS stuff to get more into web development, I have been designing sites on and off for a while now and I would love to start actually developing some.
I've seen Bootstrap mentioned so many times all over the internet and I was wondering if someone could help me out and point me in the right direction... I've been learning the fundamentals of HTML/CSS and as I understand it, Bootstrap is a html/css UI framework?
I have my own UI designs in a PSD file, how would I get them to work within Bootstrap?
Is it a matter of slicing up my images and adding custom CSS into Bootstrap?
I know that I am a long way off from this, but this is the type of stuff I want to be doing:
http://heyflat.com/themes/todo/index.html
If you can point me towards the type of stuff I should be learning in order to get there I would much appreciate it, so far I will continue with my html/css stuff but I would love to start using Bootstrap and customizing it seems essential to me for what I would like to be able to achieve...
Thank you for reading :)
Updated
Overall, my process has not changed much except for how I think about converting PSDs to HTML and CSS. I look forward to the day I discover a tool as flexible and comfortable as Photoshop that can output directly to good HTML and CSS. That day has yet to come to me. Here's the process I follow, utilizing Photoshop and Bootstrap.
I find that Photoshop is a great way to imagine, share and iterate over a visual design because it frees me to experiment in ways that are currently either impossible or too time consuming to realize just with HTML and CSS.
Once a design is agreed upon, I begin planning how the target design will be realized with HTML, CSS and JavaScript.
I consider the browsers of my target audience. For example, IE8-, does not support rounded borders. If IE8- users are a large portion of my audience and those rounded borders are critical to the design I may take the time to slice out images and add extra HTML and CSS.
I decide if I am going to use a framework like bootstrap. Browser support must also be considered when deciding on a framework. If a framework has examples like bootstrap then I can checkout those examples in various browsers. If using a framework then I commit to doing it their way. That is, I use their grid system, html and class names for everything. I only add my own when the framework cannot meet a specific need. I do augment their classes as needed using a separate stylesheet but always in appropriate, low risk ways, bootstrap encourages this. I will probably never augment the grid system except perhaps through their customizer, but I have never needed to do that.
Next I implement the design. I may find that some elements need to be sliced out of the PSD, but most, like drop shadows, rounded borders and gradients, can be rendered using CSS. Some aspects of the PSD may need to be tweaked to accommodate responsive behavior or to make implementation simpler. As has always been the case, I target standards compliant browsers first and adjust for the others later. One of the nice parts about a good framework is that there is usually very little that needs tweaked.
I review the document at various resolutions in browsers my target audience use, and consider and implement additional tradeoffs as needed. For example, if it is not critical that those rounded corners show up in IE8- then I will keep it simple, render them using CSS, and let IE8- alone. I still verify that it looks acceptable in IE8 and IE7.
Steps 4 and 5 are generally not sequential but steps I bounce back and forth on. Also, make sure your client is on board or you can get them on board with how you are supporting various (not-so-modern) browsers and your reasons for doing so (shorter load times, less development time, easier maintenance, and so on).
Bootstrap 2 examples: http://getbootstrap.com/2.3.2/getting-started.html#examples
Bootstrap 3 examples: http://getbootstrap.com/getting-started/#examples
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 am a Web developer and in my projects I have noticed that my weakest point is not being good at the front-end design. Relying on other designers can be annoying if they are not able to produce as quickly as I want.
My perspective on HTML/CSS is that it is basically a big hack that amazingly works. There are too many CSS and browser specific bugs/quirks to learn and remember them all without spending extreme amounts of time trying to untangle everything. Is there a fast track route to getting CSS into my brain? I have looked at some CSS books, but to me they really read as long lists of how to render things correctly in IE6 and how to make corners rounded. (Seriously why does it require so many tricks to make a sharp corner round? On any platform but the Web this would be called a major oversight.)
Does there exist something that does the analogous to CSS that jQuery does for JavaScript? Using jQuery you don't need to know JavaScript well to make things that work.
I am not interested in learning why IE6 does things in weird ways because I don't care about supporting it at all. I am more interested in a method of learning how to use CSS to do what I want without spending hours and hours reading obscure blogs.
Pencil and paper to sketch out your ideas (think in boxes, not triangles or hexagons), then just break down all the little parts and learn how to do each one. No problem is too big that it can't be broken down. And, like always, TMTOWTDI!
Find examples and learn from it—at least that's how I started learning. Study the styles used and play around with them. When you find something that does what you like, create a mock-up and play around with it. Then test it for cross-browser compatibility.
If you get frustrated because something works in Firefox and Chrome, but not in IE (this will happen a lot), don't give up. I find cursing Bill Gates' name and all he stands for is a great stress reliever. :-)
A great tool I like to use is Firebug, a plugin for Firefox that allows you to, among a great many other things, edit CSS rules in-browser and see the results as soon as you do it.
I agree that CSS was kind of an afterthought in the web design world, but it's one hell of an invention and makes things so much easier and quicker to develop.
Yes, there are CSS frameworks that are the 'jQuery of CSS'. Some of the more popular ones include 960 and Blueprint. I personally use 960 and have found it takes a lot of the guesswork out of layout.
As others have said CSS is hard to learn by reading. It ends up being one of those things you just need to develop an instinct for through lots of experience (which typically means lots of trial, error, and frustration). It is, as you've highlighted, not an ideal situation, but it is what it is.
Another difficulty is that the methodologies or workflow that is employed can really differ between individuals. Some people do a mock-up in Photoshop first, then produce an exact pixel-by-pixel "rendering" with HTML/CSS. Others use Photoshop, Illustrator, or another tool to simply sketch out and idea, and then re-create it from scratch in HTML/CSS. And still others prefer to start directly with HTML/CSS and just a few thumbnail sketches. Figuring out which of these methods fits you best is anthoer important piece of the puzzle.
It pretty much takes time and practice. But you can save yourself a lot of trouble if you keep your html clean and straightforward. Here are a few rules I can think of that have helped me:
Use DOCTYPE in your html pages, start with transitional since it has the most lax rules, and validate your html. If you keep your page in standards mode rather than quirks mode, you will have significantly fewer problems across the board.
Pick what browsers you will support early on and support them in a logical order. For me, I develop in firefox, then make sure that things are solid on chrome / safari. IE can use a special kind of comment that lets you insert html visible only to IE. Use that to add on stylesheets for IE7, then IE6 to override styles and fix any display issues in those browsers. You should generally start with the best browser first and work your way backward.
Be careful with padding. That is one of the most problematic properties I've dealt with. When you can, opt for using a little sub-container element with a margin in place of padding. It's more markup but margin is handled much better across all browsers.
Absolute-positioned elements inside of relative-positioned elements. This solves a LOT. When you relative position an element, it stays in it's normal flow. When you absolute position elements inside of a parent that is relative, the absolute items work in reference to the location of the parent.
In this case I don't think books will help much. CSS is extremely easy to learn, and extremely difficult to master.
All I can suggest is learn as you go.. You need a lot of experience!
Or, you can drop support for IE7 and especially IE6. If you do that you'll find very very few and very very rare quirks :)
Take some classes in graphic design. No programming language will make you an artist, and artistry is required for good user-interface design.
[or you could find better graphic designers to work with]
Subscribe to css-discuss, play with the common problems and talk with other people about your progress. The wiki is a very useful resource too.