Cloud UI

Cloud UI is utility cum component library, developed and managed by Shobit Deshwal.

Cloud UI provides you a readymade utilites classes and component structure, which can be easily be imported to any web project. It is componetly made in CSS and follows industry best practices. CloudUI will help you create beautiful and responsive websites without any worries

Introduction

In order to use the components in your project, Copy and paste the code in the head tag of your html document, above all other style sheets.

Once you are done with the first step, you can easily use the components by just adding class names to your html elements.

Customisable

If you like to add your own css over and give your website your own look. You can simply provide your own custom stylesheet.

Just simply import you css file after the cloudUI import link, As shown below

You can go another step deep and edit the variaibles, It will be auto applied to the whole library.

Head over to Variables

Colors

Available Colors:

  • Primary
  • Secondary
  • Accient
  • Success
  • Danger
  • Warn
  • Light
  • Dark
    • With 3 shades of each color: light, lighter, lightest. Example: --color-primary-light, .text-danger-lighter or bg-dark-ligthest

    --primary-color--secondary-color--accient-color--success-color--danger-color--warn-color--dark-color--light-color

    Background Color Utilites:

    Cloud UI provides utilites for Background colors, you can simply apply the class and change background color on the go.

    Available classes:

  • bg-primary
  • bg-secondary
  • bg-accient
  • bg-success
  • bg-danger
  • bg-warn
  • bg-dark
  • bg-light

    • Text Color Utilites:

    Cloud UI provides utilites for Background colors, you can simply apply the class and change text color on the go.

    Available classes:

  • text-primary
  • text-secondary
  • text-accient
  • text-success
  • text-danger
  • text-warn
  • text-dark
  • text-light

    • Typography

    Headings:

    Custom Heading styling are applied by Cloud UI by defauly on h1, h2, h3, h4, h5, h6 and small tag.

    Text Styles:

    Custom Font styling are applied by Cloud UI by defauly. You can using the below given commands.

    Available classes:

  • text-italic
  • text-light
  • text-normal
  • text-medium
  • text-semibold
  • text-bold
  • text-line-through
  • text-underline
  • text-uppercase
  • text-truncatre
  • text-lowercase
  • text-capitalize

    • Text Align:

    Custom Font styling are applied by Cloud UI by defauly. You can using the below given commands.

    Available classes:

  • text-center
  • text-left
  • text-right
  • text-justify

    • Text Sizes:

    Modify text size with the cloud UI utilites, ranging from xs to xxxxl.

    Available classes:

  • text-xs
  • text-sm
  • text-md
  • text-lg
  • text-xl
  • text-xxl
  • text-xxxl
  • text-xxxxl

    • Alerts

    Alerts provide highlighted feedback messages for typical user actions.

    Available classes:

  • alert
  • alert-close
  • alert-icon

    • Color variations:

  • alert-primary
  • alert-secondary
  • alert-accient
  • alert-danger
  • alert-success
  • alert-warn
  • alert-dark
  • alert-light

    • Check the below demo codepen code to check the usage and results, Feel free customize and play with it.

    Avatars

    Avatars are small containers used to show display picture mostly. You can use the following premade classes to quicky create a avatar using image, text or icon.

    Available classes:

  • avatar
  • avatar-image
  • alert-rounded
  • alert-circle

    • Size variations:

  • avatar-sm
  • avatar-md
  • alert-xl
  • alert-xxl

    • Check the below demo codepen code to check the usage and results, Feel free customize and play with it.

    Badge

    Badges can contain words, notifications or even be used a chips, to hightlight sometime in the document. Further you can combine a badge inside a avatar element to use it as a online status badge.

    Available classes:

  • badge
  • icon-badge
  • alert-rounded

    • Size variations:

  • badge-danger
  • avatar-success
  • alert-warn
  • alert-xxl

    • Check the below demo codepen code to check the usage and results, Feel free customize and play with it.

    Buttons

    Buttons are the most commonly used component in any website, Cloud UI provides multiple variations that you can directly use in your website.

    Available classes:

  • btn
  • btn-outlined
  • btn-rounded
  • btn-action

    • Colors variations:

  • btn-primary
  • btn-secondary
  • btn-accient
  • btn-danger
  • btn-success
  • btn-warn
  • btn-dark
  • btn-light
  • btn-disabled

    • Size variations:

  • btn-xs
  • btn-sm
  • btn-md
  • btn-lg
  • btn-xl
  • btn-xxl

    • Check the below demo codepen code to check the usage and results, Feel free customize and play with it.

    Links are similar to button

    Available classes:

  • link
  • link-underlined

    • Color classes:

  • link-primary
  • link-secondary
  • link-accient

    • Check the below demo codepen code to check the usage and results, Feel free customize and play with it.

    Cards

    Cards can customized to any extend, It can be as simple as just text or it can be a product listing card or any kind of you need.

    Available classes:

  • card
  • card-square
  • card-horizontal

    • Card Items classes:

  • card-image
  • card-header
  • card-footer
  • card-main
  • card-text
  • card-title
  • card-close
  • card-overlay
  • card-badge

    • Check the below demo codepen code to check the usage and results, Feel free customize and play with it.

    Image

    Cloud UI provides varios classes that you can use as per your need to make your images responsive or of some fixed design.

    Available classes:

  • image-fluid
  • image-square
  • image-rounded
  • image-circle

    • Check the below demo codepen code to check the usage and results, Feel free customize and play with it.

    Inputs

    Different Variations of input fields to be used in different cases.

    Available classes:

  • input-field
  • input-field-float

    • Colors classes:

  • input-field-danger
  • input-field-success
  • input-field-warn
  • input-field-disabled

    • Check the below demo codepen code to check the usage and results, Feel free customize and play with it.

    Lists

    Lists are used to diaply a list of items, Cloud UI provides two variations of lists.

    Available classes:

  • list
  • list-horizontal

    • Item classes:

  • list-title
  • list-item
  • list-item-active

    • Check the below demo codepen code to check the usage and results, Feel free customize and play with it.

    Modals are dialog box which display above the other element and require some kind of actions or display import message to user.

    Available classes:

  • modal

    • Item classes:

  • modal-header
  • modal-main
  • modal-footer
  • modal-close

    • Check the below demo codepen code to check the usage and results, Feel free customize and play with it.

    Navigation are the main part of almost every website for the purpose of naviations to different pages on website.

    Available classes:

  • navbar
  • navbar-sticky
  • navbar-dark

    • Item classes:

  • navbar-list
  • navbar-item
  • navbar-hamburger
  • modal-close

    • Check the below demo codepen code to check the usage and results, Feel free customize and play with it.

    Star Rating

    Star Rating component is based on javascript. In order to work you must include script tag and import cloud-ui js file in your html.

  • star-rating

    • Check the below demo codepen code to check the usage and results, Feel free customize and play with it.

    Toast

    Toasts are used to show notification on performing any action. Cloud-UI provides different styled classes for toast messages.

    Available classes:

  • toast
  • toast-icon
  • toast-close

    • Position classes:

  • toast-right-top
  • toast-right-bottom
  • toast-left-top
  • toast-left-bottom
  • toast-center-top
  • toast-center-bottom

    • Colors classes:

  • toast-primary
  • toast-secondary
  • toast-accient
  • toast-danger
  • toast-warn
  • toast-success
  • toast-dark
  • toast-light

    • Check the below demo codepen code to check the usage and results, Feel free customize and play with it.

    Grids

    Grids are used for layout purpose. Cloud-UI provides readymade classes for grid.

    Available classes:

  • grid
  • grid-responsive
  • grid-2
  • grid-3
  • grid-4
  • grid-5
  • grid-6
  • grid-7
  • grid-8
  • grid-9
  • grid-10
  • grid-11
  • grid-12

    • Check the below demo codepen code to check the usage and results, Feel free customize and play with it.