Project structure

This section is about the Huro File structure.

Project Directory

huro/
├── src/
│   ├── assets/
│   │   ├── font/
│   │   ├── img/
│   │   ├── js/
│   │   ├── sass/
│   │   ├── scss/
│   │   │   ├── _overrides/
│   │   │   ├── abstracts/
│   │   │   ├── components/
│   │   │   ├── elements/
│   │   │   ├── layout/
│   │   │   ├── pages/
│   │   │   └── main.scss
│   │   └── vendor/
│   ├── data/
│   ├── layouts/
│   ├── pages/
│   └── partials/
├── gulpfile.js
├── package.json
└── pnpm-lock.yaml

Assets folder

huro/
├── src/
│   ├── assets/
│   │   ├── font/
│   │   ├── img/
│   │   ├── js/
│   │   ├── sass/
│   │   ├── scss/
│   │   │   ├── _overrides/
│   │   │   ├── abstracts/
│   │   │   ├── components/
│   │   │   ├── elements/
│   │   │   ├── layout/
│   │   │   ├── pages/
│   │   │   └── main.scss
│   │   └── vendor/

The main reason we are working with pnpm and gulp is that we want to keep our development process clean, as well as our dependencies management. This kind of setup highly increases the project's code maintainability and scalability. However, you'll be sometimes in a situation where you could need assets that are not served via pnpm or any package manager. That is the role of the vendor folder. You can add to it any external CSS, js, fonts or data that you will need to use in your project. However, always prefer the pnpm method when adding new assets. Use the assets folder only if you can't fetch your required dependency with pnpm.

Bulma folder

huro/
├── sass/
│   ├── sass/
│   └── bulma.sass

When you installed the project by doing pnpm install, you also installed Bulma 0.9.x (currently 0.9.3) as a project dependency. All Bulma framework Sass source files are there. You can customize them to fit your needs or leave them as they are. If you do so, you will get the standard Bulma version (identical to the CSS file you can find in the Bulma distribution folder in the official repository) when you build the project. We provided this option as numerous developers want to have control on this for code optimization purposes.

WARNING

Edit the Bulma source files only if you know what you are doing as any faulty customization may completely break the layout.

Layouts folder

huro/
├── src/
│   └── layouts/

All the HTML layouts resides in this folder. For a more concise code, Huro uses a flat file compiler named Panini, by Zurb. Panini makes it easy to break your layouts into several reusable components, preventing you to go through every page to make your changes. You can find more information about zurb/panini by visiting the official repository. Huro follows the panini pattern for the HTML file structure.

the layouts folder holds all the template layouts. It is mandatory to have at least one layout, and it should always be named default.html. Additional layouts can have the names you want, but don't forget the .html extension. A layout acts as container providing the same base for a set of similar pages.

Pages folder

huro/
├── src/
│   └── pages/

The pages folder holds all the template pages. Pages are focused on content. They are related to a layout and automatically appended to it by panini when the page is served. You will always find the same statement at the top of each page's code :

---
layout: default
title: This is the page title
---

The layout statement tells panini which layout to use to serve the page. The title element is a string that gets inserted as the page title when panini has finished assembling the page parts together.

Partials folder

huro/
├── src/
│   └── partials/

The partials folder holds all your HTML partials. Partials are chunks of code that you want to reuse as is across your application : it can be a button, a navbar, a content section or whatever you want. Note that you can create as many sub-folders as you want to organize your partials. You simply have to make sure that your partial names are unique. Partials are named like HTML files : navbar.html. When you want to call a partial in one of your layouts or pages use the following expression : {{> partial-name}}. You don't have to mention the path, even if it is nested in several sub-folders, panini will find it. Also note that you don't have to add the HTML extension in your partial call.

Images

huro/
├── src/
│   ├── assets/
│   │   └── img/

All the project images live in this folder. It can have as many sub-folders as you want. When you build the project, all these images are automatically transferred to the right location by Gulp. We will see that a bit later.

JS

huro/
├── src/
│   ├── assets/
│   │   ├── js/
│   │   │   ├── *.js
│   │   │   ├── functions.js
│   │   │   └── main.js

All of Huro's own javascript files live in this folder. Edit them to change thee template functionality.

SCSS

huro/
├── assets/
│   ├── scss/
│   │   ├── abstracts/
│   │   │   └── _*.scss
│   │   ├── components
│   │   │   └── _*.scss
│   │   ├── elements
│   │   │   └── _*.scss
│   │   ├── layout
│   │   │   └── _*.scss
│   │   ├── pages
│   │   │   └── _*.scss
│   │   └── main.scss

Huro relies on the powerful Sass features, letting you handle complex styles in a breeze. Huro relies on a modular SCSS structure. You need to import all the SCSS partials into your core file. This is how SCSS files are organized. Partial SCSS file names always start with an underscore like this: _button.scss . They act as chunks of code that you can import only if you need them. Of course some of them are mandatory for the project to work. For example, if you need to display buttons (which will likely be) in your project, you can import scss/elements/_button.scss to have access to the button element in your layout. Huro is a UI kit in which each SCSS file serves a different purpose:

• abstracts: holds all files related to SCSS variables, mixins, default global styles and other typography settings.
• components: holds all files related to Huro Components. Each component has its own file.
• elements: holds all files related to Huro Element. Each Element has its own file.
• layout: holds all basic and mandatory layout files. The project will break if you omit one of those files.
• pages: holds all the specific styles for each demo or group of demos.

/*! main.scss │ Huro │ CSS Ninja 2020-2021 */

/* ==========================================================================
SCSS Imports
========================================================================== */

@import "_overrides/initial-variables";
@import "../sass/sass/utilities/functions";
@import "_overrides/derived-variables";
@import "../sass/sass/utilities/animations";
@import "../sass/sass/utilities/mixins";
@import "../sass/sass/utilities/controls";

@import "../sass/sass/base/all";
@import "../sass/sass/elements/all";
@import "../sass/sass/form/all";
@import "../sass/sass/components/all";
@import "../sass/sass/grid/all";
@import "../sass/sass/layout/all";
@import "../sass/sass/extensions/all";

@import "abstracts/variables";
@import "abstracts/brands";
@import "abstracts/shadows";
@import "abstracts/typography";
@import "abstracts/animations";
@import "abstracts/helpers";

@import "layout/pageloader";
@import "layout/layout";
@import "layout/navbar";
@import "layout/sidebar";
@import "layout/sidebar-panel";
@import "layout/sidebar-mobile";
@import "layout/right-panel";
@import "layout/utilities";

@import "elements/buttons";
@import "elements/blocks";
@import "elements/cards";
@import "elements/content";
@import "elements/forms-general";
@import "elements/forms-combos";
@import "elements/forms-checkboxes";
@import "elements/forms-slider";
@import "elements/icons";
@import "elements/links";
@import "elements/lists";
@import "elements/tags";

@import "components/accordion";
@import "components/breadcrumbs";
@import "components/datepicker";
@import "components/dropdowns";
@import "components/editors";
@import "components/modals";
@import "components/message";
@import "components/media";
@import "components/charts";
@import "components/loader";
@import "components/toggles";
@import "components/video-player";
@import "components/placeholders";
@import "components/popovers";
@import "components/progress";
@import "components/theme-switch";
@import "components/avatar";
@import "components/snacks";
@import "components/tabs";
@import "components/table";
@import "components/datatable";
@import "components/toasts";
@import "components/tooltips";
@import "components/timeline";
@import "components/circle-chart";

@import "pages/demo/landing";
@import "pages/dashboards/personal";
@import "pages/dashboards/finance";
@import "pages/dashboards/banking";
@import "pages/dashboards/business";
@import "pages/dashboards/lifestyle";
@import "pages/dashboards/ecommerce";
@import "pages/dashboards/apps";
@import "pages/dashboards/hub";
@import "pages/lists/list-view";
@import "pages/lists/list-flex";
@import "pages/grids/grid-users";
@import "pages/grids/grid-cards";
@import "pages/grids/grid-tiles";
@import "pages/demo/demo";
@import "pages/projects/board";
@import "pages/projects/projects";
@import "pages/projects/project";
@import "pages/messaging/messaging";
@import "pages/messaging/messaging-webapp";
@import "pages/auth/auth";
@import "pages/profile/_user-profile";
@import "pages/generic/onboarding";
@import "pages/generic/search";
@import "pages/generic/subpages";
@import "pages/generic/forms";
@import "pages/generic/utility";
@import "pages/generic/widgets";
@import "pages/generic/widgets-lists";
@import "pages/generic/widgets-stats";
@import "pages/generic/wizard";
@import "pages/generic/inbox";

@import "layout/responsive";

@import "abstracts/dark";

$slick-font-path: "/assets/fonts/";
$slick-loader-path: "/assets/fonts/";

@import "../../../node_modules/slick-carousel/slick/slick.scss";
@import "../../../node_modules/slick-carousel/slick/slick-theme.scss";

Let's break those imports to understand what they're made off.

The first 2 groups of imports deal with the Bulma source imports that get compiled with the Huro CSS. Notice the 2 imports starting from the _overrides folder. Those are used to override some Bulma variables with Huro variables. This keeps everything in sync between Huro and Bulma.

The third group deals with the abstracts/ imports. Abstracts hold things like color related variables, helpers and typography styles. Those are global styles that are in the app scope.

The layout/ folder holds all the layout related files that Huro needs to structure its layout, containers, sidebars and navbars. Those imports are mandatory and should be present in all projects based on Huro.

The elements/ imports handle all the smallest building blocks that you need when you build a web application, like buttons, lists, cards etc.. In most of the cases, you'll need an important part of these like all the form elements that reside there.

The components/ imports handle more complex components, like tabs, avatars, icon boxes etc.. and all plugins used in Huro. You can definitely remove the ones that you don't want from the imports.

The pages/ folder holds all the pages related stylesheets. Each sub-folder represents a group of pages.

The last import handles the responsive styles that are used across the entire application. Please note that the specific responsive styles related to components and pages reside in their respective files.