Getting started with 89elements and how to use it as a web design tool?

Getting started with 89elements UI kit and page builder

89elements is a collection of the most commonly used web design elements, sections, and layouts.

It started from just 89 elements and grow to many more. You can define the elements as a UI kit, HTML template, or page builder. They are free to use and you are free to add them into your workflow however you see fit.

Few things about the elements:

All elements are designed and styled mobile-first and fully responsive on all mobile devices.

Each element is a separate SCSS file that can be imported separately. All settings and options are controlled by a variables .scss file that is called _settings.scss

You can choose between HTML markup and React.js components when using the elements.

The elements use the Bootstrap 4 grid system, they don’t load the whole Bootstrap 4 framework, only the styles for the grid. Why the Bootstrap grid? Because everyone knows it, and the main intention of 89elements is to be easy to use and customize.

Why it exists

Its existence is born from the necessity of a library of commonly used web elements that are not just plain ugly. Also, with more manual code/markup focused page builder, that can very easily be converted to an actual website, landing page, or web page.

The main idea for 89elements is to:

  1. Get you inspired;
  2. Pick a project foundation: fonts, colors, etc.
  3. Create a prototype, fast;
  4. Go from prototype to working web page even faster;

How to use the 89elements UI library of commonly used web elements

How to use it? Download the starter “blank” page, that has all the scripts & styles loaded and you just paste the markup for the elements. You probably understand all this if know basic HTML and CSS.

01. Web design inspiration

When planing your future web project, it is a good idea to browse through a list of websites or competitors websites to see what are they doing and give you some ideas for your website.

Similarly, when you start designing your web project is always handy to have a library of commonly used web UI elements sorted by categories.

Web elements: typography, buttons, forms, navigation, features, icons, alerts, page title, portfolio, sliders, contact, header, team, testimonials, data, utility, blog, e-commerce, pricing, call to action
All categories of UI elements available on 89elements.com

Here 89elements come in, you can select by category to preview a list of web elements and layouts.

Then you can simply copy the markup and start building a web page.

Most of the elements allow, to quickly switch between a few pre-defined styles: dark, light, gray, and background. In other words, the quick preview of the element in different styles, helps you visually estimate if the UI element can fit into your project design requirements. Likewise, this can serve as an inspiration to style some sections of your website with similar elements, differently.

Preview with tabs multiple styles of every element from the HTML template
Each elements has tabs with multiple preview styles.

02. Creating projects – website foundation

89elements allows you to create a project, where you can save the settings and keep a record of multiple style combinations.

In a project, you can set basic styles like primary font & secondary font, font size, the roundness of the elements, and accent color. Just those few settings changed, will make dramatic changes to the style and the look of all UI elements – try it out and see for yourself.

Change the styles globally on all elements with project settings.
Change the styles globally on all elements, with project settings.

Project settings are kept low and simple intentionally to not overwhelm the user with a ton of settings.

All fonts available are from Google fonts and are free to use.

Currently in development is a download customizer and adding separate advanced settings panel with a lot more options and settings.

All settings and variables are stored in _settings.scss file and each element styles are stored in separated .scss file. This allows you to import only the elements that you will use and not load the whole library.

Currently the SCSS files are not available in the download folder.

When starting a new web design project, I usually start by creating a project from 89elements, this allows me to get the foundations of the project right.

After that, I go to the typography category, try few font combos. If the fonts look good, then go to the features category to preview how it looks on real elements – more on this read about in the prototype guide bellow.

03. Create website prototype fast

How would one start to design a brand new website? Go by the spec sheet for your client or your todo list and start drawing elements and layouts on paper? Use some app that creates ugly drawings and call them wireframes? Or use some page builder that has everything put behind a paywall except putting an image on the screen?

Everyone has their own way, so I can tell you my way of creating a website, its aways start with the font/s. The typography usually makes 75% – 85% of a web page content and is something that either breaks or makes the website.

89elements makes it super easy to test font combinations and preview the typography across multiple elements, layouts, and styles.

Here is a guide on how to use 89elements to start a new website project:

  1. Create a new project from 89elements app, this will allow you to change, globally, most important typographic settings of all elements;
  2. Then go to the Typography category page. Here you can preview all the headings, paragraphs, links and other typography elements while you changing fonts;
  3. When you decide on a font or a font combo, switch to the Features category of elements. Here you can see how that font or font combo works with real website layouts and elements. This is usually where the final decision about what fonts to use is made.
  4. Now with the project settings applied you can preview all elements styled with those settings. After that, just copy the markup of the web layouts that you want to use and paste it in your project;
  5. Then start adding your content, and there you have it a beautiful prototype.

04. Go from prototype to website

How to go from prototype to actual production website fast? From your previous step, simply start adding your content to the web elements and modify their styles if needs to.

After that only import the elements that you will use on your website via the main.scss file. Together with your style changes compile and minify the SCSS files and you are good to go.

Currently, the SCSS files are not available and the download customizer is still in development.

If you use numerous other website prototype or wireframe tools, you will come to the realization that you waste a lot of time with those tools, that could have been put on your actual web design.

Compare the time saving to using a library like 89elements, you just not only getting the UI elements but, you are getting the actual HTML and CSS markup.

Anyway, there will always be cases where you need some specific and very customized designs that you need to plan and draw it first. But for 95% of the other web projects 89elements library is a real time saver.


So there you have it, a great free tool that you can add to your web design belt. I hope you like it, share it with your friends and colleagues. Leave feedback if you find something wrong or have something to say.