Should You Use a Front-End Web Framework?

If you’re a seasoned web developer, you might spot an uneven fight here. UIKit and other frameworks are built from HTML and CSS standards. Why would they be pit against each other? — Because those new to Front-End sometimes struggle to see the value of DIY web design. If something already exists like UIKit or Bootstrap, why reinvent the wheel or even bother to learn how to write custom HTML/CSS?

Let’s break it down.

Ease of Use

With most frameworks, ease of use is a dancing puzzle that moves between the framework’s documentation and real-life scenarios. With enough practice, it isn’t difficult, but until then, it can seem like a lot of square pegs and circular holes. With a framework, architectural and organizational planning is taken care of, ease of use depends on practicing and becoming proficient in the framework.

Assuming fluent literacy in HTML/CSS, writing without a framework is easy but becomes difficult if a thoughtful design and development architecture hasn’t been planned ahead of time. As long as you are proficient in HTML/CSS, ease of use depends on your planning.

Efficiency of Time Spent

The majority of time spent on any framework is modification to your specification. The efficiency of the framework will depend how far your specification deviates from the default styling. Efficiency depends on your design specification.

100% of the time spent on custom HTML/CSS will be spent on creating to exact specification, leading to zero-waste design and development. However if a thoughtful design and development architecture hasn’t been planned first, time management can be difficult. Efficiency depends on your planning.

Depth and Breadth of its Capability

UIKit is a well thought out framework with pieces and parts that do almost everything. Without adding your own custom code to it, UIKit is the limit. The same is true with other frameworks.

Writing custom HTML/CSS means that you can do everything. It takes time, but the sky is your limit.

Up-to-date Technology

UIKit takes care of the HTML/CSS standards maintenance for you. The planning and pushing is done for you. Relax.

Writing custom HTML/CSS means that only you are responsible for making sure it continues to work properly with new browsers and devices. Your project must always be in development.

Included Features

UIKit comes with quite a few features and components that make popular patterns easy to build.

Custom HTML/CSS, on the other hand, is a blank slate.

Design Aesthetic

UIKit default design is industry standard not-ugly but not on-trend. It’s a one-size-fits all, which ends up looking a little baggy. However, it can be modified to suit nearly any need. It’s got potential.

While it may take time, the design possibilities are endless when custom coding your own visual system.

Popularity

UIKit is ideal for manufacturing basic — variations on a theme — websites in a short amount of time. For the majority of websites in existence today, the framework would fit the bill.

Custom HTML/CSS is ideal for custom projects such as highly creative works or innovative experiments. It also is perfect for creating a custom framework or design system, which is often a popular option for large business enterprises.

So what’s the verdict?

With so many front-end frameworks and other prefabricated web tools today, it might seem that custom responsive HTML/CSS has lost its value. That couldn’t be further from the truth. The comparison chart above demonstrates the key areas in which it trumps frameworks and UIKit in particular. Ease of use and efficiency are each dependent on factors that may be outside of your control, however in categories of capability, technology, design, and popularity, custom HTML/CSS is a clear winner.

To be clear, UIKit and other frameworks could be modified to include any custom capability needed. However, its out-of-the-box components and widgets are both limited and wasteful. Most projects will not need everything included in a framework and many projects could need capabilities not included. As long as your project is clearly defined and all needs are accounted for, custom HTML/CSS is a great solution for a zero-waste development cycle. In large web applications such as online retailers and other major companies and organizations, keeping a detailed and documented account of all web components and scripts is crucial. In that respect, custom HTML/CSS frameworks provide an advantage over generic frameworks.

In addition, custom HTML/CSS allows for the use of new and experimental web technologies. While the majority of websites wouldn’t have a need for anything more than a stable framework like UIKit, creatives and businesses with an interest in innovation appreciate the ability to implement a new technology or methodology without waiting for a framework update.

UIKit has a classy on-trend default style. However, I’ve been working in the design world long enough to know that there’s always an art director out there who wants the cutting-edge-near-impossible. Writing custom HTML/CSS allows for an easier transition between trends and styles. New components and scripts can be added as needed so that a project is able to stand the test of time.

From a management perspective, one of the major benefits of custom HTML/CSS is that it ensures that a development team is starting on the same page. As a group, naming conventions and site architecture can be decided upon ahead of time. There’s no need to learn an extensive list of class names or read documentation. Although, custom documentation will eventually need to be written.

While UIKit and other frameworks are still extremely useful in small business and personal website use cases to streamline quick and stable development, the fact is that frameworks are created and updated using custom HTML/CSS. Becoming proficient in the core technologies, semantics, and efficient architecture of custom HTML/CSS systems allows for more robust capabilities, use of the latest web technologies, unique design, and most importantly, innovation.

Citation: Portions of this article were originally written for DGMDE27 at Harvard Extension School. Check out the awesome classes you can take: https://www.extension.harvard.edu/