Building your own frontend framework from scratch — 1. Introduction
There are frameworks everywhere these days and new ones are popping up every other week and sometimes making a choice can be overwhelming. At some point I thought frameworks were really a dark art, until I built my own one (MIMI — https://thabotitus.github.io/mimi/), because I was genuinely curious about grids. The feeling is also great when you realise that anyone can build a framework, simple or complex — popular or unpopular.
So in this series we will be building our very own simple framework that we will definitely be proud of. No need for bootstrap :).
Why build a framework?
Frameworks generally answer the question of consistency, reusability and speed in future development. They are useful for companies / agencies that want to build something custom tailored to their needs. But what is stopping us common people from building our own framework that we can use in other projects — absolutely nothing! So let’s get to it.
What does our framework need?
So we’re aiming to build a simple, yet fun framework with the most used web components, like forms, cards and the like. And once we build these smaller components, we can combine them to make cool professional interfaces ready for production.
So here are all the pieces we will need to build our framework.
GRID
Grids are very popular web components as they keep websites sites looking clean and organized with consistent alignment. Grids can be simple or complex. Earlier grids were float based, more modern grids use Flex, and now CSS natively built CSS grid, which is very powerful and fun. We will be building a flex grid.
FORM
We will be custom styling most of our form inputs.
BUTTONS
Buttons are very important in websites as most of the time they signal a users intent to interact further with your app, which could lead to conversions and the like.
CARD
Cards are very popular web components and are used just about everywhere. They can make websites look really professional even in simple usage. I like cards because they are able to contain small or large bits of information in a way that is easily digestible by a user.
MODAL
Modals are nice ways to warn / show users messages while blurring out the rest of the screen so that they can focus on the message. Modals should definitely not be used to coerce a user into signing up for a newsletter. Shame!
MESSAGES
Messages usually tell users about what is happening as they interact with the app. For example messages can tell a user that the information they have entered is invalid.
TABLES
Tables are very important UI elements that are still used today. Back in the day they were actually used to layout the page, and unfortunately some websites today still do that. But not here. Tables are purely for data representation. You wouldn’t build your website with excel would you?
ACCORDION
Accordions are popular components that show/hide content when the header is clicked. Typically used for FAQs but can be used for any sort ofcontent that needs to be toggled.
TABS
Like accordions, tabs function to reveal content on a page. They are useful when there is a lot information on a page. They can be used to organise the content into more digestible chunks.
PROGRESS BAR
This is a nice to have, but fun to build.
So there we go. This should be enough for us to build a fully functional framework that we are sure to be proud of. So lets begin. Head to PART 2 — Setup and let’s get this going.
