Features At a Glance
We tried to create a react.js admin theme that we would like to use ourselves so we listed our priorities. We would like to have a theme that is not over complicated to use, does the job well, contains must have components and looks really nice.
We put our attention to details and created features based on this principles.
No JQuery Dependency
JQuery is a great library and we are fans of it. We even built JQuery version of this theme but we beleive that it should not be in a React Project.
We did our research and found out that most developers thinks they should not coexist in a project.
jQuery is Imperative and React is declarative so they don‘t belong together.
As a web developer we enjoy to work on something looks nice. It is not an absolute necessity but it really motivates us that final product will look good for user point of view.
So we put a lot of work into colors, icons, composition and design harmony. Themed components and layouts with same design language.
We kept user experience principles always at the heart of the design process.
Using charts is a good way to visualize data but they often look ugly and breaks the rhythm of design.
We concentrated on a single chart library(react-chartjs) and tried to create charts that looks good with color, opacity, border and shadow.
Used certain plugins and created some to make charts even more useful and beautiful.
Layouts for the Job
Layouts are the real thing, they need to be accurate and right for the job. They should be functional for both user and developer.
We created lots of different layouts for different jobs.
Listing pages with view mode changing capabilities, shift select and select all functionality, application layouts with an additional menu, authentication and error layouts which has a different design than the other pages were our main focus. We also created details page with tabs that can hold many components.
We wanted to have a menu that looks good and does the job well.
Instead of good old single panel menus with accordion structure that looks over complicated, we created 2 panels and categorized pages accordingly.
The default menu auto hides sub panel when resolution is under some breakpoint to open some space. You may also hide menu completely or use only main panel open only.
Routing system is powered by react-router-dom which is not integrated as a shallow library and can be changed easily with an alternative.
With Bootstrap 4 and Reactstrap it is really easy to add custom responsive breakpoints, so we added xxs and xxl and built it for the theme.
Xxs breakpoint is for smaller screens that has a resolution lower than 420px. Xs works between 576px and 420px. Xxl breakpoint is for larger screens that has a resolution higher than 1440px. Xl works between 1200px and 1440px.
With this approach we were able to create better experiences for smaller and larger screens.
We have created dark and light color versions with five different main colors. Each theme also has a secondary color. You can easily change theme colors or create additional themes with a little help from Sass variables.
Structures & Layouts
We did our best to create layouts which is ideal for various needs that developers might have and create best experience for users.
They are clean and slick. They function well and look good at the same time.
These are the layouts:
- Menu Default
- Menu Subhidden
- Menu Hidden
- Image List
- Thumb List
- Data List
- Search Results
- Single Page Application
- Data List App Menu Hidden
We used most popular and well managed open source components with bootstrap components. Combined them into even more useful ones. Themed them with same design principles and created a design harmony between components and layouts.
From carousels to charts, switches to list we tried to provide components that we like to use on our development processes usually.
With the help of components and layouts, we created three different applications. They are a good way to get you started if you want to build something similar.
We barely wrote extra code for the applications, they are made from our components and react.js libraries mostly. You may also create applications that fit for your needs by using components and layouts.