is there a way of having at least 24 columns using Fluid 960 Grid System?
http://www.designinfluences.com/fluid960gs/
cause i want a fluid version and im currently using the fluid version you can download with css generator on 960:s website.
give a try to fluid24.org it is based on 960.gs but allows you a fluid/liquid layout
You just need to do the math 960/24 = 40 so yes but you might need to work out the css yourself though - I am not familiar with this css library. If you know how the fluid grid system works. My favourite article on the subject is by Jon Tan and this should tell you everything you need to know: http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css
Related
I want to start a blog design from scratch as a week-ends project, but I have problem to see how I can render it via CSS.
In a CSS grid system you can define the size of a column based on the number of elements e.g. I have 12 based grid and I can decide to have 2 columns: 2 of the size of 6 or one of 5 and one of 7.
[EDIT] I found a website example that does what I would like to achieve: http://www.by-form.net/
Thanks~
The thing about vertical sizing is that it should grow as your content grows, that's why grid systems only include rows with 12 columns, because you'll need your page to grow as the content in it does. As stated before (and I'm not sure if you meant pure CSS grid system when you asked or if you were referring to bootstraps grid system or something similar), you can use a lot of different frameworks to achieve this like Bootstrap or Materialize or even create one yourself (which is a great exercise if your objective is to understand how this works, but not so much if you want to be productive about your project).
Thank you for your answers guys,
I found 2 ways to answer that issue:
the masonry grid Javasript layout that handle very closely to the original idea of how I wanted to handle it.
or a nested grid (a grid within a grid), e.g. profoundgrid
I don't have much knowledge about this but using bootstrap css you can achive the grid system.
check this out
Your grid in the image is very complex.
I don't think you can achieve a layout like this without any rows or columns that is flexible enough.
What I mean by that is, that you surely want the boxes to grow when the content gets bigger. This could be a big problem cause there are so many dependencies to next and previous columns.
I wrote an answer to a similar question showing a variety of CSS Techniques to do layouts. Check it out, it might be helpful here.
Anyway, if you reduce some dependencies and know exactly what the order of the content should be and look like, it would be much easier.
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'.
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.
For the fluid layouts, can i use 960 grid system for developing web applications..?
You can use the 960 grid system for web applications. If you want a fluid version you must select the fluid version to download. The default version is based on a fixed width of 960 pixels. See the download page:
http://www.spry-soft.com/grids/
Yes. Go to http://grids.heroku.com/ and download the fluid version instead of the normal version.
I personally like the 960.gs layout and think it looks good on any browser/system except mobile, then you should have a mobile version (jQueryMobile, Sencha etc).
Anyhow if you want something a little larger than 960 there is a new grid system that works quite well called 1140
http://cssgrid.net/
Check out their site. I found 1140 easier to use than 960.gs, in fact I wish they supported 960px resolution :)
Hope this helps!
so on 960:s homepage you can customize the grid and download the fluid version. so if i want a flexible grid this will do?
what's the thing about fluid 960 grid system? there are only 12 and 16 column versions. what if i have generated a 24 columns fluid version with 960 custom generator?
you can try fluid24 it is a fluid 24 columns grid system based on 960.gs
The custom CSS generator helps you use the same concept behind 960 but with other variables, and a fluid version as well. It was developed by Spry Soft and was based on 960.gs.
You can customize width, number of columns, and if you want a fluid layout using that generator. You might want to start with a simple site using just 960gs to get the hang of it before trying a 24 column fluid width layout.