Stylecraft

Intro

This is a pure CSS framework. Depending on your use case you're going to need to use your Javascript framework of choice to manipulate class names in DOM to get the desired effects.

Installation

npm install stylecraft --save

Later in your project:

import "stylecraft/dist/stylecraft.css"

Mode

Use Javascript to add/remove .sc-dark class to/from document body in order to toggle between dark/light modes.

Change

Grid system

Stylecraft uses a classic grid system.

Default: .sc-col-xs-1 to .sc-col-xs-12 and .sc-col-xs-offset-1 to .sc-col-xs-offset-11

min-width: 600px: .sc-col-sm-1 to .sc-col-sm-12 and .sc-col-sm-offset-1 to .sc-col-sm-offset-11

min-width: 840px: .sc-col-md-1 to .sc-col-md-12 and .sc-col-md-offset-1 to .sc-col-md-offset-11

min-width: 1280px: .sc-col-lg-1 to .sc-col-lg-12 and .sc-col-lg-offset-1 to .sc-col-lg-offset-11

Also, adding .sc-reverse to .sc-row reverses the direction.

Example:

Code:

<div class="sc-row"> <div class="sc-col-xs-12 item">12</div> <div class="sc-col-xs-1 item">1</div> <div class="sc-col-xs-11 item">11</div> <div class="sc-col-xs-2 item">2</div> <div class="sc-col-xs-10 item">10</div> <div class="sc-col-xs-3 item">3</div> <div class="sc-col-xs-9 item">9</div> <div class="sc-col-xs-4 item">4</div> <div class="sc-col-xs-8 item">8</div> <div class="sc-col-xs-5 item">5</div> <div class="sc-col-xs-7 item">7</div> <div class="sc-col-xs-6 item">6</div> <div class="sc-col-xs-6 item">6</div> </div>

Example:

Code:

<div class="sc-row"> <div class="sc-col-xs-offset-11 sc-col-xs-1 item">1</div> <div class="sc-col-xs-offset-10 sc-col-xs-2 item">2</div> <div class="sc-col-xs-offset-9 sc-col-xs-3 item">3</div> <div class="sc-col-xs-offset-8 sc-col-xs-4 item">4</div> <div class="sc-col-xs-offset-7 sc-col-xs-5 item">5</div> <div class="sc-col-xs-offset-6 sc-col-xs-6 item">6</div> <div class="sc-col-xs-offset-5 sc-col-xs-7 item">7</div> <div class="sc-col-xs-offset-4 sc-col-xs-8 item">8</div> <div class="sc-col-xs-offset-3 sc-col-xs-9 item">9</div> <div class="sc-col-xs-offset-2 sc-col-xs-10 item">10</div> <div class="sc-col-xs-offset-1 sc-col-xs-11 item">11</div> </div>

Grid

Grid classes are prefixed with .sc-grid- and are available from .sc-grid-1 to .sc-grid-12

2 columns:

Code:

<div class="sc-grid-2"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> <div class="item">Item 6</div> <div class="item">Item 7</div> <div class="item">Item 8</div> <div class="item">Item 9</div> <div class="item">Item 10</div> <div class="item">Item 11</div> <div class="item">Item 12</div> </div>

3 columns:

Code:

<div class="sc-grid-3"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> <div class="item">Item 6</div> <div class="item">Item 7</div> <div class="item">Item 8</div> <div class="item">Item 9</div> <div class="item">Item 10</div> <div class="item">Item 11</div> <div class="item">Item 12</div> </div>

6 columns:

Code:

<div class="sc-grid-6"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> <div class="item">Item 6</div> <div class="item">Item 7</div> <div class="item">Item 8</div> <div class="item">Item 9</div> <div class="item">Item 10</div> <div class="item">Item 11</div> <div class="item">Item 12</div> </div>

Flex

There are four shortcut classes to flex display: .sc-flex-r, .sc-flex-c, .sc-flex-rr and .sc-flex-cr

Row:

.sc-flex-r

Code:

<div class="sc-flex-r"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>

Column:

.sc-flex-c

Code:

<div class="sc-flex-c"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>

Reverse row:

.sc-flex-rr

Code:

<div class="sc-flex-rr"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>

Reverse column:

.sc-flex-cr

Code:

<div class="sc-flex-cr"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>

Form

Form elements don't require Javascript.

Radio

Radio 1

Radio 2

Radio 3 disabled

Code:

<form class="sc-form"> <div class="sc-form-group sc-grid-3"> <div class="sc-form-radio"> <input type="radio" name="my-radio" id="radio-1" checked /> <label for="radio-1"> <i class="sc-icon-radio"></i> <span>Radio 1</span> </label> </div> <div class="sc-form-radio"> <input type="radio" name="my-radio" id="radio-2" /> <label for="radio-2"> <i class="sc-icon-radio"></i> <span>Radio 2</span> </label> </div> <div class="sc-form-radio"> <input type="radio" name="my-radio" id="radio-3" disabled /> <label for="radio-3"> <i class="sc-icon-radio"></i> <span>Radio 3 disabled</span> </label> </div> </div> </form>

Checkbox

Checkbox 1

Checkbox 2

Checkbox 3 disabled

Code:

<form class="sc-form"> <div class="sc-form-group sc-grid-3"> <div class="sc-form-checkbox"> <input type="checkbox" name="my-checkbox" id="checkbox-1" checked /> <label for="checkbox-1"> <i class="sc-icon-checkbox"></i> <span>Checkbox 1</span> </label> </div> <div class="sc-form-checkbox"> <input type="checkbox" name="my-checkbox" id="checkbox-2" /> <label for="checkbox-2"> <i class="sc-icon-checkbox"></i> <span>Checkbox 2</span> </label> </div> <div class="sc-form-checkbox"> <input type="checkbox" name="my-checkbox" id="checkbox-3" disabled /> <label for="checkbox-3"> <i class="sc-icon-checkbox"></i> <span>Checkbox 3 disabled</span> </label> </div> </div> </form>

Text field

Basic

Text field with basic label

Text field with basic label disabled

Code:

<form class="sc-form"> <div class="sc-form-group sc-grid-2"> <div class="sc-form-text"> <input type="text" name="my-text-1" id="text-1" /> <label for="text-1">Text field with basic label</label> </div> <div class="sc-form-text"> <input type="text" name="my-text-2" id="text-2" disabled /> <label for="text-2">Text field with basic label disabled</label> </div> </div> </form>

With label

Text field with stylish label

Text field with stylish label disabled

Code:

<form class="sc-form"> <div class="sc-form-group sc-grid-2"> <div class="sc-form-text sc-has-label"> <input type="text" name="my-text-3" id="text-3" /> <label for="text-3">Text field with stylish label</label> </div> <div class="sc-form-text sc-has-label"> <input type="text" name="my-text-4" id="text-4" disabled /> <label for="text-4">Text field with stylish label disabled</label> </div> </div> </form>

With icon

Code:

<form class="sc-form"> <div class="sc-form-group sc-grid-2"> <div class="sc-form-text sc-has-icon"> <input type="text" name="my-text-5" id="text-5" /> <label for="text-5"> <i class="sc-icon-search"></i> </label> </div> <div class="sc-form-text sc-has-icon"> <input type="text" name="my-text-6" id="text-6" disabled /> <label for="text-6"> <i class="sc-icon-search"></i> </label> </div> </div> </form>

Textarea

Basic

Text field with basic label

Text field with basic label disabled

Code:

<form class="sc-form"> <div class="sc-form-group sc-grid-2"> <div class="sc-form-textarea"> <textarea name="my-textarea-1" id="textarea-1"></textarea> <label for="textarea-1">Text field with basic label</label> </div> <div class="sc-form-textarea"> <textarea name="my-textarea-2" id="textarea-2" disabled></textarea> <label for="textarea-2">Text field with basic label disabled</label> </div> </div> </form>

With label

Text field with stylish label

Text field with stylish label

Code:

<form class="sc-form"> <div class="sc-form-group sc-grid-2"> <div class="sc-form-textarea sc-has-label"> <textarea name="my-textarea-3" id="textarea-3"></textarea> <label for="textarea-3">Text field with stylish label</label> </div> <div class="sc-form-textarea sc-has-label"> <textarea name="my-textarea-4" id="textarea-4" disabled></textarea> <label for="textarea-4">Text field with stylish label</label> </div> </div> </form>

With icon

Code:

<form class="sc-form"> <div class="sc-form-group sc-grid-2"> <div class="sc-form-textarea sc-has-icon"> <textarea name="my-textarea-5" id="textarea-5"></textarea> <label for="textarea-5"> <i class="sc-icon-search"></i> </label> </div> <div class="sc-form-textarea sc-has-icon"> <textarea name="my-textarea-6" id="textarea-6" disabled></textarea> <label for="textarea-6"> <i class="sc-icon-search"></i> </label> </div> </div> </form>

Select

1 2 3

1 2 3

Code:

<form class="sc-form"> <div class="sc-form-group sc-grid-2"> <div class="sc-form-select"> <select name="my-select-1"> <option value="">1</option> <option value="">2</option> <option value="">3</option> </select> </div> <div class="sc-form-select"> <select name="my-select-2" disabled> <option value="">1</option> <option value="">2</option> <option value="">3</option> </select> </div> </div> </form>

Range

Range with label

Range with label disabled

Code:

<form class="sc-form"> <div class="sc-form-group sc-grid-2"> <div class="sc-form-range"> <input type="range" min="1" max="100" step="1" name="my-range-1" id="range-1" /> <label for="range-1">Range with label</label> </div> <div class="sc-form-range"> <input type="range" min="1" max="100" step="1" name="my-range-2" id="range-2" disabled /> <label for="range-2">Range with label disabled</label> </div> </div> </form>

Button

Button sizes

Three sizes are available for buttons: .sc-sm, .sc-md and .sc-lg. Combine them together with .sc-stretched and icons to get different buttons.

Small Button

Medium Button

Large Button

Code:

<form class="sc-form"> <div class="sc-form-group sc-grid-1"> <div class="sc-form-button sc-sm"> <button type="button">Small Button</button> </div> <div class="sc-form-button sc-md"> <button type="button">Medium Button</button> </div> <div class="sc-form-button sc-lg"> <button type="button">Large Button</button> </div> </div> </form>

Basic

Button

Button disabled

Code:

<form class="sc-form"> <div class="sc-form-group sc-grid-2"> <div class="sc-form-button sc-md"> <button type="button">Button</button> </div> <div class="sc-form-button sc-md"> <button type="button" disabled>Button disabled</button> </div> </div> </form>

Basic with icon

Button with icon

Button with icon disabled

Code:

<form class="sc-form"> <div class="sc-form-group sc-grid-2"> <div class="sc-form-button sc-md"> <button type="button"> <i class="sc-icon-search"></i> <span>Button with icon</span> </button> </div> <div class="sc-form-button sc-md"> <button type="button" disabled> <i class="sc-icon-search"></i> <span>Button with icon disabled</span> </button> </div> </div> </form>

Stretched

Stretched button

Stretched button disabled

Code:

<form class="sc-form"> <div class="sc-form-group sc-grid-2"> <div class="sc-form-button sc-md sc-stretched"> <button type="button">Stretched button</button> </div> <div class="sc-form-button sc-md sc-stretched"> <button type="button" disabled>Stretched button disabled</button> </div> </div> </form>

Stretched with icon

Stretched button with icon

Stretched button with icon disabled

Code:

<form class="sc-form"> <div class="sc-form-group sc-grid-2"> <div class="sc-form-button sc-md sc-stretched"> <button type="button"> <i class="sc-icon-search"></i> <span>Stretched button with icon</span> </button> </div> <div class="sc-form-button sc-md sc-stretched"> <button type="button" disabled> <i class="sc-icon-search"></i> <span>Stretched button with icon disabled</span> </button> </div> </div> </form>

Table

Add .sc-table class to table tags to style them.

Orci varius natoque penatibus et magnis dis parturient montes. Suspendisse gravida turpis sed tempor cursus. Donec nec ultrices felis.

Name	Value
Lorem	Dorem
Ipsum	Ripsum
Dolor	Solar
Sit	Neva
Amet	Nani

Code:

<table class="sc-table"> <caption> Orci varius natoque penatibus et magnis dis parturient montes. Suspendisse gravida turpis sed tempor cursus. Donec nec ultrices felis. </caption> <thead> <tr> <th>Name</th> <th>Value</th> </tr> </thead> <tbody> <tr> <td>Lorem</td> <td>Dorem</td> </tr> <tr> <td>Ipsum</td> <td>Ripsum</td> </tr> <tr> <td>Dolor</td> <td>Solar</td> </tr> <tr> <td>Sit</td> <td>Neva</td> </tr> <tr> <td>Amet</td> <td>Nani</td> </tr> </tbody> </table>

Card

You can use .sc-shadowed and .sc-borderless classes to get additional card variations.

Normal

Lorem ipsum

Suspendisse gravida turpis sed tempor cursus. Donec nec ultrices felis. Orci varius natoque penatibus et magnis dis parturient montes.

Code:

<div class="sc-card"> <header class="sc-card-header"> <h3>Lorem ipsum</h3> </header> <div class="sc-card-body"> <p> Suspendisse gravida turpis sed tempor cursus. Donec nec ultrices felis. Orci varius natoque penatibus et magnis dis parturient montes. </p> </div> <footer class="sc-card-footer"> <div class="sc-grid-2"> <div class="sc-form-button sc-md"> <button type="button"> <i class="sc-icon-search"></i> <span>Button</span> </button> </div> <div class="sc-form-button sc-md sc-flex-rr"> <button type="button" disabled> <i class="sc-icon-search"></i> <span>Button disabled</span> </button> </div> </div> </footer> </div>

Borderless

Lorem ipsum

Suspendisse gravida turpis sed tempor cursus. Donec nec ultrices felis. Orci varius natoque penatibus et magnis dis parturient montes.

Code:

<div class="sc-card sc-borderless"> <header class="sc-card-header"> <h3>Lorem ipsum</h3> </header> <div class="sc-card-body"> <p> Suspendisse gravida turpis sed tempor cursus. Donec nec ultrices felis. Orci varius natoque penatibus et magnis dis parturient montes. </p> </div> <footer class="sc-card-footer"> <div class="sc-grid-2"> <div class="sc-form-button sc-md"> <button type="button"> <i class="sc-icon-search"></i> <span>Button</span> </button> </div> <div class="sc-form-button sc-md sc-flex-rr"> <button type="button" disabled> <i class="sc-icon-search"></i> <span>Button disabled</span> </button> </div> </div> </footer> </div>

Shadowed

Lorem ipsum

Suspendisse gravida turpis sed tempor cursus. Donec nec ultrices felis. Orci varius natoque penatibus et magnis dis parturient montes.

Code:

<div class="sc-card sc-shadowed"> <header class="sc-card-header"> <h3>Lorem ipsum</h3> </header> <div class="sc-card-body"> <p> Suspendisse gravida turpis sed tempor cursus. Donec nec ultrices felis. Orci varius natoque penatibus et magnis dis parturient montes. </p> </div> <footer class="sc-card-footer"> <div class="sc-grid-2"> <div class="sc-form-button sc-md"> <button type="button"> <i class="sc-icon-search"></i> <span>Button</span> </button> </div> <div class="sc-form-button sc-md sc-flex-rr"> <button type="button" disabled> <i class="sc-icon-search"></i> <span>Button disabled</span> </button> </div> </div> </footer> </div>

Slide

Use Javascript to add/remove .sc-is-active to/from .sc-slide in order to show/hide slides.

Use .sc-slide-left instead of .sc-slide-right to open slides from the right side.

Open

Code:

<i class="sc-icon-menu sc-slide-open sc-hover sc-slide-right"></i> <div class="sc-slide sc-slide-right"> <header class="sc-slide-header"> <h3>Lorem ipsum</h3> <i class="sc-icon-close sc-slide-close sc-hover"></i> </header> <div class="sc-slide-body"> <p> Suspendisse gravida turpis sed tempor cursus. Donec nec ultrices felis. Orci varius natoque penatibus et magnis dis parturient montes. </p> </div> <footer class="sc-slide-footer"> <div class="sc-grid-2"> <div class="sc-form-button sc-md sc-stretched"> <button type="button"> <i class="sc-icon-search"></i> <span>Button</span> </button> </div> <div class="sc-form-button sc-md sc-stretched"> <button type="button" disabled> <i class="sc-icon-search"></i> <span>Button disabled</span> </button> </div> </div> </footer> </div> <div class="sc-overlay"></div>

Modal

Use Javascript to add/remove .sc-is-active to/from .sc-modal in order to show/hide modals.

Add .sc-sm, .sc-md, .sc-lg, .sc-stretched and .sc-fullscreen classes to .sc-modal to create different size modals.

Open

Code:

<div class="sc-modal"> <div class="sc-card"> <header class="sc-card-header"> <h3>Lorem ipsum</h3> </header> <div class="sc-card-body"> <p> Suspendisse gravida turpis sed tempor cursus. Donec nec ultrices felis. Orci varius natoque penatibus et magnis dis parturient montes. </p> </div> <footer class="sc-card-footer"> <div class="sc-form-button sc-md sc-flex-rr"> <button type="button"> <span>Close</span> </button> </div> </footer> </div> </div> <div class="sc-overlay"></div>

Splash

Use Javascript to add/remove .sc-is-active to/from .sc-splash in order to show/hide a splash screen.

Open

Code:

<div class="sc-splash"> <div class="sc-splash-container"> <div class="sc-splash-icon"> <i></i> </div> <h2>Stylecraft</h2> <p>A pure css framework.</p> <em>2019 - 2020</em> </div> </div>

Loader

Use Javascript to add/remove .sc-is-active to/from .sc-loader in order to show/hide a loader screen.

Open

Code:

<div class="sc-loader"> <div class="sc-loader-container"> <div class="sc-loader-icon"> <i></i> </div> <h2>Loading</h2> <p>Please wait...</p> <em>2019 - 2020</em> </div> </div>

Accordion

Accordions do not require Javascript. You can create them either with checkbox or radio inputs to draw different functionalities.

Multiple

Multiple items can be open at a time.

Code:

<div class="sc-accordion"> <div class="sc-accordion-item"> <input type="checkbox" id="accordion-item-1" /> <label for="accordion-item-1">Item 1</label> <div> Suspendisse gravida turpis sed tempor cursus. Donec nec ultrices felis. Orci varius natoque penatibus et magnis dis parturient montes. </div> </div> <div class="sc-accordion-item"> <input type="checkbox" id="accordion-item-2" /> <label for="accordion-item-2">Item 2</label> <div> Suspendisse gravida turpis sed tempor cursus. Donec nec ultrices felis. Orci varius natoque penatibus et magnis dis parturient montes. </div> </div> </div>

Single

Only one item can be open at a time. Opening a new item will automatically collapse the previous item.

Code:

<div class="sc-accordion"> <div class="sc-accordion-item"> <input type="radio" name="my-accordion" id="accordion-item-3" /> <label for="accordion-item-3">Item 1</label> <div> Suspendisse gravida turpis sed tempor cursus. Donec nec ultrices felis. Orci varius natoque penatibus et magnis dis parturient montes. </div> </div> <div class="sc-accordion-item"> <input type="radio" name="my-accordion" id="accordion-item-4" /> <label for="accordion-item-4">Item 2</label> <div> Suspendisse gravida turpis sed tempor cursus. Donec nec ultrices felis. Orci varius natoque penatibus et magnis dis parturient montes. </div> </div> <div class="sc-accordion-item sc-accordion-collapse"> <input type="radio" name="my-accordion" id="accordion-item-5" /> <label for="accordion-item-5">Collapse</label> </div> </div>

List

Just add .sc-list to a ul tag.

• Item 1
• Item 2
• Item 3

Code:

<ul class="sc-list"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>

Highlight

Add .sc-highlight class to span or em tags.

Highlighted text

Code:

<span class="sc-highlight">Highlighted text</span>

Icon

Icons are prefixed with .sc-icon-.

One of the size classes of .sc-sm, .sc-md or .sc-lg should be used together with the icon class for an icon to display properly.

You can use them together with .sc-hover to get the hover effect.

Code:

<i class="sc-icon-search sc-lg sc-hover"></i>

More icons: