Violet 1.2.0 Documentation
Welcome to the Violet documentation!
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.
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.
To do a distribution install, you just need to add the Violet css file to your project:
With Bower, you can use both the compiled source, or the source.
To use the compiled source, use the following files:
And for the CSS files:
And for the SCSS files you can import:
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.
You can now proceed to import Violet to your code
When a new version of Violet is released, all you have to do is run:
npm update lex-violet and
violet install -t js
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>
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>
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>