01440 784440 hi@mycompanyneedsa.co
SupportClient Login
OBCE Logo
Go back to news
Go back to news

Front End Framework - Foundation

15 May 2017

Here at MCNA when writing our front end code we use a frontend framework called Foundation. As suggested by the name, a framework sets the foundation for developers by providing pre defined classes and functions that can be used when developing web applications, which means that there is no need to reinvent the wheel each time and this really helps to streamline the development process.

There are many frameworks out there catering for a range of programming languages, but our chosen one is Foundation which is a responsive frontend framework written in HTML, CSS, SASS and JavaScript. Foundations provides a huge range of components which can be mixed and matched as much as required in order to speed up the development process without sacrificing quality. One of Foundation’s biggest assets is it’s detailed documentation which makes it really easy for developers to find what they need and implement it into their app, and this documentation included a range of code-snippets relating to typography, forms, buttons, navigation and other interface components.

Grid System

The grid system is probably the biggest feature of Foundation, it allows you to easily make web applications optimised so that they work across all devices (computer, mobile, tablet etc,) by using columns. Using this system will really add value to your company or brand because when potential customers are looking for a website these days they are always going to be looking for someone that can offer mobile/tablet optimisation because this is how the majority of people now access the internet. With the help of the detailed documentation even if you do not have any experience using grid systems, you will quickly pick it up and the work you produce will be all the better for it.

article1

Fully Customisable

The way Foundation works is by having it’s own CSS and Javascript files so you can create an element in HTML and give it a pre defined class from the file. However this does not mean that this is all then set in stone and you have to use the same styling; all of the classes and elements can be overwritten in your own CSS/JavaScript so you can put your personal touch on everything.

Plugins

Included in the many components for Foundation are some plugins that are all written in JavaScript and allow you to do some really cool things with your content. There are currently five different plugins that can be used to add that extra edge to any web application. My personal favourite is a plugin called equaliser, and the way it works is by putting a special bit of code on any elements you want to be the exact same height, then using the built in JavaScript any parts of your page with this code on will automatically equalise to the same height when the page is loaded, which is very useful and makes the page look a lot more professional and clean.

article2

Media

Media is another section covered by Foundation and contains a lot of really cool things that can be implemented into any page. One of the best parts of this section is called ‘Orbit’ and this is an image slider which comes in very handy and looks great on any page. Another good media component is the ‘progress bar,’ and this can be used if you’re ever creating a form for the user and for every step they go through you can show them how far through the process they are, and it just adds that extra little touch.

orbit

Other Features

Foundation has so many features that it would be difficult to go through every single one, but here are a few of it’s other features/components. First of all you have their general ones which include things like forms and visibility classes. Forms are self explanatory but with Foundations CSS behind them the forms look really good when putting them on to your page and save you have to making loads of changes to make them look attractive. Visibility classes can be put on parts of your code which makes them only show or makes them hide for certain screen sizes, for example if you had an image and It was too large for a mobile view you can put a ‘hide-for-small’ class on it, and this will make it not show for mobile devises which comes in really handy.

Another thing Foundation does really well is typography, from headers to paragraphs the way they have everything look in the CSS really makes it stand out on the page for example in paragraphs they add a line height which really splits up the text and makes it a lot easier to read.

Leading on Navigation is also something they have covered, they have a variety of different navigation options such as a dropdown menu, drill down menu, accordion menu and general top bar. All this is for when you’re creating the base of your web page and want to quickly get a navigation bar done quickly by just copying and pasting the code, and although they’re very plain and simple it is really easy to change out all the links and change the styling in your own CSS to make it match the rest of the site.

For more information and to start using Foundation click here.

Written by
Brandon Dickson