Introduction

Here is my submission for Build with Linode Hackathon.

I came to know about this amazing Hackathon just 6 days before the end date. And I love Linode. I recently moved all my websites(mainly WordPress Websites) from shared hosting to Linode, and I was really surprised with the loading speed of my websites.

So there was no reason for me not to participate.

Retina UI

Retina UI is a modern responsive front-end framework for modern websites. It helps you create beautiful web interfaces in minutes.

You might ask that there are already so many CSS Frameworks like Bootstrap, TailwindCSS, and Bluma. So why create another CSS Framework? So let us get straight to that point.

Why Retina UI

There are a lot of really good CSS Frameworks present. I have used Bootstrap for many of my projects and I used to love it. And I also like other options like Bluma and TailwindCSS. But there are a few reasons I created my own framework.

Customization

I think Customization is the biggest issue with available CSS Frameworks.

A framework like Bootstrap offers a distinct look and because a lot of people use the same framework for their website, all of those websites end up looking the same and there is no uniqueness in them.

To solve this problem, all the famous frameworks let you customize the look and feel of their framework, like color and typography. Which is really good. But the main problem is, that customizing a framework requires you to learn SASS, SCSS, Git, and Github.

And it's a very long process. You first need to make a copy of the GitHub files, then you have to edit/create many files in the Github project. Which I find really time-consuming.

And a lot of people use CSS Framework because they are not even experienced with CSS. So how are they supposed to know SCSS or SASS?

So the question is, how did I solve this problem with Retina UI?

Retina UI uses CSS Variables instead of SASS/SCSS variables for customizing design of the framework. It contains a ton of CSS Variables which is really easy to customize.

And the process is really quick. Just edit the variables in your project file itself, save it, and you are done.

And you can do it at any point of time - At the beginning of development, in the middle of development, or post-development.

Modern Technology

Most of the frameworks rely on Float CSS Property for Grid System. Which in my opinion is bloat. It makes the CSS file big and your website slow.

Bluma uses flexbox instead of Float. Which I think is better, but I think CSS Grid is better than flexbox.

Retina UI uses CSS Grid for the Grid System and layout, which is the latest technology. It makes the CSS file really small. And smaller CSS File means Faster Website.

Compatibility

Retina UI comes in two versions.

1. Prefixed classes version - All the CSS classes are prefixed. eg - r-col-1, r-container.
2. Non-prefixed class version - without prefixed classes. eg- col-1, container.

Why Prefixed classes? If your project uses more than one CSS Framework, prefixing the the class will not break your website.

One example is WordPress Development Projects. I am a WordPress developer and I have been using this framework in my WordPress Themes and Plugins. And you never know which plugin or theme in a WordPress website might be using another CSS framework with the same CSS classes like col-1, col-full. And this might break the design of you website.

So prefixing the classes solves this problem.

If you are sure that your website will not use any other framework, then you can use the non-prefixed version.

Main Features

Here are the main features of Retina UI.

Responsive

Retina UI is a fully responsive framework. Your website is guaranteed to look and function great on any kind of display or device, from large TV monitors to the smallest mobile phones.

Open Source

Retina UI is free and will always be free. It is available for everyone on Github.

WordPress

Retina UI is fully compatible with WordPress. And it helps you create WordPress themes and plugins easily and fast.

Modularity

Easily remove the components, elements, or properties that you don't need.

Getting Started with Retina UI

There are two options to add the Retina UI CSS file to your project.

Use a CDN

https://cdn.jsdelivr.net/gh/vishal-ranjan-codes/retina-ui@main/dist/css/retina-ui.min.css

If you want to use the non-prefixed classes version of CSS use the below link.

https://cdn.jsdelivr.net/gh/vishal-ranjan-codes/retina-ui@main/dist/css/non-prifixed/retina-ui.min.css

Download from Github

You can get the latest Retina UI release as a .zip from GitHub:

Download

Go to Github Project

Future Plans

As I said earlier, I came to know about Hashnode Hackathon just 6 days before the end date, I have still not added every feature I have in my mind. So I have a long list of features that I will add in the near future.

I am still working on the Documentation. And it is my first priority.

After that, here are some cool features I am going to add -

Dark Mode

I am a big fan of dark mode. And I am just giving this feature some finishing touch. So it will be coming very soon.

Retina UI for WordPress

I have planned big things for WordPress.

One of the biggest issues I find with a WordPress website is that when you add more and more plugins to your website, the loading time keeps increasing as every plugin adds its own stylesheet.

And because all these different plugins are created by different developers, design inconsistency is also a big problem.

But imagine WordPress using just one CSS file (Retina UI CSS file in this case) for the Theme, Blogs, and all the popular WordPress Plugins like WooCommerce, BuddyPress, BBpress, LearnDash, LifterLMS, and others.

This will not only make the website load faster but also the design will be consistent throughout all these plugins' front-end.

I did something like this with my PixelPop WordPress Theme which I recently released for free on wordpress.org.

But I am planning to take it to the next level with a new Theme with Retina UI integration.

New Components

Here is a list of some exciting components I am planning to add in the Retina UI -

• Pricing Table
• Circular Progress
• Login/Registration Forms
• Customer Reviews
• Image Gallery
• and more.