I am familiar with the popular 960 Grid System setup and it's been very helpful - but I am looking for other popular/heavily-adopted solutions with the following abilities:
Larger base resolution (1280px rather than 1024px)?
Makes use of HTML5 semantic layout tags: ASIDE, NAV, etc.
Clean CSS: few "tricks/quirks" as possible... CSS3 would be a bonus.
Thank you.
Twitter Bootstrap features a grid system as well. It is kind of based on the 960 one but you can also modify it to roll your own. And it has a bunch of other shiny features (including HTML 5 and CSS 3).
Not sure if many people are still using the 960px layout since many people are into responsive design now. Check out html5boilerplate, tutorial from tutsplus(html5/css3 starter), cssgrid, fluid base grid(targets any resolution). Not sure if those helped but should give you an idea. I would go with fluid or used one of these as a boilerplate for new projects.
Related
I am having issues in learning CSS Grid and Flexbox I can not understand the layouts and understand tags. Is there a solution or a way to learn?
Thanks
Don't memorize codes, use what you will learn in practices, search about your questions.
you can write a documentation for yourself, draw divs (for example to see whats the difference between "align" and "justify" values).
Grid:
Grid Layout
The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.
For more information try:
https://www.w3schools.com/css/css_grid.asp
Or
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
Flexbox:
CSS Flexbox Layout Module
The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.
For more information try:
https://www.w3schools.com/css/css3_flexbox.asp
Or
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
Hope these help :)
I have a webapp that I am making and it has some particular layout needs that are closer to an application than a website.
The layout has:
a left sidebar that is fixed to the left side of the browser window and has a static width until it stacks, this sidebar will have tabs in it
a content area that will expand to a certain max-width and then stop
a right side bar that is fixed the the right edge of the content
I've been struggling to really determine if using a grid system, like bootstrap, would be an appropriate fit for something like this. Having some rows/columns and a collapsible grid in the content area seems like it would make sense, but in the sidebars it seems like its best to not use a grid system at all. I don't particularly like the idea doing some layout in the html with bootstrap3 and some in css.
Basically my app has the same layout as http://qz.com/ and I want similar responsive design breaks, and with that I would like to know if there is one or more css frameworks that support that type of layout with little overriding.
if you have some experience with resposive design and media queries, i would code it myself to avoid the thousands of lines of unnecessary code that comes with frameworks/libraries. bootstrap is great, but it also requires a bit of effort to master, and it would be a bit overkill for this one layout (if i understand you correctly).
if you just need this one layout, i would really recommend you do code it from scratch (personally i'd use something like jQuery and LESS). i hope i understood your question correctly, and sorry if this was not very hands-on.
to sum it up: in my opinion you're probably better off coding it yourself, but bootstrap and other frameworks will provide valuable insight and inspiration for how to do it.
I had experience with Twitter Bootstrap and Foundation, and I personally think the only thing I want to use is their grid system. Other features are just bloated.
So I read about the prospect of a grid layout. All of the articles I found are oriented toward an 'artistic' explanation (golden ratio ect). I am a coder at heart, I need a clear & logical reason to use a grid layout (for example: 'columns can be easily stacked on top of each other on mobile screen, and expand horizontally on larger screens'). Can someone give me the pros and cons of applying a grid system to my website? Personally do you think using a grid system is good?
If the answer is yes, should I use a premade grid system like from Twitter Bootstrap/Foundation or just make one for my own? All of the other features are unnecessary for me an irrelevant to my problem.
Thanks! :D
I agree with #kunalbhat that this might not be the best area to ask this but since you did I will try to answer it.
The grids are designed allow for speed and adaptability. Speed in multiple senses. The first part of the speed is the speed of writing the code. You can easily get the layout you want when you are using the grid system and everything aligns correctly. You don't have to remember your tables and columns and col-spans, etc.
The second speed is modifying your code. Inevitably you will need to go back and make changes, with a grid this is easily to do. Changing a col-md-7 to a col-md-6 easily makes a little tweak in the layout of your page that can easily be tracked and performed.
You mentioned responsive design, both Bootstrap and Foundation have responsive grids. The grids will snap to different sizes based on the viewport size. However you have control as well. For example if you want something to take 1/12th the screen in desktop, 1/4th on a tablet, and 100% on a phone that is easily done with Bootstrap and Foundation, both have grid classes that target specific viewports.
The also provide visibility classes based on those viewports.
For the "bloated" part that is easily solved. Using SCSS you can easily only import portions of a library. For example for one project I was on I only imported the Grid and it was considerably smaller.
I happen to think that this is a SO question, simply because of one of the main cons of CSS grid systems: semantic.
I think semantic is important for a web developer and having a class named col-md-7 is not the most semantic thing to do.
But I like grids, because they are easy and quick to use, so I started to use LESS. Because it allows me to use variables and functions(mixins) in CSS, I can build my own grid system on my CSS rather then on my HTLM.
You can start on Frameless and customize your own 'classes'.
Ultimately, I like to code my own CSS. I hate it when I have to conform to someone else's naming conventions... especially when they have no real meaning. However, I am attracted to the fact that a mobile site is pretty much ready to go with a framework.
Now, I've seen several comparisons between 960.gs and Blueprint, but LESS is never involved in those debates. Why not? Am I missing something? To me, it seems that LESS does pretty much the same basic things.
http://lessframework.com/
Anyone care to discuss?
LESSFramework is a css grid system that supports responsive webdesign principles. Thats the area of webdesign that strives to make one website design to support all browsers from mobile to large screen. The lessframework grid system adapts it's layout to the available screen real estate.
That's where it really differs from classic grid systems like 960.gs or blueprint.
LESS Framework is fairly new too, that's probably why you don't see it that much in reviews or comparisons.
If you want to compare them you'll have to figure out what you really need from a css framework.
960.gs is a pure grid layout system, nothing more ... but the most widely used one.
Blueprint is a grid system that goes a little further, it also offers typography and form styling
LESSFramework is a grid system that's only really usefull if you are aiming to create a responsive layout. If you are not you'll probably be better off with 960.gs
960.gs and Blueprint are grid systems.
LESS is a CSS pre-processor (aka LESScss).
Comparing it to them makes no sense, they do totally different things.
Update:
You seem to be talking about something different from LESScss, a grid system called LESSFramework.
I am leaving this answer here so people reading this question will see the different projects and what they are.
I have seen all these 'grid' type css frameworks and I'm still a tad confused as to what they do.
I understand that they help you quickly create a page since the layout is already defined for you, but do these frameworks make certain things MORE difficult?
It depends on how you typically use CSS to set up your pages. They wind up using less semantic classes ("indent-12" vs. "rail-content") if that's important to you, but they also solve a lot of layout issues people tend to run into.
They take care of the need (mostly) for floats, which can break designs faster than... well, something fast.
What they make harder, however, is customization. If you don't take the time to learn just what those classes mean, it can be hard to make things look just the way you want because your CSS rules might clash with something you didn't know about.
They are great as a way to switch from tables to CSS-based design, and they also really help implement the "grid" theory of design, where things line up and are in horizontal and vertical rhythm.
Take 'em or leave 'em (I left them, but sure played with them a bit)
EDIT: I used both 960 and blueprint, about 8 months ago or so. Unclear if significant changes have taken place since then.
Grid 960 is a CSS framework. Mainly, it can help you develop faster the mock-up of your page.
You can learn more about it in this tutorial.
Enjoy!
The idea is to stop thinking in terms of %s or pixels and start thinking in terms of columns. Grid systems automate the implementation of column-based positioning. My favorite is Fluid 960 - a grid system that stretches its columns to entire available width.
I have looked into various CSS frameworks in the past and I think they are aimed at removing a lot of the nitty CSS bugs that come across between browsers, if you ever tried to hand roll your own CSS you will know the issues that come up. If you have your own template that you have developed I would stick with it, that is what I ended up doing. I am familiar with it and it is very lightweight.
A 960 grid is a framework that should be implemented from the initial design stage. It helps both the designer and developer create clean organised UIs. In my experience the 960 grid system (http://www.960.gs) has helped a lot as it will allow me to create a formatted page quickly without re-writing any css files no matter what a client asks for. Typically I implement CSS styles like the following
.marginLeft20 { margin-left: 20px; }
.oneColumn {
float: left;
width: 60px;
}
This means I can make a div with the above classes applied
<div class="oneColumn marginLeft20">This is a oneColumn example</div>
If you need anymore info on grids I would recommend http://www.960.gs
Grid systems/frameworks are sort of like a sandbox with all the shovels, pails, sand and shapers ready made, so that all you have to do is pick up a tool and start making your castle.
Burt makes a great point about rolling your own CSS and all of the browser issues you run into. It can make for a very frustrating experience depending on the project you're working on!
While the framework you're using may have some limitations, it alleviates some headaches also.