UI Elements Docs

Getting Started

1. Create a new folder my-project
2. Cd my-project
3. Install the UI Elements package
npm i ui-elements
4. Create config.scss file in the root directory of my-project
5. Create index.scss file in the root directory of my-project
6. In index.scss import the config.scss file and the UI Elements library
@import 'config.scss';
@import 'ui-elements/sass/index.scss';
7. Create gulpfile.js file in the root directory of my-project
8. Paste the following in gulpfile.js file in order to watch your changes and compile the styles.
const { src, dest, watch, series } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const purgecss = require('gulp-purgecss');

function buildStyles() {
return src('index.scss')
.pipe(sass({ includePaths: ['./node_modules'] }))
.pipe(purgecss({ content: ['*.html'] }))
.pipe(dest('css'));
}

function watchTask() {
watch(['config.scss', 'index.scss', '*.html'], buildStyles);
}

exports.default = series(buildStyles, watchTask);
9. Create index.html file in the root directory of my-project
10. link the index.html file to the created styles by Gulp (you don't have to create css folder with index.css, it will be auto generated).
<link rel="stylesheet" href="css/index.css" />
11. Run npx gulp in the terminal, in order to watch your changes
npx gulp
12. Add tags and UI Elements classes in the index.html

Grid System

Grid item 1

Grid item 2

Grid item 3

Grid item 4

Grid item 5

Grid item 6

Grid item 7

Grid item 8

Grid item 9

Grid breakpoints

'xs': min 0px
'sm': min 640px
'md': min 768px
'lg': min 1024px
'xl': min 1280px

Grid classes

col-xs-1 /*up to*/ col-xs-12
col-sm-1 /*up to*/ col-sm-12
col-md-1 /*up to*/ col-md-12
col-lg-1 /*up to*/ col-lg-12
col-xl-1 /*up to*/ col-xl-12

Elements

Colors

/*Avaliable colors for text and backgrounds*

primary: #007bff
danger: #d9534f
next: #5cb85c
error: #d9534f
warning: #ffa500
info: #5bc0de
succes: #28a745
disabled: #6c757d
link: #0000ee
white: #fff
black: #000

/*Every color (exept white and black) has 9 levels of shading */

text-primary-100 /*up to*/ text-primary-900
bg-primary-100 /*up to*/ bg-primary-900

Hello world!

Buttons

/* Buttons come in: filled, outlined, rounded, edged (standard) */

button-rounded-primary
button-outline-rounded-primary
button-rounded-info
button-danger
button-rounded-next
button-outline-disabled
button-disabled

Cards

/* Card structure has to be the following */

<div class="card">
<img src="" alt="">
<div class="card-content">
<a href="#" class="card-title">Text</a>
<p class="card-desc">Text</p>
</div>
</div>

Amsterdam

Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime voluptatum nesciunt, quis mollitia aspernatur molestias quidem, illum cupiditate ducimus velit facilis aut dolor perspiciatis in recusandae officiis sequi qui ipsum!

Milan

London

Form

/* Form control */

<div class="form-control">
<label>Username</label>
<input type="text" placeholder="Username" />
</div>

Username

Username

Username

/* Submit */

<button class="submit">Submit</button>

Configuration

In order to configure the library you can pre define the variables in the config.scss file

$primary: #222222; //default #007bff

In addition to colors, the other default variables

// spacing
$base-padding: 0.75rem;
$base-margin: 0.75rem;

// borders
$base-border-radius: 5px;
$base-border-thickness: 1px;

// box-shadow
$base-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.25);

// font sizes
$base-font-size: 1rem;
$font-size-sm: $base-font-size * 0.75;
$font-size-lg: $base-font-size * 1.5;
$font-size-xl: $base-font-size * 2;
$font-size-xxl: $base-font-size * 3;

// transition
$base-transition-duration: 0.3s;