Docs

Getting Started

Installing Polykit via CSS

Add the following line of code in your <head>.

<link rel="stylesheet" href="https://polykit.xyz/app/css/polykit-v0-3.css" type="text/css">

Customizing the SCSS

Folders & Files Structure


/.github
/app
    |_______ › /css
                |_______ › polykit-v0-1.css
    |_______ › /scss
                |_______ › /01-subatomics
                            |_______ › _branding.scss
                            |_______ › _colors.scss
                            |_______ › _general.scss
                            |_______ › _grid.scss
                            |_______ › _modes.scss
                            |_______ › _reset.scss
                            |_______ › _typography.scss
                |_______ › /02-atoms
                            |_______ › _buttons.scss
                            |_______ › _code.scss
                            |_______ › _containers.scss
                            |_______ › _lists.scss
                            |_______ › _nav.scss
                            |_______ › _separators.scss
                            |_______ › _text-styles.scss
                |_______ › /03-molecules
                            |_______ › _nav.scss
                |_______ › /04-organisms
                            |_______ › _header.scss
                |_______ › /05-templates
                |_______ › /06-pages
                            |_______ › _site.scss
                |_______ › polykit-v01.scss
/demo
    |_______ › /polyfen
    |_______ › /mfw
/imgs
/node_modules
/theme
gulpfile.js
index.php
readme.md

Subatomics

Branding SCSS

Grid SCSS

All the dimensions of visual components —as well as the space between them— are defined around the $grid-unit-size.

The base value of $grid-unit-size is 8px.

The preferred measurement unit for font-sizes, margins, and paddings is REM.

The base value of $rem-font-size —defined as $grid-unit-size * 2— is 16px.

Typography SCSS

Font scale: SHEET_PLKT_Font-Scale

Colors SCSS

For maximum control and precision of the color schemes all colors are defined with the HSL color system in the code.

Color scheme breakdown: SHEET_PLKT_Color-Scheme

Atoms

Buttons

Scss Figma

Hierarchy

cta-button

(primary-button)

secondary-button

<button>Download Now</button>
<button class="secondary-button">Download Now</button>
<button class="cta-button>Download Now</button>

button, .button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 240px;
    max-width: 100%;
    margin: 1rem auto;
    padding: 1rem 1.4rem;
    border: none;
    border-radius: 900px;
    background-color: $accent-color;
    color: hsl(0, 0%, 100%);
    letter-spacing: 0.5px;
    text-decoration: none;
    cursor: pointer;
    transition: 0s;
}
.secondary-button {
    border: 3px solid $accent-color;
    background-color: $accent-color-900;
    background-image: none !important;
}

.cta-button {
    box-shadow: 0 0 4px $accent-color;
    animation: gradient 7s infinite;
    background-image: linear-gradient(
                      45deg,
                      $accent-color-gradient-start,
                      $accent-color-gradient-end);
    background-size: 200% 200%;
}

Size

small-button

regular-button

large-button

<button class="button small-button">Download Now</button>
<button class="button">Download Now</button>
<button class="button large-button">Download Now</button>

.small-button {
    height: 35px;
    width: 180px;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* .regular-button has the default styles of button elements */

large-button {
    width: 260px;
    padding: 1.25rem 1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

Icons

left-icon

right-icon

right-left-icon

<button data-button-icon="phone">Download Now</button>
<button data-button-arrow>Download Now</button>
<button data-button-arrow-up>Download Now</button>

[data-button-icon]::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-right: 8px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center center;
}

[data-button-icon="phone"]::before {
    background-image: url(../../imgs/icons/phone-call.svg);
    filter:none;
    margin-block: -8px;
}

[data-button-arrow]::after {
    content: '';
    background-image: url(/imgs/icons/arrow-right-fill.svg);
    background-repeat: no-repeat;
    display: inline-block;
    opacity: .8;
    height: 10px;
    width: 18px;
    margin-left: 6px;
}

@keyframes moveArrow {
    0% {
        transform: translateX(0);
    }
    70% {
        transform: translateX(10px);
    }
    100% {
        transform: translateX(10px);
    }
}

[data-button-arrow-up]::before,
[data-button-arrow-up]::after {
    content: url(/imgs/icons/arrow-up-fill.svg);
    display: inline-block;
    opacity: .8;
    animation: moveArrow-up 1s ease-out infinite;
    height: 16px;
    width: 9px;
}

[data-button-arrow-up]::before {
    margin-right: 10px;
}

[data-button-arrow-up]::after {
    margin-left: 10px;
}

@keyframes moveArrow-up {
    0% {
        transform: translatey(0px);
    }
    70% {
        transform: translatey(-5px);
    }
    100% {
        transform: translatey(-5px);
    }
}