Developing 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.
Philosophy
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 Integration
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 pre-styled 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 <body> element. Dark mode styling for each element has been decentralized at the component / view level so you don't have to look for it everywhere. Dark mode is toggled on the body by a javascript function. In a real world implementation, the body would have to be rendered by the server with the proper class before being served to the client, based on the user selection. Regarding colors, Huro's dark mode toggles between the use of the $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.
Component Library
This documentation focuses on installing and understanding the project without diving into the actual UI elements. This is actually because Huro comes with a full component library with detailed code examples, including markup and javascript, so you can copy and paste easily. Check the component and the elements section of the Huro demo to get a grasp on all available elements and components.
Demos
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 src/assets/scss/pages/dashboards/_banking.scss. However, Huro provides several set's of widgets that you can copy and paste in your pages without having to worry about the styles encapsulation. This goes the same for javascript. All individual (sometimes groups of pages) have their own javascript file, to avoid huge and endless files where finding a function or understanding the code is almost impossible. The dashboards use as many pre-built components as possible but bring some specific pieces of UI based on the page needs.
Also, Huro provides several blank templates for you to start from, so you can easily start building pages with your favorite navbar / sidebar configuration.