Introduction

Neutron UI is is a Component Library made with a goal of saving time to develop apps spending less time on styling css and focus more on your app's functionality the library currently features one breakpoint at 600px Although every component is already tested at differnet viewports and made completly reponsive

You can simply add this Library by adding the given link in your HTML file

view raw link.html hosted with ❤ by GitHub

Alerts

Alerts can be usefull for making the user aware of sudden change in the app like added the items in cart or the transaction failed

This is default alert
This is a Success alert
<div class="alert">
This is default alert
<a href="" class="close"></a>
</div>
<!-- success-->
<div class="alert-success shadow-light">
This is a Success alert
<a href="" class="close"></a>
</div>
view raw alerts.html hosted with ❤ by GitHub

Avatar

Avatars are now required in almost every app these days ,we have three types of avatars based on the sizes

<!--large-->
<img src="imageAddress.png" alt=""class="avatar-lg">
<!--Normal -->
<img src="imageAddress.png" alt=""class="avatar">
.
<!--Small-->
<img src="imageAddress.png" alt=""class="avatar-sm">
view raw avatars.html hosted with ❤ by GitHub

Buttons

Buttons ,Well a website Could'nt exist without buttons ,In this Library I Have tried to make them simple yet noticeable.

There are two kinds of buttons in this Library as you might have guessed button-primary and button-secondary also these classes can be applied to anchor tags aswell

Primary Button
Secondary Button

buttons tags with class:

<a href="#" class="button-primary">
Primary Button</a>
<a href="#" class="button-secondary">
Secondary Button</a>
<button class="button-primary">
Primary Button</button>
<button class="button-secondary">
Secondary Button</button>
view raw buttons.html hosted with ❤ by GitHub

Cards

Cards are a crucial design element to show data to users without scaring them with a homework to read large paragraphs

Currently we have three card options card-h for horizontally stacked content card-vfor vertically arranged contenyt and card-h-cx which is a horizontal card with button top close it at the corner anchor tags aswell

Hola lens 2

Introduce new ways for your workforce to solve problems, design and review spaces, learn complex processes, and help customers buy the right prdouct right where they are in the field

<div class="card-h">
<img src="assets/vr.webp" alt="">
<div class="card-text">
<h1>Some heading here</h1>
<p>some more content here </p>
</div>
</div>
view raw card-h.html hosted with ❤ by GitHub

Hola lens 2

Introduce new ways for your workforce to solve problems, design and review spaces, learn complex processes, and help customers buy the right prdouct right where they are in the field

<div class="card-h-cx">
<img src="assets/vr.webp" alt="">
<div class="card-text">
<h1>Some heading here</h1>
<p>some more content here </p>
<a href="" class="close"></a>
</div>
</div>
view raw card-h-cx.html hosted with ❤ by GitHub

Hola lens 2

Introduce new ways for your workforce to solve problems, design and review spaces, learn complex processes, and help customers buy the right prdouct right where they are in the field

<div class="card-v">
<img src="assets/vr.webp" alt="">
<div class="card-text">
<h1>Some heading here</h1>
<p>some more content here </p>
</div>
</div>
view raw card-v.html hosted with ❤ by GitHub

Lists

This library consists of two kinds of lists- list-stacked and list-tag these can be used in multiple ways in your page ,could pass links,buttons or notifications as list items

List stacked:

  • You have 6 new messages
  • Tanay pratap has started following you
  • You have 6 new messages

List Tag:

<ul class="list-stack">
<li>
<div class="alert">You have 6 new messages</div>
</li>
<li>
<div class="alert">This is stacked list</div>
</li>
<li>
<a href="#" class="button-secondary">
</li>
</ul>
<!-- list-tag -->
<ul class="list-tag">
<li><a href=""> Batman</a></li>
<li><a href=""> Iron man</a></li>
<li><a href=""> Captain America</a></li>
<li><a href=""> Spider Man</a></li>
</ul>
view raw list-stack.html hosted with ❤ by GitHub

Input

We need to take a lot of text Inputs from users to offer a great user experience in return
You can get a beautifull input field by just adding input-primary class in input we Currently have two types of input fields text and "search" more comming soon :)

the shadow here is a Utility class ,can be removed or added anytime as per your design

<input type="text" class="input-primary"
placeholder="Hello! type something here" name="/">
<!--search input-->
<input type="text" class="input-search shadow-light"
placeholder="Search" name="search">
view raw input.html hosted with ❤ by GitHub

Utilities

Although there are lot of components available in this library and will increasing in future there are certain situations where you just want to add a single or few specific properties to a vanilla div

keeping that in mind I have added a bunch of Utilities in this Library A detailed overview of them is given below.

    Paragraph

    Add some styling to your paragraph using paragraph-primary this changes font family to primary and size to 18px example the intro paragraph

    <p class="paragraph-primary">This is primary paragraph</p>
    view raw paragraph.html hosted with ❤ by GitHub

    Text center

    As the name says it will add css property textalign:center

    <p class="text-center">This is center alingned </p>
    view raw text-center.html hosted with ❤ by GitHub

    Text Link

    Many times we want to make a piece of text as link but the raw anchor tag ruins it use this text-link class to instanlty make example text clickable

    <a href="#"class="text-link">example text</a>
    view raw text-link hosted with ❤ by GitHub

    Colors

    Who doesnt likes colors on a website ,well you can add them anywhere just by css classes and the default pressets just add the color variable names class or add bg before to make it background color

    <div class="color-primary">
    this will have primary color </div>
    <div class="bg-color-primary">
    this will have primary color as background</div>
    view raw colors.html hosted with ❤ by GitHub

    Shadows

    Shadows are really trendy in modern UI designs ,you can add them by using css classes ,currently there are two presets available for shadows - shadow-light and shadow-normal this card is an example of shadow-light

    <div class="shadow-normal">
    this div gets normal shadow<div>
    <div class="shadow-light">
    this div gets lighter shadow<div>
    view raw shadow.html hosted with ❤ by GitHub

    Container

    Container class is available in the component library start as big wrap for all your components this adds margin of 2rem from both left and right side so your content doesnt gets sticked edge to edge.

    <div class="container">
    <div>container is acting as a wrap on this page
    </div>
    </div>
    view raw container.html hosted with ❤ by GitHub

    Flexbox

    Flexboxes are amazing for keeping the sites responsive and you will probably need them a lot if making something without our components ,we got you covered!. Just add the Css class d-flex whenever you need one

    there are multiple varients available for flex and adding flex properties you probably are familiar with

    • d-flex : makes a normal flex
    • d-flex-v:adds a box with direction as row
    • justify-content-center:added with flex

    <div class="d-flex">
    A normal flex </div>
    <div class="dflex-v">
    A flex with veritcal direction</div>
    <div class="d-flex justify-content-center">
    A normal flex with content center</div>
    <div class="d-flex align-content">
    A normal flex with align center</div>
    view raw flex.html hosted with ❤ by GitHub

    Padding

    You can add paddings anywhere just by adding a css class: p, px or py these specify paddings on both ,horizontal(x-axis) or vertical( y-axis) respectively

    Now these classes add padding equally on both or all sides the used class, the magnitude of them can be declared by adding a value between 1-6 seperated by hyphen (-), the values 1-6 are in REM unit so a px-5 class adds horizontal padding of 5rem from both sides

    <div class="py-1">
    this gets 1rem of vertical padding
    </div>
    <div class="px-5">
    this gets 5rem of horizontal padding
    </div>
    <div class="p-1">
    this gets 1rem of (all) padding
    </div>
    view raw padding.html hosted with ❤ by GitHub

    Margin

    You can add MArgings anywhere just like padding by adding a css class: m, mx or my these specify margins on both ,horizontal(x-axis) or vertical( y-axis) respectively

    Now these classes add margins equally on both or all sides the used class, the magnitude of them can be declared by adding a value between 1-6 seperated by hyphen (-), the values 1-6 are in REM unit so a px-5 class adds horizontal margins of 5rem from both sides

    <div class="my-1">
    this gets 1rem of vertical margin
    </div>
    <div class="mx-5">
    this gets 5rem of horizontal margin
    </div>
    <div class="m-1">
    this gets 1rem of (all) margin
    </div>
    view raw margin.html hosted with ❤ by GitHub

Sorry this page is not mobile ready yet
Please visit on desktop