Developping with Huro
Huro is a UI kit. It brings in all the possible elements you could need when building your web application. Unlike our previous templates, it mainly focuses on HTML and CSS and keeps JS as quiet as possible, only for presentation purposes. Therefore, Huro can be used very easily in a wide variety of project stacks, since what only matters is CSS and markup.
How Huro is built
Huro is built as a modular UI kit. You should only use what you need in your project.
At the first look, you might be terrified by the number of files inside Huro. This has been done for the sake of modularity. It also takes account of all the newest JS component / ES6 based technologies where every piece of UI is structured into small building blocks. All basic building blocks, like buttons, dropdowns, badges etc... are broken into separate files so you can choose what to import or not inside your project. Of course, there are some mandatory imports for the basic layout elements, but beside that, you can really customize your application.
It goes the same for all view and page examples. For example, there are a lot of list views inside Huro, and your likely not going to use them all in your project. Therefore, inside the list views SCSS files, you can simply comment or delete all the list view variations you are not going to use.
Bulma is fully integrated with Huro. This means that when you change the
$primary Huro color variable, this also applies to all native Bulma elements. While it wasn't the case before, this now happens happen on live reload. You won't have to run
gulp dev again to regenerate
bulma.css from the source with the newly changed color. The Bulma source gets regenerated each time you change a related Sass variable.
Native Dark Mode
Huro comes with a native Dark mode. This means that absolutely all components are prestyled for dark mode. You don't have to worry about it, when you turn it on, the colors change seamlessly. Dark mode styling is made through a global
.is-dark class added to the page
$primary color and the
$accent color. In Huro, the
$primary color is used as the main color for light mode, whereas the
$accent color is used as the main color for the dark mode.
How to use Huro
Huro is very easy to use, it is made to make copying and pasting easy regarding small building blocks and components, and layout pages. For dashboards, it's a bit different. We'll see how.
There are 2 main types of demos in Huro, layout demos and dashboard demos. Like all other components and elements, layout demos are grouped into similar types and share a same SCSS file. For example, List Views have their own file in
src/assets/scss/pages/lists/_list-view.scss. This group of page styles reside in that same file. As long as this file is in your SCSS imports, you can copy and paste all pages that belong to it in your own project. It's just about making sure that you import the correct SCSS files.
For Dashboards, it's a little bit different. Each Huro dashboard brings a part of uniqueness in it's layout, the shape of the cards that are used etc... Therefore, these dashboards shouldn't be used as copy and paste elements, but rather as starting point for your page. Dashboards are also grouped by interest. For instance, all banking dashboard styles reside in
Also, Huro provides several blank templates for you to start from, so you can easily start building pages with your favorite navbar / sidebar configuration.