Why do we need to define the grid for mobile?
What is the advantage of doing so?
Check this example: common layouts with ccs grids on MDN
So, we could have the same results for mobile without defining a grid, just defining the grid at the first breakpoint would do the job.
You're correct for the most part. With the example in that tutorial, there is no difference if you declare the grid at the first breakpoint. The only differences are semantic.
Some of the benefits:
Consistency and clarity:
Your code will be more consistent and easier to intuit what is going on if the same layout method is used across all your breakpoints. Good css is easy to read, even for people who are not familiar with the project, who are not familiar with your coding style. If you intend to use grid layout, it should be consistent and used across the board.
Complexity of layout:
The example doesn't require grid layout for mobile, but that doesn't mean that will always be the case. As you iterate over the design, you may need to add more complexity later. If the structure is in place from the get-go, the refactoring process becomes easier.
Still, there is an argument to be made for only including code that is absolutely necessary to implement the correct layout. It's really down to personal preference whether you include it or not.
Related
I need tables that scale to mobile devices.
CSS only, no JS.
I want the design to have implicit columns, so large, complex tables
look neat. When i hacked this together i used colspan and "table" but
i cant make it scale to mobile screens and, well, if im redoing it i
might as well use something cleverer people than me designed.
I dont care if this is implemented with or .
I want it to be simple. As in not bloated
When my mediaquery detect a thin screen i want my "table" to collapse
into one column only. Its good enough.
I guess my problem is that i have insufficient knowledge of layouts, block, inline, float etcetera.
Ive looked into the 960 system. I like the idea but its bloated and its about pagedesign rather than tabledesign.
Basically, i could hack something together. But im looking for a modus operandi that exists out there. I believe there is a good design in use, i just cant find it. To present a table of data must be a common task, no?
For responsive Grid systems, I'd recommend Bootstrap from Twitter - it's one of the most mature frameworks at the moment. This solution shows how to hide columns for mobile devices. JavaScript is not required.
Adaptive tables (without js) is quite a problematic thing.
You can look through those articles:
http://css-tricks.com/responsive-data-table-roundup/
http://css-tricks.com/responsive-data-tables/
http://elvery.net/demo/responsive-tables/
with a js:
http://zurb.com/playground/responsive-tables
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'.
Since I new with CSS, I just started to work with CSS Grid system. I would like to know if are there any technical issues in use CSS grids? I mean, which are the reasons for you to not use grid?
Thanks
Flexibility
Once you start using the grid, you are stuck with it. Any other issues you might wind up finding you will have to conform to.
In my opinion (and every other designer I've talked to) it is far easier to simply define your own columns and default sizes as classes and apply them as-needed. A custom grid if you will. Then changing the styling is as easy as changing a line or two of CSS, instead of either re-generating the grid system or redesigning the site and sacrificing in order to use the grid.
I'm a fan resets and some minor love from Blueprint (especially the Typography), but that's about it.
I've just started using object oriented CSS (OOCSS). I'm really enjoying it because it provides a very basic and minimalistic grid system. It allows you to create relative sized grids by dividing an element into halves, thirds, fourths, or fifths. The divided elements are infinitely nestable.
OOCSS is more of a philosophy than a framework. It's all about how you extend a very basic foundation.
Check out these links:
http://oocss.org/
http://developer.yahoo.net/blogs/theater/archives/2009/03/website_and_webapp_performance.html
http://www.youtube.com/watch?v=j6sAm7CLoCQ
The only real reason is that they can lead to bloated markup, sometimes you have to do some serious nesting depending on the layout and desired effects+flexibilty.
They also lead to excessive class name lists on elements. However, you can avoid this at least if you move the CSS to semantic classes/ids before deploying... but thats can be alot of extra work. Blueprint is the excpetion here because it has acommand line tool to allow you to apply the rules from its framework classes to semantic selectors.
Overall i generally use them because its alot easier to teach a designer how to use a grid template. That why im not do alot of production art tasks when i go to slice things down. It jsut makes the whole process smoother IMO.
If your site has a column layout AND repeatable design patterns throughout the site... then there aren't any reasons not to include a grid. A grid adds: organization, proportion and alignment to your page. So why not keep that consistent? There is no reason.
Just don't Overuse A Grid
Some people say a grid is inflexible? That's not totally true - you can use it where you need it. You can always remove it or adjust. Just don't overuse it.
It depends on the grid system. Most grids have a fixed amount of columns, which restrict you in how you create your layout. For example, they don't allow you to combine 30%/30%/40%, 50%/50%, 25%/75% and whatever other combinations you can think of.
Some grid systems also don't allow nesting. That means you can't use a grid element as a grid for child elements in those grid systems, which makes it a lot more difficult for many layouts to be coded to HTML.
Also, some grid systems use techniques that don't work in older browsers. Before you use a grid system, you should always make sure it supports the browsers you need to support with your project.
There are frameworks out there without such restrictions, though. Cascade Framework, in fact, has a grid system far more flexible than that of any other framework out there and works fine in both IE6-8 and modern browsers alike.
I'm working on a web app that currently has a table-based layout. Ideally I'd like to go to pure css, or failing that, a hybrid tables-and-css layout* .
I've banged my head against the wall trying to understand css layouts and positioning. The main problem I'm encountering is that, depending on the state of the app, I have different things appearing in a 'section' of the layout -- what might be contained in a div or table. For instance, I might have some text and links, and then after user interaction, there might be a form, a table, some images, different text, etc. Anytime I find a css solution, it is for a fixed-element layout, or works in a specific case, etc. They're not robust solutions, in other words.
From this In Search of the One True Layout, the author about "Vertical placement of elements across grids/columns": "Designers face the choice of relying on elements being a particular height, resorting to tables or simply not bothering." Is this true? In my app, I can't rely on elements being a particular height.
Do I fall back on tables when I have elements of various hieghts ( which is quite a bit of the site, actually). I noticed that quite a bit of sites done by well-respected people and organizations use tables for layout in certain places, and not just for tabular data! This site included.
The chances are that there are CSS techniques to achieve what you want, but they may not be obvious if using CSS for complex layouts is new to you.
In your case, to 'get it done', I would recommend a hybrid type layout, and not feel bad about using a table to layout the pieces of the application that require those particular behaviours.
If it is particularly complex and difficult than a table might be the best and simplest approach even for the CSS expert.
Dynamic heights are only a problem if you need to implement a special effect of soem sort or a background image and oftent there are ways around that. It really depends on the Visual Design and what needs to be done to make each "block" flexible to use. Sometimes things arent possible but most of the time they are - they jsut tend to add complexity to the markup. But even that added complexity is easier for me to understand than nested tables :-)
My advice if you want to get things done and spend a ridiculous amount of time on css layout, browser compatibility, CSS reset, fonts:
write simple, valid, semantic HTML
use a simple CSS framework (like blueprint). You will rely on a simple grid system for positioning and layout.
add CSS classes to your HTML
add your custom CSS for colors, backgrounds...
Please reconsider using a table layout 'to get it done'; you will be disappointed, especially if you want to add some JS magic later.
I use CSS layouts for my web apps. But, my apps don't have wildly varying information, so I can set the content area and not have to worry about the layout looking "off" because a column is way out of balance with the rest of the content.
If you're having trouble with CSS layout and positioning, I'd suggest tables first, learn more about CSS/HTML positioning, and then convert your layout LATER. I'm sure that it's made for a frustrating experience learning CSS on a "real" project.
In the meantime, get some really good sources for CSS: books by Andy Budd, Simon Collison, Eric Meyer, et. al. Also, go to their blogs and dig into the archives. A really good book for CSS layout, positioning and general use is Beginning CSS Web Development by Simon Collison from APress. All the ins and outs with great working examples.
Having asked this question How to reach CSS zen?, I now understand that the issues I have are mostly related to positioning. I've found some articles telling that CSS is not always good enough as a layout system.
http://echochamber.me/viewtopic.php?f=11&t=40154
http://www.flownet.com/ron/css-rant.html
http://blog.workaround.org/2009/03/17/dont-abuse-css-for-page-layout/
Do you as CSS designers limit yourselves upfront to designs that CSS can handle? Should I avoid things that seems perfectly easy are in fact difficult to do with CSS?
Of course you limit yourself. As a designer, you should always think about the medium you're working with. If I were designing a magazine ad, I wouldn't be thinking about animations or video. There are certain rules you must adhere to, and it doesn't make sense to ignore that.
But of course, rules were always meant to be broken.
Why?
If you are "designing", why would you limit yourself based on a the limitation of one technology? When you design your site, you should always try to achieve the most usuable interface for the user.
If you do limit yourself, then you are just asking for the site to not be used, and then what's the point of creating it?
I don't limit myself upfront to any designs that CSS can handle (within reason of course), just figure out your design and there will be someway that you can get it looking right using CSS, but it might involve a lot of hair pulling, especially if IE6 is involved!
When implementing a web design (assuming I've got an image/drawing of what the site will look like) I always follow these steps:
I look at the design and determine what components it has. Examples are navigation areas, headers, content areas, and so on.
I implement (X)HTML that can represent the content areas without really taking the design into account (there are certain things such as content order that I use the design to determine.)
I start making the CSS and images needed for the site to look the same way it did in the original design document. Depending on the complexity of the design, I might come up short of elements to use for styling the page, and may end up adding elements that don't really make sense for the content. I try to avoid it as much as possible, though, and I try to create the elements in a way that isn't obtrusive to the content.
As you can see, I never limit the design to the capabilities of CSS. CSS comes last. Now, depending on the complexity of the design, it might not look exactly like it did in the original design document, but the goal is always to make it as identical as possible, while still maintaining clean HTML so that the design can easily be updated in the future.
Most layouts I find can be done with CSS. There are a very few exceptions (normally to do with verically centering text).
For me the main factor which limits my designs is a reluctance to use huge background images. If an effect can't be done by combining/repeating a few tiny bg images I tend to reject or tweak it. Eg a diagonal gradient on a box with curved corners which could be any height might fall into this category using CSS2.1
Almost every painter limits themselves to paint on canvas, almost every sculptor makes 3D shapes from stone or clay or metal...
But there's also the few who dream new dreams and create new things. Some flop, some shine.
Should you limit yourself based on what CSS can do with layouts? Not completely. I say dream big.
Once you've got your dream design, either figure out how to create it, find a technology other than CSS that can do it, or go start inventing!
You can do absolutely almost anything using CSS 2.1 as far as layout. Its a complete pain in the ass that has no reason to ever exist, but you can do rounded corners (using background images), gradient backgrounds (more background images) and all kinds of other bloated crap you don't need all together and still not completely destroy the semantics of your HTML.
Doing all that garbage and still attempting to be standards compliant reduces usability, because its the designers who need round corners and other frivolous crap and not the users. Usability tests have confirmed this. Sites that are bloated to accommodate presentation and usability at the cost of semantics and efficient fail in usability tests compared to their competition. I work for a website that gets several million visitors a day and I have seen the results of our usability tests.
CSS provides a very good way to create an overall design that easily can be changed by small changes in one CSS file, and instantly applies the design changes to all your pages. Of course there are things that are tricky to do with CSS, and in those cases you might want to do it in other ways, but even if your layout is mainly based on CSS, doesn't mean that you can't do some special parts using other technology! You can mix!
So you don't limit yourself when you go for CSS. You just make use of a powerful technology that can be used in perfect harmony along with others!