tushartiwari7 / elevate-ui

Elevate-UI is a utility-first styling framework with classes like flex, grid, mx-md etc.

Home Page:https://elevate-ui.vercel.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Elevate-ui

Elevate-UI is a utility-first styling framework with classes like flex, grid, mx-md etc. It helps you to build the front-end of your web App in no time.

Furthermore, it also includes plenty of Components build on top of utility classes. That means just grab the code, put it under your codebase, make personalized adjustments using utility Classes and you're good to go. ๐Ÿš€๐Ÿš€๐Ÿš€

Sneak-peek

component library (1)

Components

  • Avatar
  • Alert
  • Badge
  • Button
  • Cards
  • Image
  • Input
  • Forms
  • Lists
  • Navigation
  • Modal
  • Rating
  • Slider
  • Toast
  • Text Utilities
  • Grid Utility

How to Use?

Go to Installation Section of Elevate UI.
And just follow the instructions to feel elevate-ui in your application.

File Structure

Below are the directions for walking through the code maze -

  • index.html

    It Provides the basic layout of our application including Header, Sidebar, Navbar and Documentation area.

  • styles.css

    It collects all CSS to be used in Elevate-UI and helps in linking just one single file in index.html

  • /components

    Components is the folder containing the component pages which includes component documentation, code example and list of variants in nav.html, along with their dedicated css file.

  • /helpers and /layout

    It includes all the extra CSS such as reset.cssand sidebar.css which is needed to build elevate-ui but is not relevant to the user importing elevate-ui.

  • /script

    It contains script to embed the components documentation file inside <main></main> of index.html and navigation file inside <nav></nav>. when the click event is triggeredon sidebar item.

  • /assets

    includes images to demonstrate the components in documentation.

About

Elevate-UI is a utility-first styling framework with classes like flex, grid, mx-md etc.

https://elevate-ui.vercel.app


Languages

Language:HTML 88.3%Language:CSS 10.4%Language:JavaScript 1.3%