Table of Contents
Frameworks can bring many benefits to your work and also can speed you up. However, many people are try to avoid them every time they can. The reasons for this can be many, from complexity to dependency on someone else. Today we are going to take these arguments and totally crush ’em by exploring option of creating our own framework. First, this post will be suitable for any skill level so you don’t have to be afraid. Our focus will be aimed on several parts you have to consider when preparing your own framework. Without further ado, let’s dive in!
The best way to start is to divide this broad and complex subject into smaller more manageable parts. These will be grid system, typography, visuals and JavaScript. Even though it was not intentional, this order illustrate the importance of these parts. So, let’s start with the first in the line, the grid system.
Grid system
Building maintainable and robust grid system that will also be fully responsive is a hard task for itself. First, before you even start thinking about it more-in-depth, you have to decide if it will be fixed or fluid and also what resolution will you use for max-width. Sure, you can skip this part and go with fully fluid layout without any fixed proportions.However, this might cause you some troubles or more work in later phases.
Next step, after you decide on what type of layout you want is to consider the number of columns in the grid. Most often used amount is twelve. It easily manageable and offers pretty good options for laying out the content. Since, we are talking about columns … Think also about their widths and units you will use. There is a wide range of available units – px, ems, rems, vw, vh, % – and some less standard like pt. To make this decision easier, let’s focus on browser support. Pixels and ems are without any issues and they will work everywhere, so if in doubt choose one of them (preferably ems). Rem unit will not work in IE8 and Opera Mini. Finally, the newest units – vw (viewport width) and vh (viewport height). Well, this is similar to a mine field. IE8 … Are you serious? In higher versions of IE it should be feasible option. In the worst case, google around a bit for some good polyfill.
Before we move from the units, don’t forget to specify the width of gutters between individual columns and their units. The last unit to mention here are percentages. Personally, I chose them whenever I can. It is necessary for fluid grid, which I like to use in my projects and, for those of you who are not friends with Mathematics, counting is pretty simple.
Last two things are margin and padding on sides of columns. It is completely up to you if you include them or not. However, it always looks better when there is some white space between individual columns so the content is not placed immediately next to each other. Don’t forget, in case of padding, to use box-sizing property with border-box value.
Note: smart and time-saving choice can be looking elsewhere for already built grid system and using that one.
Typography
When grid is set, next is to setup the typography. This will include setting proper font-size for body and at least basic text elements (p, h1, h2, h3, h4, h5, h6) with units of your choice. Also, set the line-height for these elements. If you are not sure about this, check out post about web typography where you will find all the information you will need with exact values.
Visuals
When talking about visuals, I mean elements like buttons, input fields and whole forms. Most of the frameworks (at least the more robust) include their own styles for these elements. For example, take Bootstrap or Skeleton. You can recognize them almost every time thanks to colors they use. However, it is totally up to you how far in building your own framework you want to go. You can choose your own styles for various elements or you don’t. Even though I would like to help you here, both options have their pros and cons.
If you include specific styles, you might find yourself in situation where you will need to modify the framework to suit your current needs (project). This may cost you more time. On the other hand, if you have some particular style you like and use, creating “default” styles can be a big time saver. As you can see, it all ends with your personal taste and style of work.
JavaScript
Since we are in the middle of building a pretty cool framework, why not to add some dynamics via JavaScript (or jQuery)? You don’t have to stop with the structure and visual part of framework. Adding some options for interactions can be a good idea, but don’t overdo it. In some cases (custom dropdowns, navigation, etc.) you will even be forced to include few lines of JavaScript here or there. However, keep in mind that many people are using their smartphones and tablets for browsing, so don’t overflow them with unnecessary code.
Keep your code clean and effective. Simplify and minify it before you use it. Remember, there is a big difference between development and production version of the code. One last thing … If you use jQuery in your framework, don’t forget to include source code for this library as well.
Responsivity
Because responsivity influence every aspect of the framework, let’s talk about it in separate section. What do we need to get done in order to make the framework responsive? For grid, we have to add some default breakpoints for adjusting the width of layout and columns. You better not fall into the illusion of three breakpoints for mobile, tablet and desktop. Instead, test your framework on real life examples to see where the layout breaks naturally and add breakpoint there.
For typography, on smaller screens you might need to increase the font-size of text to make it more readable and legible. Also, consider modification of line-height and width of text elements (p) to create good reading experience.
For JS, you can watch for specific resolutions, devices, touch events, browser agents and manage what content in what form and shape will be served. This way, you can decrease demand on performance of your framework on smaller device that might not have so much computing power. Consider this aspect too when planning and designing your framework.
Summary
This is the end folks. I hope that information above will make it easier for you to create your own framework so you will not depend on someone else. Since this post was focused more on theory, in the future we will get into action and make our hands dirty!
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
