I have now worked with both responsive CSS frameworks, Bootstrap, and UI Kit, and I have created my custom CSS design. I have learned a lot of design skills in my work experience and classes at Harvard Extension School since I first used Bootstrap and have worked on a few hand-coded projects. With that experience in my pocket, it was a good time to try a UI Kit. Frameworks and custom coding both have their benefits. I choose five things to consider in deciding which is best.
- Thoroughness and Efficiency
- A Unique while Consistent and Modern Design
- Appropriateness for Your Skill Level
- File Size and DRY Coding
- Website Accessibility
Bootstrap and a UI Kit are both thorough and efficient. Using Bootstrap, I was able to completely design a website while being at a beginner level in my CSS design skills. I could have an unlimited amount of time to work on that website and I would have barely scratched the surface of what I did with Bootstrap. Flash forward to 2020 and I actually learned what Bootstrap was and had the opportunity to try UI Kit. This framework, much like Bootstrap, provides the code to completely design my project. UI Kit is efficient and the code I needed was quickly applied. While I spent some time customizing it, the amount of time needed was minimal compared to what custom coded files would require. My custom coded project was only as thorough and efficient as I could be. Most designers will likely never be as thorough and efficient as frameworks that are made by these experts who design Bootstrap, UI Kit, and others. This is a win for frameworks.
Standardization and unique customized design are important things to consider. Any good website will have a central theme that distinguishes itself from competitors while keeping up to date with best practices and look of the day.
Frameworks do an excellent job of standardizing your website design. Their use of tags, including oddly some tags that do not validate, do well to keep all things consistent throughout many pages. The downside of this standardization is that you want your website brand to stand out. Unique customization can be done by designers who have the skills to edit the code provided by the framework. However, this flexibility is not as great. The complexity of the framework can present many issues. Custom design work as it implies allows for an unlimited amount of customization and flexibility. Designers who know enough to customize a framework should also know how to standardize their code across style sheets. That is one of the purposes of cascading style sheets. Both get you to a place to have a standardized yet customized website with some work on your end. Given that I give a slight edge to custom work.
Consider your skills to match the technology you want to use. A great thing about frameworks is how they can simplify development. When I barely understood what Bootstrap was, it made life simple for me. Although, I knew enough to be dangerous, especially with the complexity of Bootstrap. It is deceptively simple, so it can cause problems if you go messing with things you do not understand. Custom coding is not deceptive at all. It is what it is. Do not get me wrong, custom coded CSS can seem easy and allow you to make a mess of things too. However, it allows for the growth of skills. When I started running a few blocks around my neighborhood, I did not think I could run a marathon. After years of running and a few half marathons under my belt, now I am starting to think I could do a marathon. Developing coding skills, prevents you from getting ahead of yourself and causing too many sleepless nights. A win for custom coding.
Limiting lines of code and repetitiveness in custom coding has a huge benefit of allowing use of only the code you need. The amount of code in frameworks is extensive. UI Kit works by creating their own HTML tags and using classes instead of valid HTML tag selectors. This means ever tag needs to be styled and there are multiple ways to accomplish a style, going against the Do Not Repeat rule. With the benefit of being thorough and efficient come two big drawbacks. First, all that code needs to load to view your website. This can slow down the user experience. If you use most of the code, great. If not, this could be a performance issue. If you want to resolve this problem, well you customize using your CSS skills to make changes and remove unneeded code. However, this might not be a simple task for those less experienced, as all that code can be complicated and overwhelming. This is a clear win for custom coding.
Website accessibility is one of the most important things in digital media right now. Reasons for solid accessible design include search engine optimization, ethical and legal requirements, and many more. Accessibility takes time to implement. There is no one-size-fits-all method to it. At least not right now. This may be why frameworks struggle here. You can certainly work accessibility measures into frameworks but having to do that takes away a lot of the benefits of using them. This is a clear win for custom coding.
So custom coding wins, right? Yes, however maybe not on any given Sunday. I would recommend custom coding for most cases but there are times when a framework might be the better option. If you do not know much CSS and just want a standard, average website up fast, go with the framework. If you are an expert at CSS but don’t have the time to write all your code, you might also be well off to use a framework, which will save you time and give you an amazing base that you can customize and remove unwanted code.
For most of us deciding between these two options, write your own code. This process will give you an accessible, responsive, customized website with a style and brand of your own. It will allow you to improve your website design skills. You should also take advantage of the possibility to add in small snippets of code you see in any framework should have learned already. There is no need to pick just one and include all their code. Create a file of your own and add open-source framework code, while noting the source you found it from in your code of course. For example, you could add code that might be beyond your skill level such as screen reader code from Bootstrap or Scrollspy code from UI Kit.
I hope this analysis helps and allows you to code the best site to the best of your ability.