Published:

This week I will running through how to get up and running with my personal framework including why I use this over others, how to setup a new project and some of the extended uses.

Some background

Serving as my personal development setup for the last few years, this frontend framework has been added to extensively, starting life as a set of reusable CSS helper classes and scales. Now it encapsulates everything I do on the frontend using Gulp to run a whole suite of optimisations, automated tasks, site tests and even deployment. With automated dependency injections and component creation it can save you a lot of man-hours. There is also a focus on modular design in the CSS so you can achieve consistency with spacing and type sizes.

Getting the framework setup

For those already setup for Gulp, the framework can be located here: https://github.com/alexplummer/framework

For totally new users the framework requires the following to run:

You can then clone the framework into a local folder on your computer by using 'git clone https://github.com/alexplummer/framework' in a console.

Once you have the above installed you can then grab the necessary packages by opening a console at the root and running either 'yarn install' or 'npm install' depending on the package manager you are using. This will take some time to run (around 1-4 minutes) as there are a lot of packages! After that has finished you should be good to go.

A screenshot of the unedited framework
A fresh copy of the framework setup in VS Code

With all of the above complete you should have an empty copy of the framework with a few sample components on an index page as in the above picture.

Running gulp and building components

You can now run 'gulp' in a console at the root of the project. If you are using VS Code this can be done from within the editor and makes life a lot easier. Any dependencies will now be installed including Bower and Fontello, depending on the size of your project this initialisation can take a few seconds. Occasionally one of these remote services will be unreachable and you will get something like an error for Fontello, in this case just run Gulp again. Once the project is running a local server will be started and you should get the site opening in your browser with the default framework page.

Browsersync running after succesful initialisation
Browsersync running after succesful initialisation

Building components

The framework makes it easy to create new components which are built out in a folder containing JS, Sass and Pug ready to go with classes and a sample function. There is no distinction between different levels of atomic design here, the components can be as big or small as you like, however individual pages sit in the HTML folder and more granular patterns like buttons usually live in the style folder solely as Sass mixins or partials.

In order to add new components make sure you have the main gulp task running and then open up 'component-list.json'. Within here you can add a new component by adding to the list filling in title and description:

"name": "Content left",

"description": "Content for the left-hand section"

},

{

"name": "Content right",

"description": "Content for the right-hand section"

},
...

This will build out the folder for you, you may need to refresh your folder list in your IDE to view it. 

Removing a component

This is done manually to avoid any potential accidental deletion, just remove both the folder of the component and also remove it from the 'component-list.json'.

Building, testing and deployment

As building out the production ready assets can take a few seconds, it is purposefully left out of the normal gulp task. Instead you will need to run 'gulp prod' which will then build and optimise your assets before copying them over to the prod folder. You can turn on or off certain optimisation tasks in the bottom of the gulp file.

Testing

You can also run Google page speed insights directly from the console, saving you from having to deploy the assets to a public facing site first, you can do this with the 'gulp psi' task and it will tell you how your site performs for both desktop and mobile. 

There is also an accessibility checker, which although is not enough to replace a thorough manual accessibility audit, it can give you some insights into areas of improvement. You can run with this 'gulp report'. 

Deployment

There is an FTP task baked in, many people will no longer find the need for it but it is useful for some, in order to get this working you will need to copy out the 'ftp-security.json' file from the root of the framework and move it one level up. This is to prevent it from being committed and someone stealing your login details. After this add in the folder you want to deploy to on your server by changing the var at the top of the gulp file. Then you can run 'gulp deploy' which will first build your project to the prod folder and then deploy it to your server.

Plus much, much more...

It isn't called the Feature Creep Framework for nothing! There is a ton more you can do with it and there is also a lot going on behind the scenes if you take a look at the gulp file. I have also created a React version of the framework which can be found here: https://github.com/alexplummer/framework-react

There is also CouchCMS integration which will help you build the site using both CouchCMS and Pug, check out my previous article for more information about how to do that.

For more information be sure to checkout the readme which can be found in the repo, let me know how you get on and if there are some areas in which it can be improved.



Comments