This page contains all the classes you can use with Pixel for CSS and the functions you have available in JS.
As a reminder, please know that this framework is intended to be a base for web projects as opposed to a full and feature-rich foundation. Therefore, people interested in using Pixel are encouraged to give their own spin to it with their own stylesheet or simply using what's already available to quickly set up.
Barebone rows and columns are great tools for organizing your page!
Pixel's grid system is built using CSS grid.
Check out this page's layout to get an idea of how it looks!
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-8 col-sm-12">
<p>One section</p>
</div>
<div class="col-lg-6 col-md-4 col-sm-12">
<p>Another section</p>
</div>
</div>
</div>
Buttons come in a variety of colors to demonstrate different messages.
<button class="blue text-white medium">Info</button>
<button class="orange text-white medium">Warning</button>
<button class="yellow text-white medium">Important</button>
<button class="green text-white medium">Success</button>
<button class="red text-white medium">Alert</button>
<button class="dark text-white medium">Other</button>
A modal is a cool way to display information through a button click.
<div id="cover" class="modal-cover"></div>
<div id="modal" class="container modal">
<div class="row round-md align-center">
<div class="col-12">
<h3>How to import Pixel</h3>
<p>To use Pixel, you can either link the necessary files to your site like so:
<br>
Or you can download the source files (<a href="src/pixel.min.css" download="src/pixel.min.css">CSS</a>, <a href="src/pixel.min.js">JS</a>) using those respective links.<br>
<button onclick="pixel.modal('modal', 'cover')" class="orange text-white medium">Close</button>
</div>
</div>
</div>
To use Pixel, you can either link the necessary files to your site like so:
<head>
<link rel="stylesheet" type="text/css" href="https://github.com/Hircinus/pixel/blob/master/src/pixel.min.css">
</head>
<body>
...
<script src="https://github.com/Hircinus/pixel/blob/master/src/pixel.min.js"></script>
</body>
Or you can download the source files (CSS, JS) using those respective links.
Pixel's navbar comes out of the box with responsive design and an alternating menu dropdown button on small screen sizes. Check out the navbar of this page to see it in action!
<nav class="nav medium">
<button class="menuButton" onclick="navbarExtend()"><img id="menuButton" data-src="src/assets/menu_close.svg" src="src/assets/menu_burger.svg"></button>
<div id="navContent">
<a href="index.html" class="link"><img src="src/assets/pixel-logo.svg"></a>
<a href="index.html" class="link active">Home</a>
<div class="dropdown">
<a href="docs.html" class="link">Docs</a>
<div id="dropdownMenu" class="dropdown-content">
<a href="docs.html#CSS" class="link">CSS</a>
<a href="docs.html#JS" class="link">JS</a>
</div>
</div>
<a href="#" class="link disabled">About</a>
</div>
</nav>
You can use inbuilt cookie manipulation functions with pixel for various uses:
pixel.addCookie(cname, value);
pixel.getCookie(cname);
pixel.editCookie(cname, newValue);
Note: cname and value cannot contain separators or US-ASCII control characters.
Site created by Jacob Alfahad using the Pixel framework, 2020.
Current version: v0.2. This website and its framework, Pixel, are licensed under EPL-2.0.