SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2004
    Location
    Texas
    Posts
    433
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Building a small responsive site: Should I use a framework or code from scratch?

    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?

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,196
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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.

  3. #3
    SitePoint Evangelist
    Join Date
    Oct 2004
    Location
    Texas
    Posts
    433
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is F4 running with SASS a huge learning curve? I've never used SASS/LESS. Will I have time to learn it and then develop this website at the same time?

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,196
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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.

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Singapore
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    SitePoint Evangelist
    Join Date
    Oct 2004
    Location
    Texas
    Posts
    433
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey guys quick question...I'm reading as much as i can on the Framework docs.

    What is meant by "small grid" and "large grid?" I know about grids, but didn't know there was differences.

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,812
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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.

  8. #8
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Singapore
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  9. #9
    SitePoint Evangelist
    Join Date
    Oct 2004
    Location
    Texas
    Posts
    433
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

    Source: http://foundation.zurb.com/docs/components/grid.html

  10. #10
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Singapore
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  11. #11
    SitePoint Evangelist
    Join Date
    Oct 2004
    Location
    Texas
    Posts
    433
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  12. #12
    SitePoint Enthusiast
    Join Date
    Apr 2013
    Location
    Singapore
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the heads up. Let me know which framework you choose in the end!

  13. #13
    SitePoint Evangelist
    Join Date
    Oct 2004
    Location
    Texas
    Posts
    433
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Zell Liew View Post
    Thanks for the heads up. Let me know which framework you choose in the end!
    I went with Bootstrap and I just completed my project a few weeks ago: http://www.ogmda.com/test/

    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!

  14. #14
    SitePoint Member
    Join Date
    Jul 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    http://jmp.sh/v/8OwubOzwLQYm6aJ7vZmX

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by spatafore View Post
    . by example I like start with the fonts at 10px not 16px, using ems, so I know that 2em means 20px.

    Perhaps you should read this thread first; specifically this comment

  16. #16
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by hadisadeqi View Post
    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.

  18. #18
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,812
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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" :

  19. #19
    SitePoint Member
    Join Date
    Sep 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry, I couldn't get the point! Is there a big problem with the UI, that makes mistakes for you when trying to get library package?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •