Building on strong 'Foundations'

Building websites in a team can be a complicated process without having a solid framework to build from. Developers often end up with confusing entanglements which result in wasted time and money.

Building websites in a team can be a complicated process without having a solid framework to build from. Developers often end up with confusing entanglements which result in wasted time and money.

To mitigate these issues Dcode uses the Foundation framework for building responsive applications.
According to MDN: “A framework is a library that ... allows for predictability and homogeneity in an application; predictability allows software to scale to an enormous size and still be maintainable...”
Foundation is built on a 12 column horizontal and vertical XY grid system. It comes with a bunch of useful components like accordions, flyouts panels, tab menus, popup modals, and more. This framework helps ensure layout consistency while preventing sticky entanglements.

At Dcode we build a Foundation kitchen sink for every client project. A kitchen sink is basically a website style guide with a bunch of common features like headings, buttons, tabs, etc. By modifying Foundations configurations and compartmentalising components with custom settings, we apply company branding and aesthetics to match a design concept. Having a kitchen sink allows us to use prebuilt components and slot them into areas of an application fast. It also allows clients to see how their product is coming to life at the early stages of a project lifecycle.

For those interested in how Foundation can be included, please read the details below. Otherwise, skip ahead to the next section.

Step 1: Include Foundation as an npm package:
npm install foundation-sites --save-dev

Step 2: Reference the foundation.scss file from node modules in our main.scss file

Step 3: Copy over the foundation settings.scss file from Foundation node module to the working Sass directory and link to that from our main.scss file. In the settings.scss file include an import for the utilities needed for Foundation to work:
@import '../../node_modules/foundation-sites/scss/util/util';

Step 4: Above the previous imports, Include a variables.scss file which includes branding settings for fonts and colours etc. Variables set here are used in the settings.scss file.

Step 5: Copy the contents of the Foundation ‘includes’ from foundation.scss and comment out the features you don’t need.

Step 6: In your main.js file, initiate Foundation so the interactivity for its components works.
$(() => {
$(document).foundation();
...
Note: You can also specify which elements should use Foundation to reduce load time instead of initializing foundation into the document element. Check out Foundation docs for more information.

Step 7: Finally; run a build with npm.

A code snippet of a main.scss file which includes steps 2 - 5 can be seen below:
@import "common/variables";
@import "settings";
@import "~foundation-sites/scss/foundation";

// Global styles
@include foundation-global-styles;
@include foundation-forms;
@include foundation-typography;

// Grids (choose one)
@include foundation-xy-grid-classes;
// @include foundation-grid;
// @include foundation-flex-grid;

// Generic components
@include foundation-button;
@include foundation-button-group;
@include foundation-close-button;

With the Foundation setup out of the way, you are now ready to build amazing applications.

I enjoy using Foundation and have used it for years now to great effect. Using Foundation ensures the underlying structures are maintainable, predictable, and have a long shelf life.
Building a kitchen sink is also a no brainer, as it enforces consistency. The kitchen sink we use at Dcode is constantly evolving with new inclusions added to it with every new project.
Contact Dcode today and ask us about how we can create a kitchen sink for your new application or website.