soft-ui-library
Version:
A Collection of UI Elements implementing a neumorphic design pattern with light/dark mode toggle.
256 lines (212 loc) • 9.01 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="img/favicon.webp" type="image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.1/styles/atom-one-dark.min.css">
<link rel="stylesheet" href="dist/css/neumorphism-ui.css">
<link rel="stylesheet" href="dist/css/style.css">
<title>Soft UI Library | Neumorphism UI Design Library</title>
</head>
<body class="dark-mode">
<header class="sul-box-raised-2 sm">
<div class="nav-container">
<div class="brand">
<img class="brand-logo" src="img/favicon.webp" alt="logo" />
<h2 class="brand-text">Soft UI Library</h2>
</div>
<input class="sul-checkbox-type-2" type="checkbox" id="mode-toggler">
</div>
</header>
<p style="line-height: 1.75;">
<strong>Soft-UI Library</strong> is a Collection of UI Elements implementing a neumorphic design pattern with
light/dark
mode toggle.
</p>
<div class="block-section">
<h2 class="title-section">CSS</h2>
<p style="line-height: 1.75rem;">Copy the css
<a href="dist/css/neumorphism-ui.css" class="sul-link" target="_blank">here</a> in your project and you're good to
go 👍
</p>
</div>
<h2 class="title-section">NPM/YARN</h2>
<div class="block-section">
<pre>
<code class="hljs sul-box-raised-2 sm">
npm install soft-ui-library
# OR
yarn install soft-ui-library
</code>
</pre>
And import the content of the directory below to your project <br>
<pre>
<code class="hljs js sul-box-raised-2 sm">
//Using A JS Library (React,Vue,...)
import "soft-ui-library/dist/css/neumorphism-ui.css"
</code>
<code class="hljs html sul-box-raised-2 sm">
<!--Pure Html-->
<link rel="stylesheet"
href="node_modules/soft-ui-library/dist/css/neumorphism-ui.css"/>
</code>
</pre>
</div>
<div class="block-section">
<h2 class="title-section">💡 IMPORTANT</h2>
<p style="line-height: 1.75rem;">
Make sure to add the class "light-mode" or "dark-mode" to the body of your html.
This will load the necessary css classes and apply a reset to your html.
</p>
</div>
<form>
<h2 class="title-section">Text Fields</h2>
<div class="block-section">
<input type="text" class="sul-text-field" placeholder="Text Fied" />
</div>
<div class="block-section">
<input type="password" class="sul-text-field" placeholder="Password Field" />
</div>
<div class="block-section">
<textarea class="sul-text-field" rows="5" placeholder="Text Area Field"></textarea>
</div>
<h2 class="title-section">Buttons</h2>
<div class="block-section">
<a class="sul-btn"><i class="fab fa-google-drive"></i> Button</a>
</div>
<div class="block-section">
<a class="sul-btn btn-primary"><i class="fab fa-google-drive"></i> Button Primary</a>
</div>
<div class="block-section">
<pre>
<code class="hljs html sul-box-raised-2 with-hover sm">
<input type="text" class="sul-text-field" placeholder="Text Fied" />
<input type="password" class="sul-text-field" placeholder="Password Field" />
<a class="sul-btn">
<i class="fas fa-sign-in-alt"></i>
Button
</a>
<textarea class="sul-text-field" rows="5" placeholder="Text Area Field"></textarea>
<a class="sul-btn btn-primary">
<i class="fas fa-sign-in-alt"></i>
Button Primary
</a>
</code>
</pre>
</div>
<h2 class="title-section">Check Boxes</h2>
<div class="block-section">
<label><input type="checkbox" class="sul-checkbox-type-1"> Checkbox Type 1</label>
<label><input type="checkbox" class="sul-checkbox-type-1"> Checkbox Type 1</label>
<label><input type="checkbox" class="sul-checkbox-type-1"> Checkbox Type 1</label>
</div>
<div class="block-section">
<label><input type="checkbox" class="sul-checkbox-type-2"> Checkbox Type 2</label>
<label><input type="checkbox" class="sul-checkbox-type-2"> Checkbox Type 2</label>
<label><input type="checkbox" class="sul-checkbox-type-2"> Checkbox Type 2</label>
</div>
<h2 class="title-section" style="margin-top: 5rem;">Radio Buttons</h2>
<div class="block-section">
<label><input type="radio" class="sul-radio" name="radio"> Radio Button</label>
<label><input type="radio" class="sul-radio" name="radio"> Radio Button</label>
<label><input type="radio" class="sul-radio" name="radio"> Radio Button</label>
</div>
<div class="block-section">
<pre>
<code class="hljs html sul-box-raised-2 with-hover sm">
<input type="checkbox" class="sul-checkbox-type-1"> Checkbox Type 1
<input type="checkbox" class="sul-checkbox-type-1"> Checkbox Type 1
<input type="checkbox" class="sul-checkbox-type-1"> Checkbox Type 1
<input type="checkbox" class="sul-checkbox-type-2"> Checkbox Type 2
<input type="checkbox" class="sul-checkbox-type-2"> Checkbox Type 2
<input type="checkbox" class="sul-checkbox-type-2"> Checkbox Type 2
<input type="radio" class="sul-radio" name="radio"> Radio Button
<input type="radio" class="sul-radio" name="radio"> Radio Button
<input type="radio" class="sul-radio" name="radio"> Radio Button
</code>
</pre>
</div>
<h2 class="title-section">Select</h2>
<div class="block-section">
<label class="sul-select-wrapper" for="select-el">
<select name="select" class="sul-select" id="select-el">
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
</select>
</label>
</div>
<div class="block-section">
<pre>
<code class="hljs html sul-box-raised-2 with-hover sm">
<label class="sul-select-wrapper" for="select-el">
<select name="select" class="sul-select" id="select-el">
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
</select>
</label>
</code>
</pre>
</div>
<h2 class="title-section">Sliders</h2>
<div class="block-section">
<input type="range" class="sul-range">
</div>
<div class="block-section">
<input type="range" class="sul-range">
</div>
<div class="block-section">
<pre>
<code class="hljs html sul-box-raised-2 with-hover sm">
<input type="range" class="sul-range">
<input type="range" class="sul-range">
</code>
</pre>
</div>
</form>
<h2 class="title-section">Boxes</h2>
<div class="grid-container">
<div class="sul-box-raised-1 with-hover">sul-box-raised-1 with-hover</div>
<div class="sul-box-raised-2 with-hover">sul-box-raised-2 with-hover</div>
<div class="sul-box-raised-3 with-hover">sul-box-raised-3 with-hover</div>
<div class="sul-box-inset-1 with-hover">sul-box-inset-1 with-hover</div>
</div>
<div class="block-section">
<pre>
<code class="hljs html sul-box-raised-2 with-hover sm">
<div class="sul-box-raised-1 with-hover">
sul-box-raised-1 with-hover
</div>
<div class="sul-box-raised-2 with-hover">
sul-box-raised-2 with-hover
</div>
<div class="sul-box-raised-3 with-hover">
sul-box-raised-3 with-hover
</div>
<div class="sul-box-inset-1 with-hover">
sul-box-inset-1 with-hover
</div>
</code>
</pre>
</div>
<h2 class="title-section" style="margin-bottom: 1rem;">Light/Dark Modes</h2>
<div class="block-section" style="line-height: 1.5;">
Set the classes dark-mode/light-mode to the html body to toggle.
</div>
<footer class="footer">
<span>
© 2020 Soft-UI Library, By
<a class="sul-link" target="_blank" href="https://katendeglory.github.io">Katende Glory</a>
</span>
<span>
⭐
<a class="sul-link" target="_blank" href="https://github.com/katendeglory/soft-ui-library">Project Repository</a>
</span>
</footer>
<script src="js/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>