Neumorph.scss

Getting started

Neumorph.scss is a bundle of bootstrap 4 styles integrated with neumorphism.scss clases to deal with soft design.

It brings you a layer between bootstrap and your styles to do it easy.

Check on Github

Instalation

You only need to import one of the variations stylesheet on your project and start writting clases in html elements, like you do with bootstrap.

You can use clasic bootstrap clases too like you usually do if you use the full version or only the clases related to _utilities & grid if you choose the basic version.

Variations

Check diferent variations themes and choose what you need, Neumorph.scss with bootstrap _utilities & grid only or with full bootstrap styles.

Light theme
neumorph.css
neumorph.min.css
neumorph-full.css
neumorph-full.min.css
Dark theme
neumorph-dark.css
neumorph-dark.min.css
neumorph-dark-full.css
neumorph-dark-full.min.css

Basic Element

Integrates an element with base neumorphism design

Basic Element

    Example:

    <div class="np-element">
        <span>Basic Element</span>
    </div>

Colorize

Integrates an element with base colors

.np-colorize

    Example:

    <div class="np-colorize">
        <p>.np-colorize</p>
    </div>

Shadows

Integrates an element with diferent shadows

    Example:
    
    <div class="np-element np-hover np-square-xxl np-shadow-double"></div>
    <div class="np-element np-hover np-square-xxl np-shadow"></div>
    <div class="np-element np-hover-inverse np-square-xxl np-shadow-inverse"></div>
    <div class="np-element np-hover np-square-xxl np-shadow-border-square"></div>
    <div class="np-element np-hover np-square-xxl np-shadow-border-square-push"></div>
    <div class="np-element np-hover np-circle-xxl np-shadow-border-circle"></div>
    <div class="np-element np-hover np-circle-xxl np-shadow-border-circle-push"></div>

Lists

List element
List element
List element
List element
List element

    Example:

    <ul class="np-list">
        <li class="np-list-element">List element</li>
        <li class="np-list-element">List element</li>
        <li class="np-list-element">List element</li>
        <li class="np-list-element">List element</li>
        <li class="np-list-element">List element</li>
    </ul>

Colors

.np-text-primary
.np-text-success
.np-text-accent
.np-text-warn
.np-text-warning
.np-text-info
.np-text-secondary
.np-text-dark
.np-text-light
.np-text-foreground
.np-text-background

Backgrounds

.np-bg-primary
.np-bg-success
.np-bg-accent
.np-bg-warn
.np-bg-warning
.np-bg-info
.np-bg-secondary
.np-bg-dark
.np-bg-light
.np-bg-foreground
.np-bg-background

Hover

Integrates an hover neumorphism shadow effect

Hover

    Example:

    <div class="np-element np-hover"></div>

Hover inverse

Integrates an inverse hover neumorphism shadow effect

Hover inverse

    Example:

    <div class="np-element np-shadow-inverse np-hover-inverse"></div>

Buttons

    Example:

    <button class="np-btn">+</button>
    <button class="np-btn np-square-sm">+</button>
    <button class="np-btn np-circle-sm">+</button>

Divider

Fat divider

    Example:

    <div class="np-divider"></div>
    <div class="np-divider-fat"></div>

Shapes

Squares

Circles

    Example:
    Sizes: sm - md - lg - xl - xxl

    <button class="np-element np-hover np-square-$size"></button>
    
    <button class="np-element np-hover np-circle-$size"></button>

Forms

Label

Checkbox

I love it Get more info Keep learning

Radio

I love it Get more info Keep learning

    Example:

    Basic
    <div class="np-form-group">
        <label for="np-element">Label</label>
        <input type="text" class="np-form-element np-text-accent" value=".np-form-group > .np-form-element">
    </div>

    Basic placeholder
    <div class="np-form-group">
        <input type="text" class="np-form-element" placeholder="Placeholder">
        <input type="text" class="np-form-element" placeholder="Placeholder">
    </div>
    
    <div class="np-form-group">
        <label for="np-element">Label</label>
        <input type="text" class="np-form-element np-text-accent" value=".np-form-group > .np-form-element">
    </div>
    
    Option
    <div class="np-form-group">
        <label for="np-option">Label</label>
        <select name="np-option" id="np-option" class="np-form-element">
            <option value="1">.np-form-group > .np-form-element</option>
            <option value="1">Option element</option>
            <option value="1">Option element</option>
            <option value="1">Option element</option>
            <option value="1">Option element</option>
        </select>
    </div>
    
    Checkbox
    <span>
        <input type="checkbox" id="myCheck" name="myCheck" class="np-form-check">
        <label for="myCheck" class="np-form-check-label">I love it</label>
    </span>

    Radio
    <span>
        <input type="radio" id="myCheck" name="myCheck" class="np-form-check">
        <label for="myCheck" class="np-form-check-label">I love it</label>
    </span>

Tables

Heading	Heading	Heading	Heading
row	row	row	row
row	row	row	row
row	row	row	row

    Example:

    <table class="np-table np-0-8x">
        <tr class="np-table-heading">
            <th>Heading</th>
            <th>Heading</th>
            <th>Heading</th>
            <th>Heading</th>
        </tr>
        <tr class="np-table-row">
            <td>row</td>
            <td>row</td>
            <td>row</td>
            <td>row</td>
        </tr>
        <tr class="np-table-row">
            <td>row</td>
            <td>row</td>
            <td>row</td>
            <td>row</td>
        </tr>
        <tr class="np-table-row">
            <td>row</td>
            <td>row</td>
            <td>row</td>
            <td>row</td>
        </tr>
    </table>

Images

Centers the image in wrapper and cover the wrapper.

Left: .np-img-wrapper .np-element np-hover > .np-img-expand | Right: .np-img-wrapper > .np-img-expand

https://picsum.photos/seed/picsum/200/300

    Example:

    <div class="np-img-wrapper np-element np-hover">	
        <img class="np-img-expand" src="https://picsum.photos/640/480?grayscale">	
    </div>

Sizing

Using font-size

Can easily increase font size with "x" clases

np-0-5x
np-0-8x
np-1-5x
np-2x
np-2-5x
np-3x

Sizing tranform

Using transform

Can use transform same way with "tx" clases

np-0-5tx
np-0-8tx
np-1-5tx
np-2tx
np-2-5tx
np-3tx