Save on Development Costs by Using a Framework

Save on Development Costs by Using a Framework

When approaching a new project, people generally look at two options. Either they’re considering using a framework solution like ZURB Foundation or they’re thinking about custom building all the code.

There are a lot of people out there that will tell you not to use frameworks because they’re bloated, slow, and not configurable. They’ll tell you what you really need is a lean, mean custom solution where a developer has created all of the HTML, all the CSS, all the JavaScript, all by hand.

They’d be wrong.

Reinventing the Wheel Isn’t Easy

To be frank, creating a custom solution isn’t always the best approach. First of all, for a single developer to have such broad knowledge and to be specialized enough in each of these different areas for even just general website development is nearly impossible. Consider all the things they’ll have to do. The developer would have to dig into cross browser compatibility, CSS, and CSS 3 — all of these different intricacies. They would have to create the build pipeline.

All these different aspects are complex nowadays. It’s going to be nearly impossible for someone to have the kind of quality of control over their code to pull off the same results you’d get by using a framework.

Exceptions to this would be small, boutique agencies or independent developers who build a specialized solution.

In addition to this, working with custom-built sites can be less efficient. Let’s say you’re in the position of having a startup. Maybe you’re going to pivot or maybe you’re just creating a new design. You need to have the flexibility to build out different designs and the ability to do it quickly and efficiently. You don’t want to spend time checking cross browser compatibility, checking for bugs or error checking.

These are tasks you’d have to complete every time you have a new project if you’re not using a framework. It doesn’t make sense to continually reinvent the wheel when frameworks like ZURB Foundation can streamline the process.

Syntax and Abstraction Save Time and Money

ZURB Foundation and other frameworks provide a consistency of syntax that anyone across your team will be able to use. Plus, with the resources and documentation of the ZURB Foundation project, everyone will be able to get the information they need. You’re creating an abstraction or leaning on abstraction that allows you to bring people of varying levels of technical experience or specialization to work on the same exact project.

One of the biggest advantages to using a framework in a team environment is the ability to work together with varying degrees of knowledge and specialization. Let’s say you have several developers and not everyone is specialized in exactly the same thing. Maybe you’ve got one person more focused on the backend in a specific type of technology. Maybe you’ve got a full-stack dev that goes across the board everywhere. Eventually you may want someone who’s front-end.

What’s nice about using a framework like Foundation is that everyone can be on the same page. Rather than having to understand and see what everyone is doing all the time, you can rely upon the built in documentation of the framework as a way to educate people and keep them on their respective projects while they work together.

The presentational classes provided by Foundation create a great working environment. When someone opens up your templates or whatever you’re working with, your back end, your front-end, your full-stack developer, even your designers, everyone is going to be on the same page as long as they understand the basic concepts.

Even if they don’t know the basic grid classes and buttons, they can easily refer to the Foundation documentation. None of this documentation needs to be maintained in-house and it is easily accessible when it’s needed.

One big advantage for designers using something like Foundation, and frameworks in general, is their syntax. Foundation has some of the most readable syntax available. It can be a little bit wordy in that many things are not abbreviated, but the advantage is that it reads like what it is.

A button is a button, not a BTN or some sort of abstract syntax that has to be memorized. You’re memorizing basic words that can be used by people from all different types of backgrounds.

ZURB Foundation’s simple syntax and abstraction allows for people of all levels to get their hands dirty. Rather than having to dig deep into CSS and cross browser compatibility, a junior level developer can begin using the instinctive syntax and build things right away. They can get started on simple projects that will result in production of a code thanks to this abstraction.

Use Existing Knowledge to Your Benefit

If you’re thinking about a custom built solution — and I’m sure we’ve all been there — you have to remember that everything you touch can be more prone to errors than an open source framework or a library such as jQuery that’s been tested with hundreds, if not thousands, of people.

Frameworks have the advantage because they’re more reliable. Rather than trying to cobble together a new wheel, finding a solution that’s been well-tested, that is in the community, and that is open source will save time by providing a problem-solving history.

ZURB Foundation and other front-end frameworks really address this issue.

Rather than having to go into BrowserStack and use a bunch of tools to test for browser compatibility and JavaScript errors, you’re leaning on the work of the open source community. And in the case of ZURB Foundation your also leaning on their core corporate sponsor ZURB who invests into development of ZURB Foundation.

If you use a framework, ideally you won’t be dealing with bugs and browser compatibility. It will reduce the amount of time you’re going to spend in QA and the number of errors that you’ll get initially. Plus, there will be less points of failure for your particular project.

Not only does Foundation provide open-source information, but ZURB, the core ZURB Foundation team, and the ZURB Foundation community push out regular updates to Foundation, creating bug fixes and new features.

This is all being done for free. It’s not something you have to go and seek out, “Look, I want to add this feature. I want to do this type of thing.” This is something that’s coming automatically through the community.

You can easily lean on those new features and add them to the projects you’re doing. It’s as simple as running bower update.

Frameworks Allow For Easier Customization

ZURB is a product design agency in Campbell, California. They have many employees who are basically creating a variety of different websites and products for all sorts of clients — and they don’t have the same look or feel.

As opposed to other frameworks like Bootstrap, Foundation is designed to create a base layer of abstraction for your project to which different types of designs, looks, and themes, so to speak, can be applied.

It can be used to build out any type of website or web app.

Bootstrap and other frameworks function differently. Bootstrap was never designed to create a variety of different websites in different styles. In fact, their core philosophy was to create internal apps that had a consistency in look and feel. If you look at a lot of Bootstrap sites today you’re going to see this consistency. Even amongst themes created for Bootstrap, there’s not a lot of visual variance in the core styles, themes, or patterns that are used.

ZURB Foundation, in contrast, doesn’t rely on themes.

With Foundation, you can work with an agency, a designer, or a design resource to create a custom visual solution for your website. Foundation completely separates the visual side from the nature of the framework.

Design trends come and go.

ZURB Foundation makes it easy when you need to pivot Steve Blank-style into your new product and change the visual style. Once you ‘ve learned the different types of syntax and components and all the different ways of styling it, creating a new site is simple. Remember, all of this information is transferable.

ZURB Foundation: The Right Framework

Frameworks like ZURB Foundation save teams time and money, especially development teams at agencies and startups that need to pivot quickly. Frameworks provide consistency of syntax. They lower the barrier of entry so you can have different sets of developers and designers at different levels working with the same product. Plus, you get stable and well-tested code, regular updates, bug fixes, and new features from the open source community.

You don’t want to be in the position where you’re spending a lot of time and money creating new features, creating new updates, or addressing the new types of browsers and devices. By relying on the work that’s been done in the community you’re going to end up with a more stable product.

A more stable product is going to result in time savings and perhaps monetary savings by reducing the amount of time you have to spend in QA, testing, and addressing issues.

The best thing about Foundation and other frameworks is that they allow you to quickly pivot. You can easily create different types of sites with different types of visual context.

These are just a couple of reasons it’s important to use a framework like ZURB Foundation.

If you’re still building everything from the ground up or relying on buying themes for Bootstrap and customizing them per project, at some point you’re going to reach a limit of how much customization you can do. Investing the time and energy to learn ZURB Foundation as a framework for your team will provide you with a long-term path that will allow you to solve many different types of problems.

ZURB Foundation 5: Clean + Organized

ZURB Foundation 5: Clean + Organized

In this presentation I share my best practices working with ZURB Foundation. Keep your projects clean and organized and make your code more maintainable and readable.



A mostly css framework

  • jQuery + JS: required by some components
  • Sass: CSS Preprocessor
  • Everything On by Default

The Basics


JavaScript

  • Individual Imports Per Component
  • Import jQuery First
  • Activate FastClick.js for better mobile ux
  • Use DEFER Attribute

Use Sass

  • Allows you to quickly “theme”
  • Easily upgradeable via Bower
  • Extend ZURB Components with @mixins

Presentational Classes


Presentational Classes

  • always use .small-12 instead of .medium-12 or .large-12
  • always start with the medium grid (unless mobile first)
  • then refine small + large as needed
  • if radically different use visibility classes

be consistent

.show-for-small-only vs. .hide-for-small-only

.hide-for-small-only vs. .show-for-medium-up

pick one – consistency is key – keep the order keep the form


word order

class=“ small-8 medium-9 large-10 columns small-centered

grid, columns, grid modifiers small to large offset, centered, push/pull


omit anything you can

small-centered medium-centered large-uncentered

small-centered medium-uncentered large-uncentered

small-12 medium-12 large-12


when classes go bad

small-8 columns medium-offset-2 small-centered medium-uncentered large-pull-4

maybe it’s time for a @mixin


inline

source: xkcd.com/844


CSS

OOCSS BEM Something Else?


CSS

  • Use OOCSS Principals when it makes sense
  • Follow ZURB Foundation Naming Conventions (BEM is out)
  • Great Reference: SMACSS Book

If you want to go full BEM – just use the sass mixins


Sass Workflow

  • Grunt
  • Libsass (no Sass 3.3-3.4 features)
  • Sourcemaps or Inline Comments
  • Autoprefixer (config for sourcemaps)
  • Development vs. Production

Sass Organization – app.scss

1
2
3
4
5
6
7
8
1. Brand Variables
2. ZURB Foundation Overrides
3. Foundation Imports
4. Components
5. Modules (Views, Templates)
6. Sitewide
7. Etc.
8. Live Prototyping

1
2
3
4
5
6
7
8
9
10
/********************************/
/* ~/scss/brand/_variables.scss */
/********************************/

// set common colors and calculations
$brand-light-blue: lighten($brand-blue, 20%);
$brand-dark-gray-text: #333333;
// set any other globals
$brand-spacing: rem-calc(20);


1
2
3
4
5
6
7
8
/********************************/
/* ~/scss/brand/_settings.scss */
/********************************/

// copy and paste from foundation/_settings.scss
$primary-color: $brand-light-blue;
// refactor same values or colors into brand/vars


_settings.scss

  • not to be confused with the foundation/foundation/_settings.scss
  • no dead sass vars
  • these can change from time-to-time, easy upgrade
  • can be thought of as the theme, skin, look of site
  • be careful, changes everything sitewide

foundation imports

  • just pull from bower_components/_foundation.scss
  • turn on / off what you need for performance
  • to leave @mixins set: $include-html-classes or include-html-n-classes
  • in theory they all work

quicktip

for rapid prototyping leave // @import “foundation”; and or // $include-html-classes: true; at the top and commented out.

Then just uncomment when prototyping.

Recomment and adjust when done.


Components blocks of html + css used in more than one page Modules everything that is page sepcific Sitewide single elements / selectors on more than one page Shame/Drupalisms/etc. stuff that doesn’t fit appropriately named Prototype work fast in app.scss but find it a home fast


components WWZD?


1
2
3
4
5
6
7
8
9
<a class="button small secondary disabled"></a>
<button class="small secondary disabled"></button>

<ul class="button-group">
  <li><a class="button">Lorem.</a></li>
  <li><a class="button">Quo.</a></li>
  <li><a class="button">Reiciendis.</a></li>
</ul>


say what it is

say it the ZURB way

KISS


1
2
3
4
5
6
7
8
9
10
11
12
13
14
$vars: true;
@function magic-calc($some-value: true) { @return }
@mixin my-component-base($some-value: true) { // css }

ul.my-component {
  & li {
    & a.button {
      &.disabled {
        // ...
      }
    }
  }
}


nesting


sass is pretty smart

1
2
3
4
ul.my-component { }
ul.my-component li { }
ul.my-component li a.button { }
ul.my-component li a.button.disabled { }

makes refactoring class names fast and easy


1
2
3
4
my-component, another-component a {
  & small {
  }
}

becomes

1
2
my-component small { }
another-component a small { }

watch out for

1
2
3
my-component {
  & p, & a { /* each selector needs an & */ }
}

modules

  • same structure, same process, only the scope is different
  • based on project structure: views, templates, pages, etc.
1
2
3
4
5
6
7
8
/* component */
.everything-else
ul.my-component>li>a
.everything-else

/* module, wrap entire page with a div */
.view-index-find>
  .everything-else

naming conventions

  • make it easy to find, have a direct 1-to-1 correlation
  • keep the list alphabetical scss/view/index/_find.scss scss/view/partial/auth/_header.scss scss/page/about-us/_mission.scss scss/template/blog/_article.scss

example app.scss

1
2
3
4
5
6
@import "some-app/brand/defaults";
@import "some-app/brand/settings";
@import "settings"; // DO NOT MODIFY

// For troubleshooting or prototyping, uncomment line below
// @import "foundation";

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Performance: uncomment above and comment unused components so they don't generate CSS
//@import "foundation/components/accordion";
@import "foundation/components/alert-boxes";
@import "foundation/components/block-grid";
@import "foundation/components/breadcrumbs";
@import "foundation/components/button-groups";
@import "foundation/components/buttons";
//@import "foundation/components/clearing";
//@import "foundation/components/dropdown";
//@import "foundation/components/dropdown-buttons";
//@import "foundation/components/flex-video";
@import "foundation/components/forms";
@import "foundation/components/grid";
@import "foundation/components/inline-lists";
//@import "foundation/components/joyride";

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//@import "foundation/components/keystrokes";
@import "foundation/components/labels";
// @import "foundation/components/magellan";
@import "foundation/components/orbit";
@import "foundation/components/pagination";
@import "foundation/components/panels";
//@import "foundation/components/pricing-tables";
@import "foundation/components/progress-bars";
@import "foundation/components/reveal";
//@import "foundation/components/side-nav";
//@import "foundation/components/split-buttons";
@import "foundation/components/sub-nav";
@import "foundation/components/switches";
//@import "foundation/components/tables";
@import "foundation/components/tabs";
@import "foundation/components/thumbs";
@import "foundation/components/tooltips";
@import "foundation/components/top-bar";
@import "foundation/components/type";
//@import "foundation/components/offcanvas";
@import "foundation/components/visibility";

1
2
3
4
5
6
7
8
9
10
11
// VIEWS
@import "some-app/view/about-us";
@import "some-app/view/article";
@import "some-app/view/become-a-member";
@import "some-app/view/contact";
@import "some-app/view/create-account";
@import "some-app/view/footer";
@import "some-app/view/header";
@import "some-app/view/index";
@import "some-app/view/share";
@import "some-app/view/verify";

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// COMPONENTS
@import "some-app/component/audio-player";
@import "some-app/component/card";
@import "some-app/component/datepicker";
@import "some-app/component/progress";
@import "some-app/component/rating";
@import "some-app/component/sidebar";
@import "some-app/component/slider";
@import "some-app/component/timeline";
@import "some-app/component/triangle";
@import "some-app/component/user-profile";
@import "some-app/component/visualization";

// SITEWIDE

@import "some-app/drupalisms";
@import "some-app/sitewide";


JamesStone.com

@JAMESSTONEco