Recomendations for a semantic, responsive HTML5 grid in 2013?

Grid systems, on the whole get two things majorly wrong. First, as you mentioned, is the complete lack of semantic css/javascript hooks. Second, and I think the least appreciated, is the re-introduction of the print layout meme. Grids scream "paste-up board". After all that time trying to get across to people that the web is not print, here we go acting like it's print.

I took a quick look at semantic.gs the other day. I haven't scoped out the others you mentioned. At first sight, I did not barf my lunch. I also had no desire to try it out. If you just have to use a grid system (and I cannot understand why you'd need a 'system'), it's not the worst you could do.

As for css pre-processors, don't get me started. They are an abomination. Of course, I speak as the guy who gets to fix or maintain the site after all the documentation has been lost, and it's probably some Great Idea that got used a time or three, then went dormant. Maybe it's because after gaining some understanding of css, I don't feel the need for what I consider unnecessary crutches. Or, maybe it's just Old Man Syndrome.

cheers,

gary

semantic.gs probably came from a link I posted, if you have to use one it follows one hugely important precept NO CSS CLASSES! it gets that correct, I used it or at least pretend to look like I'm using it but frankly it simply hinders my ability to quickly flip layouts around, the grid is actually restrictive in a similar way table layouts were.

Another you can look at if you really are set of print paradigm layouts is Foundation Zurb it does come in plain version or SaSS - less better ? I started with less to get a handle on why I dislike these things and now am looking at SaSS the more I study the more I realise I was right they were designed for programmers and people who find CSS perplexing.

Aspects of pre-processors are useful though mixins without a doubt creating complex rulesets or part rulesets and being able to drop those in over and over along with parametric args is useful.

Hi Guys; yes I'm still alive

I'm just finishing off a really interesting project that needed to be usable on desktops and devices of all sizes. It is a secure member's area for motorsport end-customers (very 'techie' people with lots of mobile devices), featuring a dashboard, profile control (linking with the customer's back-office system), news, forum (to be upgraded from SMF1 to SMF2), and a very complex and cutting-edge race data analysis system developed by a colleague to be skinable. I'd never designed/developed anything to be 100% responsive before but had built plenty of phone webapps, so I wasn't new to the subject.

The design brief I set out for myself (and got agreed) was that the project would work perfectly on all modern browsers but that we could settle for functional support only for IE 7 in that as long as it was usable, that would be okay. IE6 could go to hell and burn there very slowly and painfully, and I would pour acid on it if I could. And then I'd kick it in the nuts and take pictures to show my kids. And then I'd laugh. And then I'd laugh again, sounding like a parody of a Bond villain. And then I'd pour lemon juice on its wounds and wonder if I'd ever be able to move on from cursing its creators and cursing MS for letting it live for so long.

Finally: a project with which I could embrace HTML5 and CSS3, and forget about most of the IE hacks that had weighed me down for so long. I felt a ton lighter already …liberated! Chatting to a colleague who doesn't have my command of CSS, he said, quite simply, save yourself a sh*t-load of time and use a responsive grid system like Bootstrap or Foundation.

I've never used any framework of any kind before, preferring to originate all my own php, sql, html and CSS, but this project was going to be a steep learning curve for me, getting to grips with the latest responsive techniques. So I decided to throw a prototype together in the first instance with a responsive framework, and at the same time find out what all the fuss was about. I trawled the web for a few days, starting with a list of more than a dozen front-end frameworks and gradually weeding them down to two: Bootstrap and Foundation (as my friend had said would be the case). Both very similar, both making the same sort of advances and leap-frogging each other with each release, both with a huge network of support and development (very important), and both with a vast collection of secondary features (not important to me at the time). One uses LESS and the other SASS, but being an old-hand at CSS, I just don't feel that I need such complexity when I can achieve everything I need without either. I studied the code for each system and decided that Bootstrap looked and felt the closest to how I work, although there was very little in it and countless reviews found it difficult to separate the two.

So, Bootstrap it was then. I spent a few days getting to grips with the scaffolding methodology and whilst it was indeed a steep learning curve, the more I played, the more I realised that the application of the framework's classes to an existing layout is actually very straightforward once you learn the basics. Suddenly I was throwing together fully-responsive mock-ups in minutes that would keep a client very happy. Admittedly they all looked like a thousand other 'bootstrap' projects out there on the web, but that was because I was using the framework's off-the-shelf components, which, for speedy mock-ups that worked, was no big deal. Good God; was I starting to like something that I hadn't hand-coded myself in the small hours of a busy weekend?

In the interests of full disclosure, I will add that my background is both military programmer and hardware specialist during the late 70 and early 80s, and pre-Mac graphic designer during the 80s (it's complicated), before embracing PageMaker (v.1), Freehand (v.1), and ASP then PHP (v.3 I think). So I have my feet in many camps with regards to front-end, back-end, UX and most everything else you can throw at me, and I understand where Gary and Hugo are each coming from with their comments from this and another 'grid' thread that I read yesterday. But one definitely doesn't have to design in grids or tables. Yes, you start with the concept of twelve columns, but that's no bad thing for the initial design and fits in with the way I've worked for years. Beyond that, you have to think carefully about how a page is going to collapse down, and what you want at the top of the page on a phone or tablet. This can be controlled quite well by how you structure your layout and floats, and given that you can nestle the 12-column principle, and offset and absolutely position elements in the usual CSS way, there's nothing that a proficient CSS coder can't achieve, yet in a responsive way. Yes, you sometimes need to add extra containing divs that seem like bloat, but look what you get back in return: seamless, bug-free responsiveness. Bargain!

I very quickly started to like my new best friend, Bootstrap, because it enabled me to up my game at a pace I had never before experienced. Then I started to look at the included CSS and JS UI components, and realised that here was a whole load of stuff that I had previously had to hand-code and bug-fix, that I could use out of the box, knowing that thousands of others had already tested and bug-fixed it for me. The term 'standing on the shoulders of giants' came to mind, as mentioned by the colleague who had pointed me towards a framework in the first place.

What came next surprised even me: I started to build the production version of the new project on a Bootstrap scaffold. I left the minimised bootstrap css files in place at the top of the tree, and used my not-a-novice understanding of specificity and CSS techniques to shape and mould the bootstrap styles into something that entirely supported my usual design style. And I have to say that it wasn't difficult. Yes, the bootstrap CSS does leave a little to be desired when compared to expertly crafted lean hand-code, but it's not nearly as bad as something like DW, and there were many things that I learnt from the Bootstrap files that helped me to improve my 'CSS game'.

The bespoke parts of my project came together very quickly and look unrecognisable next to the work of most bootstrap users, because I know what I'm doing with CSS. Incorporating SMF2 into my new framework was a different story! SMF2 is coded in XHTML and although one can re-code dozens of templates if one wants to, I didn't have time. So I set about recoding the master 'layout skin' to replicate the rest of the project with it's very unique menu system and responsive menu too, and then picked the most important templates (that would be used 99% of the time) to 'reponsiveize' them. One of these, the main post display, needed a lot of work to get the poster's info to fall above the post itself on a phone (SMF2 has so many optional-extra config features that need to be allowed for in the design), but the rest only needed minor modification and the addition of bootstrap classes to existing elements to turn the forum into an almost-fully-responsive facility.

My colleague had started his race analysis system on a bootstrap base, so I soon had that skinned and working within the project as a cohesive whole, and then half a dozen tech-minded beta testers with an arsenal of desktop and mobile devices helped us to tie up the loose ends of specific bugs on specific platforms, of which there were very few considering the monumental task we'd had to bring together so many different parts into a cohesive, responsive whole.

And the client and users love it

Suddenly I'm looking at my own website and thousands of others, and thinking "God, how last year!" Every time I visit a site on my iPhone and have to pinch-zoom to see anything, I curse. I can't wait to sell my new-found skills to my clients, and if Bootstrap helps me to do that then I'm quite happy to get down from my pedestal and mix it with the unwashed common folk, albeit that I can easily give my work the edge that it needs to stand out, thanks to all the skills I have acquired with CSS that will remain as useful as ever.

So whilst CSS frameworks like Foundation and Bootstrap can be seen as dumbing-down the web designer's role, Hugo, they can also help us to meet the demands of a rapidly changing internet landscape head on, and fast, and they will only constrain your thinking and designing if you let them. I was wondering how and when to develop version 3 of my hand-coded CMS so that my clients' sites would be responsive. Now I know what to do, and Bootstrap will be my foundation, if you'll excuse the pun.

Trouble is it all sounds a plausible and reasonable, however for me it's like another nail in the coffin, I simply don't get on with the things, i grew up (in tech terms) - before these people came along to try and grid things out, to make everything a library snippet, to place in the hands of idiots with few skills the tools that allow themselves to go around calling themselves 'developers' I feel as though in reality now there is no means left to me to demonstrate my skills, my hard gained experience from the beginning of Standards, suffering all that that entailed through to this period I waited so f***ing long for, I should be happy yet just feel let down my the interminable desire to reduce everything to a copy paste snippet.

I will still avoid frameworks where possible. I am prepared to use pre-procesors, they can be useful although stupid comments in some that nesting rulesets is so much easier to understand as a descendent selector set is just so impossible to fathom just makes me want to laugh, but more I now use pre-processors not cos they make my life easier but because of peer pressure, if I don't I'm looked down on as behind the times.

However Roy I would caution that many many developers really don't like Bootstrap so don't get too caught up in it, Foundation & Compass is probably the better choice, and doesn't use vile meaningless grid classes.

I feel your pain, Hugo. I learnt my graphic design and typography skills from experts over many years slaving over Rotring pens, CS10, cow gum and Letraset, only to watch any random kid or adult pick up a copy of a DTP programme and call themselves a designer even though they hadn't got a clue about how visual communication 'works', or any hope of a design eye to make something at least look aesthetically pleasing even if it didn't communicate effectively (or at all).

Then the clients stopped spending money with designers and started buying software for their secretaries to prepare brochures. It was all so sad that such big companies could be so blind to the value of professional input. But things eventually settled down, and balance was restored once hard lessons were learned.

Then there was the attack of the application frameworks where any old script kiddie could grab a bit of software, move a few boxes around a screen, and hey presto you have a business application. Bloated, slow, insecure, unintuitive, unscalable, but cheap enough to fool the clients who were suckers for a smiling dude in a suit throwing around lots of tech-sounding long words without a clue what they mean. You have no idea how many big companies are suckered into paying extraordinary sums for complete [email protected] put together by 'programmers' using application frameworks. To us hand-coders, it's too painful for words.

And so it is with web design, or similar-ish, in a way. There's no point fighting it Hugo. You've just gotta grit your teeth and stay on top of the trends no matter how ludicrous you think they are, for your clients will expect you to go with the flow and know what you're talking about, even if the latest buzz words are nothing more than that: buzz words. Smile; nod your head; speak with authority about these things; give them what they want; then go home, down a bottle of wine, and scream!

As for Bootstrap, the only reason that I can see so far for not liking it next to other CSS frameworks, is that it's popular and helps churn out thousands of similar looking websites. But that's not a problem for me and my knowledge of CSS

You make some strong arguments for Bootstrap et al. But I think your skill sets are not applicable to the more common use case. The run of the mill developer user simply has no clue what he's doing, and the vendors are pandering to that ignorance. The results in general are bloated, poorly structured, non-semantic, and down-right confusing markup with nesting running 14 or more levels deep (I counted an example just yesterday). Don't get me started on the eleventy-seven stylesheets and the downloading of the entire jQuery library to provide for the attachment of one event handler that should run fewer than 10 lines of code.

As for css pre-processors, I see no use case at all. 'Nuff said.

cheers,

gary

As Gary comments But I think your skill sets are not applicable to the more common use case You , we, have the deeper understanding and experience to be able to take from these frameworks the best and ignore the deficits or pointless aspects, however that doesn't change the fact that the overwhelming point of these frameworks is NOT to make for a better experience for developers per se, if one starts to read about the history of these things of the people that developed them and the reasoning behind them you will keep coming up against one common element above all others and that is reducing this aspect of frontend coding to something one does not need to worry about, to quickly produce the markup and styles for a site so one can get on with the rest of the work.

These frameworks seem to have largely been produced by 'shops' that have a need to have their developers work within a common set of procedures and processes and that's fine and necessary, yet why do they then feel the need to evangelize their work and have everyone use it? As for Sass/Less it has been clear that much of this development has been driven by essentially programmers, developers who's skill set does not lie in site building or frontend coding, they have always found the CSS declarative language a problem and pre-processors start to address some of those concerns by turning the language into a more programming like one.

Now I do accept that I have no choice but to follow the trend - despite how much that upsets me - and I have been doing so but the issue still remains that frameworks obscure the actual skills a developer may have I don't care how much one thinks they'll use those hard one skills still, within a framework they are not evident to a client or user, especially when a developer with scant experience behind them can produce results that match pretty much to anything you may have turned out.

One thing that has been evident & what has crept to the fore again are graphical skills, what sets apart framework built sites are the graphics, quite often. If one isn't graphically orientated then that suddenly becomes a massive disadvantage - client doesn't care about code only UI/UX and visuals - rightly so -

Anyhow I need to now spend an hour running through Foundation and puzzle out it's use as some possible overflow work from a colleague dev maintains all site builds under the Foundation framework which he advised the client to use for all his client site builds, so if I want that work...