The Power of Frameworks

Imagine this: You are fishing for your first time. You have a hook, a worm, and not much else planned out. It’s just going to be you, the line, and the shore. After a couple times of doing this, you might start bringing extra tools along, such as a net, extra bait, and maybe even a chair. Before you know it, you are almost bringing your entire house with you.

Frameworks are similar in the sense that you don’t need to bring the entire house with you. You do, however, want the extra benefit of a net and a chair.

Frameworks can be defined as a collection of standardized rules, functions, and concepts that can be reused. These are great, as they provide a streamlined way of providing tools, along with making the process of building a functional website quicker. Through repeated functions and styles that you might use in most projects, this saves more time with each project along the way. One example is Foundation 6 – this framework allows you to use many various CSS rules that are open source and available in any project you produce.

Frameworks allow you to use rules on a webpage to make a quick layout with “rows” and “columns.” It also allows you to scale for various screen sizes, including small, medium, large and extra-large widths for all of your columns, as well as having a 12-column layout for each size. Having a 2-column layout commonly fails on small screens, but will look great on medium sizes and up. Each of the different sizes are triggered by media queries that are controlled in settings.

The Foundation Framework also has several built in “components” that allow you to prototype and make more advanced layouts faster, including sliders, accordions, tabs and more. These are all customizable from a settings file if you are using SCSS.

One of the best parts about Foundation is that the styles are built using SCSS & Gulp. The framework itself can be modified by SCSS/Gulp files to only include specific components, leaving some of the tools in the toolbox per-say. Once Foundation is minified, it only uses 221 kilobytes (which is a lot of value in a small package, especially as the web increases in speed each year). That number becomes even smaller if unused components are left out.

Overall, the best part of a Framework comes down to having many useful tools available to you at the start of a project. As you use them more and more, the process will become faster each time. Looking at how a Framework works will give you a better idea of when and where you can use it. You can even replicate it if you are making a website that does not have access to a Framework like Foundation.

You can check out more information about some these topics by clicking on the links below.

SCSS
Gulp
Foundations Grid