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.

    See the Pen Typography--Cloud-UI by shobit1337 (@shobit1337) on CodePen.

    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

    • See the Pen Font-Style--Cloud-UI by shobit1337 (@shobit1337) on CodePen.

    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

    • See the Pen Text-Align--Cloud-UI by shobit1337 (@shobit1337) on CodePen.

    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

    • See the Pen Text-Size--Cloud-UI by shobit1337 (@shobit1337) on CodePen.

    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.

    See the Pen Untitled by shobit1337 (@shobit1337) on CodePen.

    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.

    See the Pen Untitled by shobit1337 (@shobit1337) on CodePen.

    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.

    See the Pen Untitled by shobit1337 (@shobit1337) on CodePen.

    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.

    See the Pen Untitled by shobit1337 (@shobit1337) on CodePen.

    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.

    See the Pen Untitled by shobit1337 (@shobit1337) on CodePen.

    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.

    See the Pen Card--Cloud-UI by shobit1337 (@shobit1337) on CodePen.

    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.

    See the Pen Untitled by shobit1337 (@shobit1337) on CodePen.

    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.

    See the Pen Untitled by shobit1337 (@shobit1337) on CodePen.

    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.

    See the Pen Lists--Cloud-UI by shobit1337 (@shobit1337) on CodePen.

    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.

    See the Pen Modal--Cloud-UI by shobit1337 (@shobit1337) on CodePen.

    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.

    See the Pen Untitled by shobit1337 (@shobit1337) on CodePen.

    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.

    See the Pen StarRating-Cloud-UI by shobit1337 (@shobit1337) on CodePen.

    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.

    See the Pen Toast-Cloud-UI by shobit1337 (@shobit1337) on CodePen.

    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.

    See the Pen Grid--Cloud-UI by shobit1337 (@shobit1337) on CodePen.