Hi all,
I am tasked with developing a small responsive website for a local restaurant. Nothing major…just about 5 pages and some menus with various dishes, pricing, etc. My question is…should I use a framework for this project or should I create it all from scratch? I’m a little rusty in my coding…have yet to work with HTML5/CSS3 but have done the lynda.com tutorials. I do have some experience with html/css from past projects I’ve created, but have yet to do any development in the past 6 months.
Will a framework (looking at foundation4) some me some time or as it overkill for my current needs?
Personally Foundation 4 running on SASS is what I would recommend as you can turn off features in real time which allows for a very small code base post-compilation and it fixes a lot of the headaches that you will find yourself getting trapped with for hours on end.
SASS is just a language that sits on top of CSS, if you want a more natural feeling you can use compass which is a SASS extension and that provides a native experience without the learning curve.
I’m not exactly familiar with Foundation 4 on SASS as well. Is there a video tutorial somewhere to get us started with the grid framework?
On side note: I’ve just finished building my first responsive website, and I did it from scratch. Its not too difficult if your website holds a simple layout like what I have.
You can check it out here: http://www.zell-weekeat.com
Skunker, if you’re already familiar with CSS, Do take up SASS / LESS. It’ll help your future projects and the syntax is not any different from CSS. Its pretty quick to learn and , I’d say pick SASS if you’re going to. It’s alot more robust and helpful compared to LESS in my opinion.
Are you using MAC? I can help you get started with SASS if you like.
am against frameworks , especially on small projects.
Aside from their bulkiness, unless you are already super familiar with the specific framework AND CSS/HTML/js you also have to bone up on the framework specifics itself. if you are going to do that why not hone your CSS/html/js skills instead?
secondly, should the next project use a different framework you are set back to “scratch” on the learning curve, but should you be ‘forced’ to use a frame work and you already know your fundamentals ( css/html) then it would be that much easier for you to learn how/why the framework works.
thirdly, small projects are great for practicing learning fundamentals. If you were tasked with building a site for IBM … I could see why ( if only from the logistic point of view) you would want to go with a framework. So in essence this might be your opportunity to hone your skills w/o breaking your neck.
tip: as you code keep a file for yourself of code patterns you find yourself using over and over again; snipets, if you will.
Dresden I love you take on this. I’m pretty much against using frameworks, but my programmer friends keeps insisting I use them, and I ignored them most of the time
Learning a new framework to me is like learning a new language, and I feel making a grid from scratch somehow builds up my ability to understand CSS better.
Anyway Skunker. I don’t think there’s a “big” grid nor a “small” grid per se, its probably referring to the amount of code that’s included in the frameworks, and most of those codes are unnecessary for smaller projects anyway
I think the “small grid” is another name for “mobile grid”. In the Foundation 4 framework, you have access to a “small” and “large” grid. I assume you use the “small” grid with a “mobile-first” approach to web development. So, you start off your design with the content “stacked” and then as you expand for larger screens, the content will unstack itself and fill the viewport to whatever the max-width is set to. This is different than using a “large grid” layout which I guess acts differently when you decrease the viewport down to mobile device ranges.
I don’t know…still learning…all really fascinating…if anyone has any clearer explanation on the above, please share it!
Skunker, I did a quick read and I believe the small and large grids are only applicable to Foundation though, since I don’t seem to see them anywhere else.
Here’s what the small and large grids are for:
In responsive design, there are times where the layout of your website on the mobile version is extremely different from the layout of your website on the desktop because of the space constraints.
Foundation gives you the opportunity to OVERWRITE the “small” grid with the “large” grid for this functionality in case you wanted a vastly different layout, at a specific given breakpoint. Just resize your screen on the page that you have given and take a look at the first example.
If you put it into Code terms, I would believe the “large” grid has more specificity, and are just given a “display:none;” below a certain breakpoint.
THank you, Zell. When looking at other frameworks like Gumby2 and Bootstrap they also have their own version of “small grid” but they simply call it “mobile grid”, etc.
I’m pretty happy with the results , but there was a slight learning curve in getting up to speed with all the elements that go into making a custom RWD project (css fonts, jquery, custom media queries, hidden/visible features, a bit of hacking the grid, image scaling, etc). I got to say that it was a great experience. Thanks all for your support!
1+ for foundation framework (using standalone with sass) but if your site is small it would be nice do it from scratch of that way you practice and really learn how do and works web site; I personally like start site from the scratch for learn… by example I like start with the fonts at 10px not 16px, using ems, so I know that 2em means 20px.
also there is a simple, easy to use, and compatible one, you can find here: http://cssze.us/ . responsive, adaptive, adaptive images, image sprites, just used HTML4 and CSS2, and many more features. you could read more about it in readme and cheatsheet.
Is it just me or is that an awkward site to navigate? :(. It took me ages to work out the bent paper clip was a link and then I just couldn’t be bothered to read any more as I kept going around in circles and didn’t know where I was going next.
OMFG!!! That site has the WORST UI/UX I have ever seen. Not only that figuring out the paperclip navigation “puzzle” only rewards you with 8 lines of text total ??? I want to point out that, judging from the UXtheme, that site was “designed” by a client ( so don’t blame a graphics guy, lol).
Also I was reminded of this by the discussion above about “small vs big” :
