Get Simple | Simply-UI

Introduction

Getting Started

Layout

Breakpoints WIPGrid WIP

Content

ColorsTypography

Forms

Buttons WIPFloating Label WIPInput Fields WIP

Components

Badges WIPCards WIPNavbar WIPToasts WIP

Getting Started

Get Setup

CDN

<link> the CDN, in your project's <head>

JsDeliver:
  1. Full 87.3 KB
    https://cdn.jsdelivr.net/npm/simply-ui@1.1.6/dist/css/simply.css
  2. Min 70.1 KB
    https://cdn.jsdelivr.net/npm/simply-ui@1.1.6/dist/css/simply.min.css
UNPKG:
  1. Full 87.3 KB
    https://cdn.jsdelivr.net/npm/simply-ui@1.1.6/dist/css/simply.css
  2. Min 70.1 KB
    https://cdn.jsdelivr.net/npm/simply-ui@1.1.6/dist/css/simply.min.css
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simply-ui@1.1.6/dist/css/simply.min.css" />
	<title>Simply-UI Demo</title>
</head>

NPM

  1. In your project directory. Open Terminal and run npm i simply-ui.

  2. Add a link to simply-ui/dist/css/simply.css OR simply-ui/dist/css/simply.min.css in your project.
import 'simply-ui/dist/css/simply.min.css'
In the case of NextJS/REACT, the above is in _app.js

Clone

  1. Download or Clone the GitHub Repoand move the Simply-UI andgulpfile.jsfolder to your project
    (CDN and NPM comingsoon)

  2. In your project directory. Open Terminal and run gulp to build .css file.
    If you use simply.purged.css the file will only have used classes thanks to gulp-purgecss.

  3. <link> the built css, by default dist/css/simply.html, in your project's <head>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="dist/css/simply.css">
    <title>Simply-UI Demo</title>
</head>