About 
GitHub 
About 
GitHub 

Juice-UI oitsjustjose's Custom Themekit

General Theming:

Font Choices

Standard Font : Spartan
Monospace Font : Fira Code

Fira Code's Font Ligatures are enabled too!

const foo = () => { if(bar == 1 && bar != 2) { return bar } };

Coloring:

There are a few different colors used, but not many. If you want to re-compile the SCSS code, look at Libraries/css/themekit/_colors.scss.

Red
Blue
Green
Background
Foreground

Images

Images have a few different classes that correspond to their sizes:

Thumbnails | class='thumbnail':

Small | class='small':

Medium | class='medium':

Large | class='large':

Images (and most things actually!) can be blurred using class='blurred':

You can make them unblurable on hover by adding the class='unblurable':

Lastly, images can be rounded with class='rounded':

Buttons

Buttons have colors!

<button>Plain</button>
<button class="inverted">Inverted</button>
<button class="red">Red</button>
<button class="cyan">Cyan</button>
<button class="green">Green</button>

Buttons can also be smol

<button class="small">Plain</button>
<button class="small inverted">Inverted</button>
<button class="small red">Red</button>
<button class="small cyan">Cyan</button>
<button class="small green">Green</button>

Lastly, buttons can be just their outlines!

<button class="outlined">Plain</button>
<button class="outlined inverted">Inverted</button>
<button class="outlined red">Red</button>
<button class="outlined cyan">Cyan</button>
<button class="outlined green">Green</button>

Modals

Modals are pretty straight foward to implement:

<div id="testModal" class="modal">
    <div class="modal-content">
        <span class="close">
            <i class="fas fa-times"></i>
        </span>
        <h2 class="header">
            YouTube Embed Demo In A Modal
        </h2>
        <div class="embed">
            <iframe src="https://www.youtube.com/embed/5tjr7g5WFqc" frameborder="0"
                allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
            </iframe>
        </div>
    </div>
</div>

This modal won't be shown in any way though! The way to bind the object that shows this modal is by using the for-modal attribute, which should be assigned to the ID of the modal. So, in this example we would use for-modal="testModal", and we can add this to *any* element! For example:

Modal Triggering Text

Cards!

Cards are Responsive, and of course can be used to trigger modal popups!

Card 1

Here, have a very nice lorem picsum image courtesy of i.picsum.photos/id/1002/4312/2868.jpg

Card 2

Here, have a very nice lorem picsum image courtesy of i.picsum.photos/id/237/536/354.jpg

Card 3

Click on me!

By click on this card, you should see a Modal pop up as a result with an image!

Forms

Forms are also styled to match JuiceUI's design language! Here's how that works: