Getting Started

Learn how to make the most of the framework with step-by-step guides that walk you through its features, best practices, and customization options—helping you understand it thoroughly and use it with confidence.

Importing the Framework

As mentioned in the homepage, the quickest way to import the framework to your project is to include the CDN links to your boiler plate. Below is the sample boiler plate for your convenience:

HTML 


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://webdev.hpu.edu/css/hpu.min.css" rel="stylesheet" integrity="sha384-efToe+nnkr9YjvoiqS0oqGwQlwn3FIRc5Tsx1FDnb7swIIan4OoVjcwzw5fxJEIm" crossorigin="anonymous">
        <title>HPUCSS Demo</title>
    </head>

    <body>
        <!-- Your Website Contents Here... -->

        <script src="https://webdev.hpu.edu/js/hpu.min.js" integrity="sha384-RBeZDDVlK4JK+ub8Axl0Gr/skF5v+2NWrzLxctB5fT5bRn7fbEWipXyy9z2Qwp4O" crossorigin="anonymous"></script>
    </body>
</html>

Another way is to clone the framework's git repository from HPU ITS Gitlab:

bash 


git clone https://gitlabits.hpu.edu/calavazo/_hpucss-framework.git

This will import everything that makes the HPUCSS framework including the individual SCSS and JS file, with the packages that were used to develop and compile this framework.

For more cloning info, check out the README file by going to the repository itself.

Current Screen Size Indicator

Throughout the framework, an indicator is displayed to show the current screen size for the module being viewed. It appears as follows:

CURRENT SCREEN SIZE: xs sm md lg xl xxl

This indicator signifies that the module sample is responsive. Adjusting the browser window size or using the browser’s developer tools will reveal how the module layout and elements adapt to various screen dimensions. Exploring these changes can help you better understand the module’s responsive behavior in different viewing scenarios.

In other words, you should change the screen size of your browser to see the responsive behavior of a module sample.

Programmatic APIs

Every module in the framework works out of the box without requiring custom JS for its default behavior through data-hpu attribute and the module as its value, e.g. data-hpu="accordion". However, if adjusting a module behavior is desired, remove the data-hpu attribute and provide custom options through its Programmatic API, which is available as a constructor:

JS 


let selector = new HPU.{module}('#selector', {
    // Define optional options here...
});

Where module is one of HPUCSS Modules below:

Each Programmatic API provides methods that must be called to make the module function as intended. These methods let you control and manipulate the module’s behavior after it has been initialized. To define a method for a module, simply:

JS 


let selector = new HPU.{module}('#selector', {
    // Define optional options here...
});

// Manually call the method of a module to control the module's behavior:
selector.method();

Please refer to a specific module mentioned above to explore different methods.