Violet 1.2.0 Documentation

Welcome to the Violet documentation!

Contents

Notes About 1.2.0

With this release we had a large emphasis on design, as can be seen by the complete overhaul of the nav bar. Some of the changes we have made have made it hard to modify the design without changing Violet itself, we aim to resolve these issues with the coming releases.

Getting Started

Violet is a CSS framework designed for use by the Lexteam website.

With the coming releases Violet aims to become a more customisable framework that can be used by more than just the Lexteam website.

Installation

Distribution Install

To do a distribution install, you just need to add the Violet css file to your project:

https://www.lexteam.xyz/violet/1.2.0/violet.css
https://www.lexteam.xyz/violet/1.2.0/violet.min.css

As of Violet 1.2.0 Violet also bundles JavaScript files. NOTE: Violet depends on jquery!

https://www.lexteam.xyz/violet/1.2.0/violet.js https://www.lexteam.xyz/violet/1.2.0/violet.min.js

Bower Install

With Bower, you can use both the compiled source, or the source.

To use the compiled source, use the following files:

bower_components/violet/dist/violet.js or bower_components/violet/dist/violet.min.js

And for the CSS files:

bower_components/violet/dist/violet.css or bower_components/violet/dist/violet.min.css

And for the SCSS files you can import:

@import "bower_components/violet/src/scss/violet";

Source Install

To do a source install, you can use our CLI tool.

npm install lex-violet --global

Now you have the CLI tool installed, you can install Violet to any directory.

violet install

You can now proceed to import Violet to your code

@import "violet/violet";

When a new version of Violet is released, all you have to do is run:

npm update lex-violet and violet update

You can do the same for the JavaScript files by using violet install -t js

Components

Nav Bar

Using Violet, the nav bar is intended to be at the top of the document. NOTE: currently that is the only place we have tested it, however it should work in other places.


        <nav class="nav bar">
            <div class="header">
                <button type="button" class="toggle">
                    <i class="fa fa-bars" id="navbar-menu"></i>
                </button>
                <a href="/">
                    <img class="brand" src="/assets/img/logo_blue.png" height="75" />
                </a>
            </div>

            <ul id="nav-bar">
                <li class="enabled"><a href="/">Home</a></li>
                <li><a href="/blog">Blog</a></li>
                <li><a href="/software">Software</a></li>
                <li><a href="/gaming">Gaming</a></li>
            </ul>
        </nav>
    

Page Container

We recommend that you wrap all of your pages content in the page-container class. This way you will have access to a few exclusive classes, and you won't need to setup all the padding, etc yourself.


        <div class="page-container">
            <h1>Hi there.</h1>
        </div>
    

Titles

We have classes for titles and subtitles. You can see examples of these on this documentation.


        <h1 class="title centre">Violet 1.2.0 Documentation</h1>

        <p>
            Welcome to the Violet documentation!
        </p>

        <h2 class="subtitle">Contents</h2>
    

Similarly to how the nav bar is intended to be at the top of the document, the footer is intended to be at the end of the document. NOTE: by default the footer sticks to the bottom of the page.


        <footer class="footer">
            <ul>
                <li><a href="/about">About Us</a></li>
                <li><a href="/contact">Contact Us</a></li>
            </ul>
            <h3 class="brand">Lexteam</h3>
        </footer>