wina-wilma

v0.0.2

Published

2 years ago

## Installation

Downloads

0High
0Medium
0Low

victorronsyn

WiNA Huisstijl

Installation

With NPM/Yarn

Install package from npm

$ yarn add wina-huisstijl

<head>
    ...
    <link rel="stylesheet" type="text/css" href="./node_modules/wina-wilma/css/index.css"/>
    <script src="./node_modules/wina-wilma/lib/index.js"></script>
    ...
</head>

From CDN

If you don't want to install any packages or are running a js-less application, you can include the files directly from the unpkg cdn.

<head>
    ...
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/browse/wina-wilma@<version>/css/index.css"/>
    <script src="https://unpkg.com/wina-wilma@<version>/lib/index.js"></script>
    ...
</head>

Minified

Minified versions of both CSS and JS files are also available.

<head>
    ...
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/wina-wilma@<version>/css/index.min.css"/>
    <script src="https://unpkg.com/wina-wilma@<version>/lib/index.min.js"></script>
    ...
</head>

Documentation

As this package is a custom variant of Bulma CSS, the most detailed documentation is available at https://bulma.io/documentation/.

Custom Components

Tabs

The Bulma tabs component expanded to also include the content. The structure is rigid and should not be changed, as this will break the JS.

<div class="tab-context">
    <div class="tabs is-centered">
        <ul>
            <li class="is-active"><a>Item 1</a></li>
            <li><a>Item 2</a></li>
            <li><a>Item 3</a></li>
            <li><a>Item 4</a></li>
        </ul>
    </div>
    <div class="tab-content">
        <div class="">Content 1</div>
        <div class="is-hidden">Content 2</div>
        <div class="is-hidden">Content 3</div>
        <div class="is-hidden">Content 4</div>
    </div>
</div>

Navbar

The Bulma navbar component expanded to include the WiNA-shield.

<nav class="navbar has-shadow" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
        <a class="shield-wrapper" href="../index.html">
            <img class="shield" src="../../assets/wina-logo.svg" width="112" height="28" />
        </a>

        <a
            role="button"
            class="navbar-burger"
            aria-label="menu"
            aria-expanded="false"
            data-target="navbarBasicExample"
        >
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
        </a>
    </div>

    <div class="navbar-menu">
        <div class="navbar-start">
            <a class="navbar-item" href="../index.html"> Home </a>

            <div class="navbar-item has-dropdown is-hoverable">
                <a class="navbar-link"> More </a>

                <div class="navbar-dropdown">
                    <a class="navbar-item"> About </a>
                    ...
                    <hr class="navbar-divider" />
                    <a class="navbar-item"> Report an issue </a>
                </div>
            </div>
        </div>

        <div class="navbar-end">
            <div class="navbar-item">
                ...
            </div>
        </div>
    </div>
</nav>

Accordion

An accordion component based on the Bulma standards. Includes support for the following variants:

is-primary
is-dark
is-link
is-success
is-warning
is-error

All accordions should be wrapped inside an accordion context. This context specifies whether multiple accordions inside the context are allowed to be open. This behaviour can be changed by setting data-allow-multiple to true or false.

<div class="accordion-context" data-allow-multiple="true">
    <article class="accordion block">
        <div class="accordion-header is-active">
            <p>Question 1</p>
            <div class="accordion-icon">
                <i class="fas fa-plus icon-closed"></i>
                <i class="fas fa-minus icon-open"></i>
            </div>
        </div>
        <div class="accordion-body">
            <div class="accordion-body-content">
                ...
            </div>
        </div>
    </article>
    <article class="accordion block is-primary">
        <div class="accordion-header is-active">
            <p>Question 2</p>
            <div class="accordion-icon">
                <i class="fas fa-plus icon-closed"></i>
                <i class="fas fa-minus icon-open"></i>
            </div>
        </div>
        <div class="accordion-body">
            <div class="accordion-body-content">
                ...
            </div>
        </div>
    </article>
</div>

Call To Action

A standard Call-to-action component. This component includes multiple variants:

Standard

<div class="cta">
    <div class="cta-text ">
        <span class="cta-title">Ready to dive in?</span>
        <Span class="cta-subtitle">Start your free trial today.</Span>
    </div>
    <div class="cta-buttons buttons">
        <a href="#"
           class="button is-primary">
            Get started
        </a>
        <a href="#"
           class="button ">
            Learn more
        </a>
    </div>
</div>

Secondary

<div class="cta is-secondary">
    <div class="cta-text">
        <span class="cta-title">Ready to dive in?</span>
        <Span class="cta-subtitle">Start your free trial today.</Span>
    </div>
    <span class="cta-content">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Aliquid consequatur hic minus nam nihil qui reiciendis, rem!
            Natus odit rem totam vitae. Ad blanditiis cupiditate dolor
            nemo provident, qui repellendus!
    </span>
    <div class="cta-buttons buttons">
        <a href="#"
           class="button is-primary">
            Get started
        </a>
        <a href="#"
           class="button ">
            Learn more
        </a>
    </div>
</div>

Colorless

<div class="cta no-color">
    <div class="cta-text">
        <span class="cta-title">Ready to dive in?</span>
        <Span class="cta-subtitle">Start your free trial today.</Span>
    </div>
    <span class="cta-content">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Aliquid consequatur hic minus nam nihil qui reiciendis, rem!
            Natus odit rem totam vitae. Ad blanditiis cupiditate dolor
            nemo provident, qui repellendus!
    </span>
    <div class="cta-buttons buttons">
        <a href="#"
           class="button is-primary">
            Get started
        </a>
        <a href="#"
           class="button ">
            Learn more
        </a>
    </div>
</div>

Centered vertical

<div class="cta is-centered">
    <div class="cta-text ">
        <span class="cta-title">Ready to dive in?</span>
        <Span class="cta-subtitle">Start your free trial today.</Span>
    </div>
    <span class="cta-content">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Aliquid consequatur hic minus nam nihil qui reiciendis, rem!
            Natus odit rem totam vitae. Ad blanditiis cupiditate dolor
            nemo provident, qui repellendus!
    </span>
    <div class="cta-buttons buttons">
        <a href="#"
           class="button is-primary">
            Get started
        </a>
        <a href="#"
           class="button ">
            Learn more
        </a>
    </div>
</div>

Custom pages

404

<div class="wi-error has-background-white">
    <div class="wi-error-content">
        <span class="wi-error-code">404</span>
        <div class="wi-error-text">
            <span class="wi-error-title">Page not found</span>
            <span class="wi-error-details">Please check the url in the address bar and try again.</span>
        </div>
    </div>
    <div class="wi-error-buttons buttons">
        <a href="#"
           class="button is-primary">
            Go back home
        </a>
        <a href="#"
           class="button ">
            Contact support
        </a>
    </div>
</div>