2

The benefits of using Foundation 6

over 7 years ago from , Creative @ Eyeversuseye

I'm currently using a theme that I've developed inhouse for all of our developments based with Wordpress – I've been asked several times if we should move over to Foundation 6.

I'm doing research into it, and from my experience, Foundation websites look like Foundation websites, limiting your styles to the Foundation look, and if you want to customise it to the point where it no longer looks like foundation, you'd have spent most of your time ripping out Foundation to get to a point where you can progress with a custom design.

I can't find any articles that aren't directly related to Zurb writing about it, so I would appreciate any articles or benefits over using a custom theme.

17 comments

  • Kemie GuaidaKemie Guaida, over 7 years ago

    My experience is the opposite. Foundation has really minimal styling, so there is very little overriding. You customize the base through SASS, then add custom styles on top of that. It is much easier to "skin" than Bootstrap.

    But this is coming from the premise that your design can be adapted to a standard grid and uses more or less standard components.

    Take a look at Zurb's own showcase for examples that don't look "foundationy"

    4 points
    • Andrew SmithAndrew Smith, over 7 years ago

      I looked at their showcase earlier, but I'm not really so trusting of seeing the examples form Zurb themselves, but other actual designers. EA's website for starwars is hardly going to be a regular client website – so i'm interested in seeing real world articles, examples, usercases etc, if you have some, i'd love to see into them

      0 points
    • Spencer Bigum, over 7 years ago

      Foundation is just like bootstrap in the sense that it's meant to be a stepping stone for you to build on top of to meet your needs. Foundation is a great framework that you can customize fairly easily once you are familiar with how it works. I think there is a Wordpress / foundation starter build called jointswp and another called foundationpress that are ready to start building with.

      1 point
  • Woratana PerthWoratana Perth, over 7 years ago

    Foundation is quite easy to edit compared to Bootstrap in my opinion.

    However, recently, I prefer getting Essential Pack from Foundation and code most of the components myself. Foundation grid is priceless though :D

    3 points
    • Andrew SmithAndrew Smith, over 7 years ago

      I've been asked if i can branch my theme, strip it down and include the essential pack – it's an option i'm willing to take forward, as it's only mixins and such that are needed.

      The javascript though, i'm unsure of – surely it needs markup suited to the JS?

      0 points
  • Damon GoldingDamon Golding, over 7 years ago

    This used to be the case with old versions of Foundation but I have found 6 to be very minimalistic and easy to 'theme'.

    Give it a trial run, I'm pretty sure you will be happily surprised.

    2 points
    • Andrew SmithAndrew Smith, over 7 years ago

      I opened up the settings scss in the global folder and say 500 lines of variables. I thought it could be over kill. Especially since you have the option to not include most of foundation, already i'm thinking it's going to be difficult to manage further down the line of a project, being unable to remove anything incase it's needed later in a project... I think i should suggest splitting that file up into the imports themselves, so they're self contained...

      But again this highlights how Foundation dictate the project once started with it. I've noticed close to 300 issues in the github – i know this is based on the users testing it, i'm sure you could find 300 issues with my own theme if you let the world use it, but how do they deal with these issues when you've started to build the project?!

      questions questions questions

      0 points
      • Spencer Bigum, over 7 years ago

        Id be surprised if foundation 6 is not already being split up into modules that get imported in via scss. I know with bootstrap 3 and the sass version you can comment out any import you do or don't need. And variables don't get loaded into the final CSS output so you just have to read through them to know what they do. The only downside is all the Js is in one file and hard to strip out for each module. I know with bootstrap 4 everything is in separate modules from the get go but I think it's only in alpha at the moment. The other thing to keep in mind is foundation 6 was just released and hasn't had the time to mature like its previous framework or bootstrap 3 - so yea expect bugs.

        0 points
  • Thomas Michael SemmlerThomas Michael Semmler, over 7 years ago

    Hm... why using a frontend framework anyway? What are, in your subjective situation, the reasons for actually using it, instead of making your own, or starting with a skelleton-like theme on each project?

    0 points
    • Andrew SmithAndrew Smith, over 7 years ago

      Most of the design team are familiar with Foundation, as it's easier for them to get from sketch into code. The problem is that I'm happy to make things from my bare bones theme, but it requires you to know what you want to build before you can start

      0 points
      • Thomas Michael SemmlerThomas Michael Semmler, over 7 years ago

        Your design team is familiar with Foundation, meaning they are constraining themselves? I'm not sure what you mean with that - weather the designers know foundation or not is not really relevant, as they don't use it.

        it requires you to know what you want to build before you can start

        Im not getting that sentence here. How can you start do develop without knowing what to develop? Or do you mean something different?

        0 points
        • Andrew SmithAndrew Smith, over 7 years ago

          whether the designers know foundation or not is not really relevant, as they don't use it

          The designers aren't limited to just mockup-design – they can actually build things, but they're knowledge of building things stems from using foundation. This means they're used to being able to include modules to build their designs and have most of the elements in place. Because of this, there is an base of foundations limitation in the design – they know we can build anything, but to help, they will choose something they know is possible.

          it requires you to know what you want to build before you can start

          I mean, being able to break down a design into components and structure the html / scss in a clean way, knowing how to tackle grids, layouts in a responsive manner etc. These things you don't think about with foundation, as you use the markup / styles pre-built into it, there's less understanding and more ... prototype style building

          0 points
          • Thomas Michael SemmlerThomas Michael Semmler, over 7 years ago

            The designers aren't limited to just mockup-design – they can actually build things, but they're knowledge of building things stems from using foundation

            Ahh, thats the missing link. Now I got a picture of the situation.

            1 point
            • Andrew SmithAndrew Smith, over 7 years ago

              I'm going to try, for any smaller projects that come in, using Foundation 6 with it – If it doesn't work, then the alternative is to do a workshop on my own tutorial and get everyone up to speed.

              0 points
  • L Theos, over 7 years ago

    Foundation Press is a nice framework but I've never actually used it. I'm also in the process of evaluating as there are some things I have to learn to do differently. For now, I prefer to use my own framework based on the trusted Bones framework with my own sass and the scripts I prefer to use.

    0 points
  • Sherizan SheikhSherizan Sheikh, over 7 years ago

    You might be looking at the main concept of frameworks differently. I use both Bootstrap and Foundation and the difference is in the way it helps you to develop with their built-in components.

    Foundation has better helpers like "equal-height" or flex-powered grids, or even as simple as benefitting their "large-centered" class which makes any element vertically centered.

    They also have built-in "rem to px" mixin which helps you with font issues.

    These are just the benefits from the top of my head. In terms of customising the template, both Bootstrap and Foundation are fairly straightforward and their documentation provided are thorough.

    It's also very lightweight and you can easily decouple components if you don't wish to use them. Hope this helps.

    0 points