Front end frameworks first appeared on my radar in about 2016. They made so much sense. Why start coding from scratch every time? Why not build an approach of best practice, accessible, semantic, browser compatible code that covers common elements like the grid, typography and interactive elements like buttons and forms.
Bootstrap wasn’t the first but it was definitely the breakout from the group.
Developed in house at Twitter, Bootstrap was made available for free as an open source project. Very quickly Bootstrap was marginalised in the web development community because it was abused and often used as the defacto style of a website or application when this was never the intention.
The other main go to framework that I use is Foundation by Zurb. This was around before Bootstrap but came on my radar because it was stripped back somewhat but also a more fully fledged approach because it also included email and app versions.
It’s good to know both but even better to specialise in one. They evolve through versions and the markup changes so as a developer, you need to keep up with the pace.
Check these frameworks out on their websites where they have a wealth of documentation to help learn them but more importantly they help you learn proper, semantic coding.
Where does this fit in my redesign project?
The next step in the redesign project is to lay out the sketch designs in raw, unstyled HTML based on a framework.
Take a look at these two images. One is a design from Sketch of the target layout. The other is the raw layout based on the Zurb Foundation framework.
AJ Smallwood 2020 website in Sketch 
AJ Smallwood 2020 website in Foundation
The next post will outline the process to create the layout and then slowly align the various elements to match the Sketch design.
