Introduction
1.1. Initialization 1.2. How it works? 1.3. Templates
Classes
2.1. Class list 2.2. Custom classes
Custom elements
3.1. Onclick href 3.2. Toggle element 3.3. Slideshow 3.4. Searchbar 3.5. Slider 3.6. Float input 3.7. Close x 3.8. Loader
Custom features
4.1. Dark mode 4.2. Foreach 4.1. Dummy text
Customization
5.1. Custom colors 5.2. Custom variables 5.3. Alias class 5.4. Update delay
Playground
6. Try on page
Back to top

1. Introduction

PixelbiteCSS works by scanning HTML file and looks around for classes and replaces its class name into a stylesheet text.

1.1. Initialization

We will start by implementing meta viewport, CSS library and JS library into our file/project. 
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://pixelbite-css.github.io/pixelbite-css/style/pixelbite.css">
<script src="https://pixelbite-css.github.io/pixelbite-css/script/pixelbite.js"></script>
Our project should now look like this: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Example</title>
    <link rel="stylesheet" href="https://pixelbite-css.github.io/pixelbite-css/style/pixelbite.css">
</head>
<body>
<script src="https://pixelbite-css.github.io/pixelbite-css/script/pixelbite.js"></script>
</body>
</html>

1.2. How it works

Main Javascript scans for class names inside an element. If a class name matches with a class list, it will automatically add a specific value or stylesheet for that specific name.
Classes can be implemented by writing a class name (for more context, see class list) and add a value you would like to have for that element. 
<h3 class="bg-#ff0000">Hello world</h3>
This means, that the class bg-#ff0000 will have a red background color.

Hello world

You can use this for pretty much every class that is inside of a PixelbiteCSS library (for more context, see class list).

1.3. Templates

If you are looking for a quick look-up, how PixelbiteCSS works or if you are lazy to program a functional website. You can look up into our templates. Feel free to copy and use.
Gallery - demo
Blog - demo
Post - demo
Dashboard - demo
Login - demo
Search - demo
Cheatsheet - demo

2. Classes

Classes can be used simply by implementing a class into a HTML class tag, for example class="bg-#ff0000".
Syntax is [class_shortcut]-[params]-... 
<h3 class="border-2px-solid-#ff0000">Hello world</h3>

Hello world

2.1. Class list

Here you can see all the classes you can use.
Shortcut CSS Value

2.2. Custom classes

PixelbiteCSS is a framework with tons of custom classes. Most of them are predefined, so you don't need to create them, or use CSS file.
It also uses custom colors that can be changed (more on that later) 
<h3 class="c-primary">Primary</h3>
<h3 class="c-secondary">Secondary</h3>
<h3 class="c-success">Success</h3>
<h3 class="c-danger">Danger</h3>
<h3 class="c-warning">Warning</h3>
<h3 class="c-info">Info</h3>

Primary

Secondary

Success

Danger

Warning

Info

This site already changed primary and secondary color
Click to view-through CSS file here.

3. Custom elements

PixelbiteCSS use custom elements, which are staple of a first version and was a main appealing point for creating this framework.
Different elements have different syntax. Most features are still in experimental state, so please have in mind some minor bugs if not used correctly.

3.1. Onclick href

Onclick href is essentially a function that allows buttons to open pages and scroll to different articles on page.
Syntax is href('[url_or_pointer]') 
<button onclick="href('https://github.com/Pixelbite-CSS')">Open page my favorite page</button>
<button onclick="href('#onclick-href')">Scroll to my favorite article</button>

3.2. Toggle element

Toggle element is a function, that can show and hide multiple elements with same classname.
Syntax is toggleElement([class_name_of_elements_to_hide])
  • You can put which ever name you want, but some classnames already used in a file can cause damage to those elements. Please use unique class name. 
<button onclick="toggleElement('custom-toggle-1')">Toggle</button>
<h3 class="custom-toggle-1">I'm shown</h3>

I'm shown

Also, for purposes of having one or multiple elements hidden, there is a hidden class that hides elements on first page load. 
<button onclick="toggleElement('custom-toggle-2')">Toggle</button>
<h3 class="custom-toggle-2 hidden">I'm hidden</h3>
This function can be also used, to create a switch looking button. This can have multiple purposes. 
<button class="custom-toggle-3 bg-info" onclick="toggleElement('custom-toggle-3')">On</button>
<button class="custom-toggle-3 hidden bg-danger" onclick="toggleElement('custom-toggle-3')">Off</button>

3.3. Slideshow

Slideshow does what basic slideshows on the website looks like. This custom element needs to work elements inside with classname of slide. 
<div class="slideshow w-100% h-400px">
    <img class="slide" src="img1.png">
    <img class="slide" src="img2.png">
</div>
Images are from unsplash.com
Searchbar allows users to search and filter out fixed amount of elements, with a value from input/searchbar. 
<div class="searchbar">
    <input class="search" placeholder="Searching text"/>
    <div class="search-values">
        <div>Adam</div>
        <div>Michael</div>
        <div>Carel</div>
        <div>Steve</div>
    </div>
</div>
Adam
Michael
Carel
Steve

3.5. Slider

Slider is element that transform classic checkbox and radio into slider switch. The color can be customized by --info-color. 
<h3>Checkbox</h3>
<input class="slider" checked type="checkbox"/>
<input class="slider" type="checkbox"/>
<br>
<h3>Radio</h3>
<input class="slider" name="type1" checked type="radio"/>
<input class="slider" name="type1" type="radio"/>
<input class="slider" name="type1" type="radio"/>

Checkbox


Radio

3.6. Float input

Float input is input with a floating label, that will shrink and move up on focus. It is only cosmetic element. 
<div class="floatInput">
    <input id="input1" class="w-100% br-6px"/>
    <label for="input1">Label</label>
</div>

3.7. Close x

This close x is basically a button with cross inside it. 
<button class="close-x"></button>
This button can be combined with other classes to create a working popup. Example bellow 
<div class="toggle-popup w-100% bg-white100 br-6px ov-hidden">
    <div class="flexCenter flexMiddle p-48px-10px c-white0 fs-20px">
        Something went wrong
    </div>
    <div class="flexRow">
        <button class="w-50% buttonOutline fw-400 p-12px c-info b-0 btop-1px-solid-info br-0" onclick="toggleElement('toggle-popup')">
            Cancel
        </button>
        <button class="w-50% buttonOutline fw-400 p-12px c-info b-0 btop-1px-solid-info bleft-1px-solid-info br-0"onclick="toggleElement('toggle-popup')">
            Okay
        </button>
    </div>
    <button class="close-x" onclick="toggleElement('toggle-popup')"></button>
</div>
Something went wrong

3.8. Loader

Loaders loads first over everything. They essentially cover whole screen to hide elements loading in.
  • It is highly recommended to use. They are only used for loading page in, other instances can break the whole site. Always put them on the bottom of page.
In PixelbiteCSS there are two main loaders. loader-line and loader-icon.
For loader-line: 
<div class="loader loader-page flexCenter flexMiddle">
    <div class="loader-line"></div>
</div>
For loader-icon: 
<div class="loader loader-page flexCenter flexMiddle">
    <div class="loader-icon"></div>
</div>

4. Custom features

PixelbiteCSS has many features that are great and are just a really nice addition for every web developer and web designer.

4.1. Dark mode

Dark mode is essential for PixelbiteCSS. It is very easy to use with its syntax. You will also need to call a function changeThemeMode() to switch themes.
Syntax is dark:[class]-[params]-...
  • The dark: followed by a class needs to be after normal classes to work. 
<div class="bg-#ff0000 dark:bg-#0000ff p-24px">
    Hello world
</div>
Hello world

4.2. Foreach
Experimental

Foreach will add specific class to everything inside an element. Syntax is similar to dark mode, which is foreach: followed by class and its parameters.
Syntax is foreach:[class]-[params]-... 
<div class="flexColumn flexLeft g-12px foreach:c-#0000ff">
    <h3>Hello</h3>
    <h3>Hello</h3>
    <h3>Hello</h3>
</div>

Hello

Hello

Hello

4.3. Dummy text

Dummy text (or by its syntax loremIpsum) generates a latin text. It can be used for showcases or mockups.
Use syntax loremIpsum-[number_of_sentences]. 
<div class="loremIpsum-5"></div>

5. Customization

PixelbiteCSS was build to be user-friendly to customize. You can change colors, change root variables or add custom colors.
  • These features needs to be in <script> tag to work properly.
  • Or you can use them in onclick parameter.

5.1. Custom colors

Custom colors can be added by simple function. Colors are in HSL format, for easier use. In PixelbiteCSS, there are a already pre-made custom colors:
  • ['white', 0, '0%']
  • ['black', 0, '0%']
  • ['red', 0, '100%']
  • ['orange', 36, '100%']
  • ['yellow', 59, '100%']
  • ['greenyellow', 74, '100%']
  • ['green', 108, '100%']
  • ['teal', 154, '100%']
  • ['cyan', 182, '100%']
  • ['blue', 235, '100%']
  • ['purple', 275, '100%']
  • ['pink', 300, '100%']
Also custom colors can be added. For example addColorHsl('customColor', 112, 100) and use it by [class]-customColor[0-100].
Syntax is for import addColorHsl('[color_name]', [hue], [satuation])
Syntax is for classes [class]-[color_name][lightness_0-100]
  • Please, don't use "-" in custom name, it can destroy some elements.
  • Please, don't use numbers in custom name, last number is lightness and it needs to be between 0 and 100. 
<h3 class="c-customColor25">Hello world</h3>
<h3 class="c-customColor50">Hello world</h3>
<h3 class="c-customColor75">Hello world</h3>
...
<script>
    addColorHsl('customColor', 112, 100)
</script>

Hello world

Hello world

Hello world

5.2. Custom variables

Custom variables allows you to change :root variables to your own liking. It is the first thing that loads with the page. There are these possible variables that can be changed:
  • --font-family
  • --font-mono-family
  • --primary-color
  • --secondary-color
  • --success-color
  • --danger-color
  • --warning-color
  • --info-color
Syntax is changeVariable('[variable_pointer]', '[variable_value]') 
<h3 class="c-primary">Hello world</h3>
...
<script>
    changeVariable('--primary-color', '#FA2A55')
</script>

Hello world

5.3. Alias class

Alias classes are here, to chain multiple classes into one singular head class, that can be referenced anywhere in a file. You can create so-called modules with just one alias.
Syntax is addAliasClass('[alias_name]', '[string_with_classes]') 
<div class="customAlias">Hello world</div>
...
<script>
    addAliasClass('customAlias', 'flexCenter flexMiddle w-100% h-200px fw-900 fs-32px c-white100 dark:c-white10 bg-white0 dark:bg-white100')
</script>
Hello world

5.4. Update delay

Update delay is only a performance related function. Because PixelbiteCSS's main loop is constantly changing, it can develop and hardware slowdown issue. To reduce hardware slowdown, there is a function that can change delay between each loop.
  • Don't put very high numbers, the loop contains dark mode related stuff, but if you are not using it, there is nothing to worry about.
Syntax is changeClassUpdateDelay([ms]) 
<script>
    changeClassUpdateDelay(1200)
</script>

6. Interactive playground

Try writing your code bellow:
Scroll to up