A question - which CSS grid are you using and why? One of the ready made ones or a custom one?

Also what are you looking for in a grid?

 

I always write my own. I've got some standard CSS for common patterns that are easy/quick to tweak to match the content requirements.

I make my own, its probably not the best and most efficient but I know exactly how it works and its easily adjusted to how I need it. Oh and yes, its responsive

I make my own, too. I have tried the Bootstrap grid, but it's too bloated for what I usually need.

I once saw a nice looking grid, the one thing I liked about it, was that there was an option for a column to take the remaining space, if that makes sense, something like the flexbox model. However I can't find it anymore

I like to use Bootstrap as it's solid, documented, and followed by the Twitter team.

I've tried a bunch of them and also made my own. Susy2 (sass- dependant) is my favourite though. Its like making your own but all the calculations are done for you. I would say it is the closest I've found to the flexbox model.

Edited July 6, 201412 yr by mantis

I follow the bootstrap grid. 12 columns is enough in most cases, ability to specify column changes at breakpoints is nice. Ability to push or pull columns to allow for source order manipulation without changing the visual effect, this can also be specified at breakpoints. Ability to nest grids. If i need any other functionality i can quickly create my own grid or expand on the bootstrap one.

To have two columns, one where you have a set size in pixels or percentage, and the other take up the rest of the remaining space you can use one of the quirks of overflow:hidden.

 

I can explain better using an example:

http://jsfiddle.net/AjXCQ/

 

Try changing the float of the column from left to right, change the percentage space taken and in pixels and %. You'll see how this works, it's very simple and elegant, one of the many uses for overflow:hidden

Edited July 7, 201412 yr by rbrtsmith

I make my own. I learned to code. Therefore I'll use my code. Not someone else's. Coding a grid isn't exactly too tricky or time-consuming either.

Hands down I'd have to say Susy. I must admit, I haven't gotten around to Susy2 yet. Other than that I usually custom make a grid using Sass calculations or good old fashioned calculator bashing

Two votes for Susy, I might take a look Thank you all.

Hands down I'd have to say Susy. I must admit, I haven't gotten around to Susy2 yet. Other than that I usually custom make a grid using Sass calculations or good old fashioned calculator bashing

 

Yeah Susy (or Susy2) is basically a fancy calculator. I basically am too lazy to round consistently to 4 decimal places taking into account the sub-pixel rounding differences of every browser. Susy2 syntax is a bit simpler and you can use things like the gutter-width as a variable (maybe you can do that with Susy One too but it seems easier somehow).

I make my own. I learned to code. Therefore I'll use my code. Not someone else's. Coding a grid isn't exactly too tricky or time-consuming either.

Im sure almost all of us here know how to create a grid, but if one already exists that does what you need for a given project why reinvent the wheel? Time is money so why waste it? We can create a cms system from scratch if we wanted to but it would be an awful waste of time unless you had a spec that called for this..

Edited July 7, 201412 yr by rbrtsmith

Im sure almost all of us here know how to create a grid, but if one already exists that does what you need for a given project why reinvent the wheel?

 

For the reason I already stated - I'd rather code it myself, not use somebody else's code. With third-party resources, especially Bootstrap, there's a great chance you'll wind up with heaps of code you don't need or want. So I'd rather make it myself, bespoke for individual projects. Maybe even code my own grid system for multiple projects. There's nothing wrong with that...

Edited July 8, 201412 yr by throzen

Nothing wrong for multiple projects I agree. But for a single project (small budget less than £10k) there isnt much point in my experience. The time saved far outweighs a few bytes saved -- which it literally is when minified and gziped. Time is of the essence on small budget projects and you can use that time focusing on the more critical aspects. But yes for a large budget one off thing I too would probably create something bespoke to keep the code ultra lean.

Nothing wrong for multiple projects I agree. But for a single project (small budget less than £10k) there isnt much point in my experience. The time saved far outweighs a few bytes saved -- which it literally is when minified and gziped. Time is of the essence on small budget projects and you can use that time focusing on the more critical aspects. But yes for a large budget one off thing I too would probably create something bespoke to keep the code ultra lean.

 

I think something like Bootstrap can only be used with pride by a freelancer or tiny agencies. Thriving, large companies, such as the one I'm in, time isn't of the essence. I take pride in my work.

Were a large agency regularly taking on projects over £15,000. We use bootstrap albeit a highly modified version. We also doubled takings this year so that comment is nonsense. Agencies have to complete projects efficiently. If you code from scratch everytime the time taken will eat into your profits big time. Its smart to create a library of useful functions and modules. Bootstrap happens to already contain a lot of these. There are agencies that work on much larger projects than ours who develop in a similar fashion. Code from scatch everytime and the business will struggle to make a profit.

 

You will find with sucessful agencies that they reuse 70-80% of the code yet still create a great result.

 

A huge budget project like I said will have more bespoke sections. But these can then be reused in later pprojecs.

Edited July 8, 201412 yr by rbrtsmith

Yes, unfortunately Throzen is an amateur with a god complex. It's a real shame, but his attitude is terrible.

 

I note that he said something on his own profile tonight about some css issue having inherited unclear class names. I responded to that with a nice, helpful link describing BEM and the BEM philosophy. He deleted that. Why?? Most likely because he thinks he knows everything already and finds the idea of someone giving him advice to be adversarial.

 

In my experience (and I have a lot more experience than Mr Throzen), it tends to be the less experienced coders who have the "I write everything myself" philosophy. They, through inexperience, think that people who use frameworks do so because they're "not as good", which is usually actually the opposite. It's true, of course, that we should know how to do things without a framework first, so I would never recommend a complete newcomer to begin with a framework - but once you know the basics and you know what the framework is helping you with, there really is no problem in using it.

 

His arrogance will prevent him from becoming a true top class developer. The BBC use bootstrap for some projects, foundation for others, and other libraries besides, depending on what they're doing. Bootstrap doesn't have to come with all the excess code that he's talking about - it's about knowing how to use it.

 

My first run in with Throzen came in a thread where he was asking for some advice for a job interview he was going for. He had a link to his own website, and I checked it out. I noticed that in some places he had images that were being resized in the browser - we know how bad that looks of course, so I mentioned that to him, along with a lot of what I thought was good advice for his interview. His response was terrible - he arrogantly and condescendingly mocked me for the advice I'd given to him, basically told me he's an expert and then smugly insisted he already had the job. Really poor attitude from this guy.

 

Mr Throzen - you're not an expert and you don't really know what you're talking about. You're in a position right now of being so inexperienced that you don't even know how much you have to learn. I've seen other posts from rbrtsmith on this forum, and he's clearly got a lot more experience than you - you would do well to pay attention to the advice you receive. And deleting a perfectly helpful link that I sent to you without malice? Again, what a poor attitude you have

 

And you're a self-righteous **** with who's made it his pathetic personal mission to lord himself over others on an Internet forum, hence the background you just provided. I give my opinion, as you do on forums, you persistently put it down, because you consider yourself superior. I do not give a toss what you think of me, my ability, my methods, my opinion or my actions. It's a ****ing internet forum. We have discussions with strangers. Sometimes you'll disagree with them. Deal with it. I've helped people on here, and held lively, enjoyable debates. Yet I have to deal with trolls like you, who have nothing better to do than write sweeping essays titled "Why I'm Right And You're Wrong". I am so done with you. Congrats for perpetuating the stereotypical arsehole developer persona, and thanks for making my time on here miserable. You absolute *******.

Wow that got out of hand fast. CityPaul: I remember myself actuslly when I too wanted to code everything from scratch. I still do to an extent as I try to avoid bloat whenever possible -- but I am improving in that department

With Bootstrap if you download the uncompiled less you can then choose what less files to include.

In our base template that we use to start projects we literally include the bare minimum of bootstrap and can add other modules easily when needed or pull from our own library.

Bootstrap is very well coded making great use of oocss standards, but for me is a bit heavy, which is why we dont include modules we are not using.

Edited July 8, 201412 yr by rbrtsmith

Wow! It could have been really interesting debate.

 

There are plenty of ways to express an opinion even if you don't agree, without sounding insulting.

 

And last, this is a free forum, everyone can visit or leave as and when they wish, if they are not happy.

 

Keep it civil.

On topic : I was just wondering what features designers / developers are looking for in a grid.

I personally use one which I have done myself and Lyndsey's grid, too. However I need more flexibility sometimes, but don't really need all the features of Bootstrap for example. I have worked with Bootstrap before and while I find it OK, I am not too keen on it. Mainly because I would feel more comfortable with a simpler grid.

 

Citypaul has mentioned Foundation, I haven't had a chance to work with it so far, but intend to as soon as I can.

 

I am sure we will all agree that the best solution is the one that will actually save the business money, while keeping in line with the client's objectives / goals.

On topic : I was just wondering what features designers / developers are looking for in a grid.

I personally use one which I have done myself and Lyndsey's grid, too. However I need more flexibility sometimes, but don't really need all the features of Bootstrap for example. I have worked with Bootstrap before and while I find it OK, I am not too keen on it. Mainly because I would feel more comfortable with a simpler grid.

 

Citypaul has mentioned Foundation, I haven't had a chance to work with it so far, but intend to as soon as I can.

 

I am sure we will all agree that the best solution is the one that will actually save the business money, while keeping in line with the client's objectives / goals.

If you download the uncompiled version of Bootstrap you can just include the base module and the grid thus you have no bloat. Theres a large number of modules in the full version of Bootstrap so Id always recommend to download the less uncompiled

 

It can get a bit complex but its very powerful once you do.

 

Your last sentence hits the nail on the head.

Edited July 8, 201412 yr by rbrtsmith

To have two columns, one where you have a set size in pixels or percentage, and the other take up the rest of the remaining space you can use one of the quirks of overflow:hidden.

 

I can explain better using an example:

http://jsfiddle.net/AjXCQ/

 

Try changing the float of the column from left to right, change the percentage space taken and in pixels and %. You'll see how this works, it's very simple and elegant, one of the many uses for overflow:hidden

 

Thanks for that! I, being busy as usual have missed your post, but just had a look at your js fiddle and it looks good and simple enough.

Maybe it will be worth it to have another look at Bootstrap, too - I am not sure what's the reason, but sometimes I do have clients come to me asking specifically for Bootstrap.

 

I am all for everything that saves time and makes development easier and faster, I always prefer to spend more time on design and planning

I built a grid a while back using LESS, it's due for a major SASS refactor soon. It handles the basics and is flexible enough to allow you to build onto it easily. It also doesn't impose any naming convention, you simply add the required width to an existing div.

 

http://www.webdesignerforum.co.uk/topic/39523-what-are-you-working-on-sneak-peek/page-33?do=findComment&comment=452578

Thanks for that! I, being busy as usual have missed your post, but just had a look at your js fiddle and it looks good and simple enough.

Maybe it will be worth it to have another look at Bootstrap, too - I am not sure what's the reason, but sometimes I do have clients come to me asking specifically for Bootstrap.

 

I am all for everything that saves time and makes development easier and faster, I always prefer to spend more time on design and planning

 

The little snippet I wrote the isn't intended to be used as a grid system, but in the infrequent cases where you do need a fixed width column and another to take the remaining space it works like a charm.

 

I think it will be time well spent if you take a further look at Bootstrap http://getbootstrap.com/getting-started/ Download the source code option to get all the less files then you can have full control over what to include on your project. It seems they have built a sass version too, nice

I think something like Bootstrap can only be used with pride by a freelancer or tiny agencies. Thriving, large companies, such as the one I'm in, time isn't of the essence. I take pride in my work.

 

Back to this comment, if you are in a large agency (I am in a fairly big one too) time isn't on the side of the developer so coding a new grid everytime isn't the best option. Using something like Bootstrap, Boilerplate etc cuts down the time that you have to spend on a project.

 

That said, big agencies should have the ability to create a grid system of their own similar to those out there and then you can use that within each project.

Back to this comment, if you are in a large agency (I am in a fairly big one too) time isn't on the side of the developer so coding a new grid everytime isn't the best option. Using something like Bootstrap, Boilerplate etc cuts down the time that you have to spend on a project.

 

That said, big agencies should have the ability to create a grid system of their own similar to those out there and then you can use that within each project.

 

I'd be interested to see what kind of projects this 'big' agency lands... Your totally right about creating a grid that an agency can use in projects. We do the same with other sections, creating modules that can be reused thought our projects

Emphasis on what Teodora has said about this being a free forum so let's keep things it in check a little with constructive criticism and steady on any personal attacks or we'll send in the dogs.

 

Anyone who's read my old posts on this topic will know I'm a grid whore and can't get enough. My stance is trying to code and create everything from scratch and then using what I've created as a toolkit of sorts. It doesn't always go according to plan however.

 

I've found that 'rush' jobs or low budget work has resulted in me using an existing framework or grid system as it's tried and tested. My love affair has always been Skeleton, but it needs to be updated. Aside from that, Foundation. The grid for Foundation is superb and I highly recommend it. Sure, there is bloat there too but if you know what you're doing (I don't) you can cut this down. I never really got to grips with Bootstrap but then again, I've never really needed it. Pretty extensive library.

 

In summary though, if you get time, have a look at Susy and/or Bourbon as these are great grids and are now my go to system. Mark Boulton had a pretty thorough grid app but he's old school print and this is more for hardcore grid fans Anyhoo, that's my thoughts of these gorgeous grids. Kisses.

Edited July 9, 201412 yr by 4li4s

In summary though, if you get time, have a look at Susy and/or Bourbon ...

 

Did someone say Bourbon?

Well.. i make it by own stuff but some time i use bootstrap.. so there is anyother better than that bootstrap please help me to find out?

Well.. i make it by own stuff but some time i use bootstrap.. so there is anyother better than that bootstrap please help me to find out?

 

I wouldn't say there are any better so to speak, it all depends on what you need it to do, the Bootstrap grid is complex yet very flexible, however the file size is larger than some other more basic grids. Ideally you want to match a grid to the project.

Edited July 11, 201412 yr by rbrtsmith

Its depends on what pursoses you using grid generally i develope my own css.

Just another point of note. The Foundation and Bootstrap grids can be used with sass/less (respectively) mixins that allow you to have a semantic grid system. You can also use individual components of these frameworks rather than the whole framework thus eliminating code bloat.

Just another point of note. The Foundation and Bootstrap grids can be used with sass/less (respectively) mixins that allow you to have a semantic grid system. You can also use individual components of these frameworks rather than the whole framework thus eliminating code bloat.

And you add to or remove things from these less/sass files to suit your needs

I'm not working on many projects at the moment because I'm taking an education but I do prefer to create my own layouts and I also like to reuse my own templates because I know them inside out. However this would only be efficient when working alone. When working in a team you need common conventions anyway so why not use a grid system. As Robert say you can always compress the code if you worry about load time - or you can use a very lightweight grid like this one: http://thisisdallas.github.io/Simple-Grid/

https://github.com/csswizardry/inuit.css/

 

This is well worth looking at, and something I may move into the workplace as the agency expands, I currently use an almost entirely stripped version of Bootsrap with a lot of my own objects added, that are very similar to those used in inuit.css. However like @@Nillervision posted above it's important that others can work with this too and in a larger agency going with my own framework might not be the best idea. Plus Harry Roberts, the author of Inuit is a CSS genius and he shares my philosophy on scaleable and modular CSS using BEM naming conventions so it looks like a great match.

I'm not working on many projects at the moment because I'm taking an education but I do prefer to create my own layouts and I also like to reuse my own templates because I know them inside out. However this would only be efficient when working alone. When working in a team you need common conventions anyway so why not use a grid system. As Robert say you can always compress the code if you worry about load time - or you can use a very lightweight grid like this one: http://thisisdallas.github.io/Simple-Grid/

 

Looks good that Simple grid, very similar to what I use, but looks better - will give it a go Their book also looks interesting, although not ready yet.

 

https://github.com/csswizardry/inuit.css/

 

This is well worth looking at, and something I may move into the workplace as the agency expands, I currently use an almost entirely stripped version of Bootsrap with a lot of my own objects added, that are very similar to those used in inuit.css. However like @@Nillervision posted above it's important that others can work with this too and in a larger agency going with my own framework might not be the best idea. Plus Harry Roberts, the author of Inuit is a CSS genius and he shares my philosophy on scaleable and modular CSS using BEM naming conventions so it looks like a great match.

 

I had a look at inuit.css, I think it's better suited for an agency workflow. Looks very interesting, though.

 

Looks good that Simple grid, very similar to what I use, but looks better - will give it a go Their book also looks interesting, although not ready yet.

 

 

I had a look at inuit.css, I think it's better suited for an agency workflow. Looks very interesting, though.

Inuits main purpose is to organise and give scaleability for css on large complex sites, but its also nice to use on smaller sites for maintainability reasons. It is very useful for agency workflow but also for a freelancer who lands a big project

Edited July 19, 201412 yr by rbrtsmith