Introduction to Xenon-Designs

Xenon-designs is open source designing and styling framework, which helps developers can create conventional styles and components. It has pre-defined classes , fonts , icons and typographies which will ease the productions of web apps.

Xenon-Designs helps to make quick and fast designing and developing styles for your apps.

Lets Design Today, for Tomorrow!

Installation Guide

To use Xenon-designs in your web apps , copy the following link and paste it in <head> tag of your main HTML file.

Icons

We are using google icons. Use below link to access the google icons. Click here for more icons.

Colors

Xenon-Designs comes with pre-defined color, which can be used directly and indirectly in designs.

We can use these colors for background of elements or on text-colors. Varients of the colors can be used to deplay various things.

Colors

Primary #9370db
Secondary #f0739d
Ternary #0eafa7
Success #47cf73
Danger #ee555f
Warning #fedc56
Dark #171717
Classic #ddd
Gray #777777

Background Color

We can give background color to any division or section of the code with help of classes which is name like colorname-bg-color. For example, for Primary Color as background color , you can give class like primary-bg-color.

Primary background
secondary background
light background
success background

Typography

Documenation and examples for Xenon-Designs , which included typography , settinngs, heading, text, fonts and icons.

Headings

All HTML heading h1 to h2.

This is heading text - h1

This is heading text -h2

This is heading text -h3

This is heading text -h4

This is heading text -h5
This is heading text -h6

Titles

Three type of title we have title-sm, title-md & title-lg. All of these also have default class title

This is title text This is title text-lg This is title text-md This is title text-sm

Fonts

In our Library, mostly we have used two fonts Roboto and Poppins.

Subtitle

Subtitle is a text which has second presedence in anything. We have class subtitle to make any text subtitle.

This is subtitle

Centered Text

Centered text works with respect to its parent element.

This is centered text

Small Text

Small text is a text which is smaller than regular text

This is small text

Inline text Utilities

Inline text utilities have highlighted text, deleted text, underlined text, italic text, strong text.

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text will render as underlined

This line rendered as bold text.

This line rendered as italicized text.

Color Text

We have predefined text colors which can we added through any text with the help of classes.

The structure of that class is like colorname-text.

Primary-text Secondary-text Ternary-text Success-text Warning-text Danger-text Gray-text Danger-text Light-text

Avatar

Avatars are user profile pictures, usually found in circular shapes. It gives recognisable idetity to the users, objects, spaces or repositiory.

Profile Avatar

Profile Avatars can be created using the class avatar, inside the img tag.

Sized Avatar

Sized Avatar have total four types of sizes. xs, sm, md and lg .

It can be used by assigning avatar-sm, avatar-md, avatar-xs, avatar-lg classes to img tag.

Alerts

An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.

Alerts

Total Four types of alert with class are available primary-alert,error-alert, succes-alert & warning-alert.

Alerts can be assigned by useing four type of classes on div elemt. Those type of classes are, primary-alert, error-alert, warning-alert, success-alert.

email You have new Message!
error Danger: An error occured!
gpp_maybe Warning: Data may get leaked!
check_circle Success: Operation Successful!

Badges

Badges are circled element on top-right or bottom-right corner of any element. They shows notification status, online/offline status and many other use cases.

Badge with icons

In div element, by specifying one icon and other one as span element with classes badge , badge-round we can create a badge with icon.

Normal badge element with class badge will create badge with curved corners.

Rounded badge need a class badge-round along with class badge.

email new
error 5

Badge with Text

As above , Text will also have badge which shows a status and numbers on it.

random text 5

Badge with avatar

Badges on avatar shows status as online or offline of the user.

  • Element div with class badge-with-avatar.
  • It will have two part, one with img tag and other one is span tag .
  • Image will have class with avatar and span with have badge & badge-round class on it.

    • You can change the color of badge depend on user's status.

    Buttons

    Buttons are very important aspect of any website. We provide diversity of buttons , from which user can take action and make choices.

    Normal Buttons

    Use class btn along with btn-variant.

    Link

    Outline Buttons

    Sometimes, we need buttons which are more likely to have animation and which looks good when we hover. That where outline buttons comes into play.

    We can add class btn-variant-outline on buttons to make button outlined.

    Large Buttons

    Large Buttons are very useful for call-to-action which grabs attentions.

    Adding class btn-large will make button large.

    Small Buttons

    Small buttons are interesting to use with small screen and using along with inline element.

    Adding class btn-small on normal button will make that button small.

    Block Button

    Block buttons are basically, large buttons with 100% of width inherited from parent element.

    Add class btn-block to regular buttonsto make button block.

    Disabled Buttons

    It is important to restrict users at some place. For example, when user try to login and after clicking on login button, you want user not to click that button again for sometime. Thats where disabled buttons coms into play.

    We are not using any specific class to make button disabled, instead you can directly give disabled atrribute to make button disbaled.

    Floating action Buttons

    A floating action button (FAB) represents the primary action of a screen.

    Depending on requirement, you can chnage the position of class btn-float to fixed or relative.

    Buttons with Icons

    It is common to have Buttons which have icons and text.

    For that, we will using icons inside buttons beside of text.

    Cards

    Cards are basic entity of any web application. They are used on social media apps, e-commerce apps and anything where you have to group a single type of content.

    Cards display content and actions on individual topics.Cards have images, texts, buttons, icons placed in perticular heirarchy, which signifies a meaning.

    Card structure

    Our Card have four parts card-header, card-media, card-content, card-footer.

    card-header

    Card header has specific significance. Whenever we want to give header to the card it can be given in this section.

    card-media

    Card media is Image part of the card.

    card-content

    Card content is most important part of card which have things like card-title, description, ratings, prices, etc things.

    card-footer

    Card footer is main section where most of your call-to-action functionality comes. For example, Add-to-card, buy-now, subscribe etc. We can add buttons and Icons in this section.

    Basic Card

    This is Basic card having title, subtitle, ratings, price on it.

    Chrome-book 500 powered by Google
    star_rate star_rate star_rate star_rate star_rate
    Price : $500   $455

    Card with header

    This card with have card-header.

    One Plus 9T powered by oneplus

    Lorem ipsum, dolor sit amet consectetur adipisicing elit.

    Price : $500   $455

    Card with text Overlay

    To add overlay to entire card , add extra div at the end of the card which has a class overlay-content, which has overlay-text. Overlay-content has been given positions which set on the card after hovering on it.

    Chrome-book 500 powered by Google
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Lorem ipsum, dolor sit amet consectetur adipisicing elit.
    Price : $500 $455
    Out of Stock

    Card with Dismiss

    This card will have an icon at top-right corner of the card. We need to add on extra div at the end of the card which has a class card-dismiss.

    Chrome-book 500 powered by Google
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Lorem ipsum, dolor sit amet consectetur adipisicing elit.
    Price : $500   $455
    close

    Card with badges

    We have seen badges component but for card we will be using different types of badges. Here, we will have one extra div where class will be card-badge, in which we can give text or icons.

    Chrome-book 500 powered by Google
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Lorem ipsum, dolor sit amet consectetur adipisicing elit.
    Price : $500   $455
    New

    Text-only card

    This card only have content without images

    Welcome to MyPage Amazing solution for everything

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil quas velit ratione aliquid reprehenderit, modi mollitia libero dolores.

    Invite Your friends share

    Horizontal card

    This card has different semantic and structure compare to other cards.

    It has a class called card-horizontal and its structure is also different, because it has card-horizontal-top which shows content part of a card.

    Chrome-book 500 powered by Google

    Lorem ipsum, dolor sit amet consectetur adipisicing elit.

    Price : $500   $455
    New

    Images

    Images are the important aspects of any website. HTML provides us img tag with help of that we can put images on web page.

    Responsive Image

    Responsive Image is a image which will have width and height inherited from its parents element.Responsive Images are used to dsiplay Images on websites, which are screen responsive.

    Rounded Image

    Round Images are circular images with border-radius 50% and its width and height is inherited from its parents.

    Inputs

    Inputs are most important part of any website. These input components is a way for users to communicate with website. Inputs are used to take informations from users and then we can process on that inputs or store it in database.

    Label Inputs

    Labeled inputs fields are input field which content label at top of it. These input field can be customised to show error or success messages.

    Disabled Inputs

    Disabled inputs are element where you want user to be restricted at some fileds.

    Textarea

    The textarea tag defines a multi-line text input control.

    Check box

    The defines a checkbox. The checkbox is shown as a square box that is ticked (checked) when activated. Checkboxes are used to let a user select one or more options of a limited number of choices.

    Radio Buttons

    The defines a radio button. Radio buttons are normally presented in radio groups (a collection of radio buttons describing a set of related options). Only one radio button in a group can be selected at the same time.

    Form

    Form is an important input component which is used in validation & authentication. It is also used in communication with server and database.

    We have class form-group on form element. Also one span tag at end of the form where we can show our validation error which have a class of validation-error.

    Sign in

    Password should be minimum 5 character.

    Toast

    Toast display messages related to an interaction happened between user and the website. They usually stay on the screen for 2-3 seconds and then disappear.Toast can be used to show success messages, warnings or errors.

    Toast- An example

    Click on following button to see the toast which is fixed at bottom left corner of the screen.

    We required to add toast class whith class hidden on it. So, that it will be hidden at initial state.

    CSS code

    Javascript code

    Lists

    Lists are continuous, vertical indexes of text or images. They are composed of items containing primary and supplemental actions, which are represented by icons and text.

    Simple List

    Simple List shows items contained at one positions.

    We have two classes for lists, one is parent class which is given to < ul > tag which list-group and another class if for items which is list-item-group on < li > tag.

    • Cras justo odio
    • Dapibus ac facilisis in
    • Morbi leo risus
    • Porta ac consectetur ac
    • Vestibulum at eros

    Notification List

    • You have new Notification
    • You have new Notification
    • You have new Notification
    • You have new Notification

    Rating

    Ratings provide insight regarding others' opinions and experiences, and can allow the user to submit a rating of their own.

    We are using material-icons for rating component. Depending on size of material icons ratings star' size can be adjusted.

    Class rated goldify the rating component.

    Normal Ratings

    star_rate star_rate star_rate star_rate star_rate

    Small ratings

    star_rate star_rate star_rate star_rate star_rate

    Grids

    Use grids to create sections of your viewport. Using css grid you can create way more complex layouts than with tables.

    Use grid-container class to apply grid layout and grid-item class on each individual item.

    Grid 3-Columns

    Use class grid-cols-3

    Grid 2-Columns

    Use class grid-cols-2

    Grid 3-Rows

    Use class grid-row-3

    Grid 2-rows

    Use class grid-rows-2

    Slider

    <input /> elements of type range let the user specify a numeric value which must be no less than a given value, and no more than another given value. The precise value, however, is not considered important. This is typically represented using a slider or dial control rather than a text entry box like the number input type.