Modern, minimalist, responsive web page?

(Dave Evans) #1

As you might know, on the client side I build native apps. So I’ve become a little out of the loop regarding building modern, responsive web pages - still working out the difference between reset.css and normalize.css. So I’m trying to understand and put together a starting point for building new sites.

My objectives:

  • Establish minimum browser requirements and testing strategy
  • Minimalist (tiny) - no frameworks, not even jQuery
  • Responsive via CSS and HTML and maybe a tiny bit of Javascript

I’ve looked at Skeleton and Pure, I’m interested in both, but not convinced. If anyone has any pointers for sites, books, groups etc. I’d be very grateful.

(Jude Gibbons) #2

Sounds like my kinda websites! But I’ve had to google to find out what Skeleton and Pure are… Surely they are frameworks? I suppose in my (limited) experience, for a small simple webpage I’d just write the css from scratch… Also, I think I’m right in saying that reset and normalise are just two words for the same concept: removing all browser-specific styles so that you start with a ‘blank canvas’. I’ve always used the word reset - I had to ask someone (in an interview!) what they meant by ‘normalise’.

Browser requirements: this depends on your desired audience. I still find myself automatically excluding certain features because at the back of my mind is the thought that they don’t work on IE6, which I guess is pretty crazy now!

(Michael Brett) #3

Here are some sites/articles you’ll want to check out:

Feature support:
JQuery alternatives:
JavaScript micro-libraries:


Tongue-in-cheek, but the principles in this article are sound.

Also always worth swinging by and having a little mooch around.

If you have the time and inclination, I would check out for a really in-depth look at how Google thinks websites/apps should be put together. I would have a little search around for tips as well.

Frameworks all have their pros and cons (I like to mix and match if I’m putting outlines together). If you just decide to say screw it and go with a framework, there is always to get rid of that cruft.

I’m sure there are others on here that have more recommendations. Have fun on the front end! :smile:

(Steve Jalim) #4

Just throwing out a quick recommendation for BEM and, in particular, SUITCSS - Google em! :slight_smile:

(Daniel Hollands) #5

So, I’ve got a horrible feeling this is actually going to end up being way more complex than you’re after - so I apologise for that (and am happy to spend some time introducing you to them properly one evening - in exchange for some Xamarin insights) but Bourbon and Neat are pretty good.

(Steve Jalim) #6

@DaveDev Re Pure, I’ve used it a little on small things and it’s ‘fine’ - so may well be up to what you need it for. It isn’t as good for rapid development of larger UIs where there are many custom components (which is why I favour SUIT), but it does work well enough, is extensible if you decide to commit to it as core to your build and it handles responsive behaviour decently (and by default), which is where many people end up driving into a metaphorical tree after getting some speed up with a framework.

(Dave Evans) #7

Thank you for all the replies - I’ve now got a lot of homework to do, but I’m now starting from recommendations instead of cold. Tanks again.

To clarify some of my first post (and add the missing links)

  • reset.css and normailize.css are two different approaches to level the field regarding browser differences - reset.css does this by removing the built in default browser styles, while normalize.css tries to make the styles consistent. I used to use reset.css, now thinking about changing to use normalize.css.

  • Testing, I mean browserstack, crossbrowsertesting, litmus and all the others - what do you use? Do they work well?

  • No frameworks - I really don’t consider anything in css as a framework, I meant Javascript frameworks, UI templating frameworks, css pre-processors etc. Just to have a very clean uncluttered starting point.

  • These are the links for Skeleton and Pure

@LimeBlast - do you have time for a beer after the meetup on Wednesday?

(Stuart Langridge) #8

I’m using browserstack on the current project, with selenium and node’s webdriverio. It’s quite handy, as long as you can cope with Selenium’s slightly rickety nature. Tests are run by mocha, this being a node app.

(Daniel Hollands) #9

This is a good move, most of the big frameworks include some type of normailze.css variant in them, and it’s the better approach than resetting everything to blank, then having to reimplement everything.

I can probably manage that :beer:

(Steve Jalim) #10

I like Browserstack, too, but before you get to that stage, making sure your templating code passes HTML validation when rendered is the happiest path to full cross-browser compatibility – people often zoom straight past it without appreciating its worth.

(Daniel Hollands) #11

@DaveDev, if you’re interested in seeing what the future of frontend is like, check out What The Flexbox?!. It’s a series of 20 videos designed to introduce you to Flexbox and takes you right up to designing a mobile layout using it…

… at least that’s what’s advertised - I’ve only just started with the first video, so it might be rubbish - and you do need to give you email address to access the videos, so it could be spam-city… I don’t know, I guess I’m about to find out.

(Dave Evans) #12

So to continue the theme: