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
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.
Check diferent variations themes and choose what you need, Neumorph.scss with bootstrap _utilities & grid only or with full bootstrap styles.
Integrates an element with base neumorphism design
Example:
<div class="np-element">
<span>Basic Element</span>
</div>
Integrates an element with base colors
.np-colorize
Example:
<div class="np-colorize">
<p>.np-colorize</p>
</div>
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>
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>
Integrates an hover neumorphism shadow effect
Example:
<div class="np-element np-hover"></div>
Integrates an inverse hover neumorphism shadow effect
Example:
<div class="np-element np-shadow-inverse np-hover-inverse"></div>
Example:
<button class="np-btn">+</button>
<button class="np-btn np-square-sm">+</button>
<button class="np-btn np-circle-sm">+</button>
Example:
<div class="np-divider"></div>
<div class="np-divider-fat"></div>
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>
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>
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>
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
Example:
<div class="np-img-wrapper np-element np-hover">
<img class="np-img-expand" src="https://picsum.photos/640/480?grayscale">
</div>
Can easily increase font size with "x" clases
Can use transform same way with "tx" clases