Skip to content

bharati-21/elixir-ui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation


Elixir UI

Elixir UI

The perfect library brewed for styling your website.


Content
  1. Introduction
  2. How To Use
  3. Components
  4. Technology/ Languages Used
  5. How to Run Locally
  6. How to Contribute
  7. Social Links

📌 Introduction

Elixir UI is an open source CSS library aimed at quick, responsive, and simple development of webites. With Elixir, you can leave your design worries and get started with a completely logic-driven development for your websites!


How To Use

Visit Elixir UI Documentation Website and check out the documentation for the library. To use Elixir in your project, include the CSS file in the main stylesheet using @import or in the <head> of your index.html file using <link>.
Copy-paste the below code in the <head> section of your HTML files to load predefined styles, components and utilities.

Import in the <head> of HTML file:

<link rel="stylesheet" href="https://elixir-ui.netlify.app/Components/elixir.css" />

Import in your main CSS stylesheet:

@import "https://elixir-ui.netlify.app/Components/elixir.css";

Components

  • Alert

    • Elixir offers simple alerts and alerts with a close icon in the following themes - primary, secondary, success, warning, and error.
    • To use alerts in your project, add the following URL-
    • in the HTML file
        <link rel="stylesheet" href="https://elixir-ui.netlify.app/Components/alerts/alert.css" />
    • OR, in the CSS file
    @import "https://elixir-ui.netlify.app/Components/alerts/alert.css";
    • Screenshot - Screenshot of Alert component in the documentation page
  • Avatar

    • Elixir offers the following range of avatars - Circle Avatars, Square Avatars, and Text Avatars in 5 different sizes - extra small, small, medium, large, and extra large.
    • To use avatars in your project, add the folloeing URL in-
    • the HTML file
        <link rel="stylesheet" href="https://elixir-ui.netlify.app/Components/avatars/avatar.css" />
    • OR, the CSS file
    @import "https://elixir-ui.netlify.app/Components/avatars/avatar.css";
    • Screenshot - Screenshot of Avatar component in the documentation page
  • Badge

    • Elixir offers the following range of badges - Status badges, Notification/ Number badges, and Text Badges.
    • Status badges come with 4 different status - available, idle, do not disturb, and away.
    • Notification badges work with icons/ buttons of small sizes and come with 2 themes- primary and secondary
    • Text badges can be of 2 types - square or pill shaped.
    • To use badges in your project, add the following URL in -
    • the HTML file
        <link rel="stylesheet" href="https://elixir-ui.netlify.app/Components/badges/badge.css" />
    • OR, in the CSS file
    @import "https://elixir-ui.netlify.app/Components/badges/badge.css";
    • Screenshot - Screenshot of Badge component in the documentation page
  • Button

    • Elixir offers the following range of buttons - Solid buttons, Outlined buttons, Button with icon, Link buttons, Buttons with text and icon, and Floating action buttons.
    • Buttons can be of the following themes- dark, light, primary, and secondary.
    • To use buttons in your project, add the following URL in-
    • the HTML file
        <link rel="stylesheet" href="https://elixir-ui.netlify.app/Components/buttons/button.css" />
    • OR, in the CSS file
    @import "https://elixir-ui.netlify.app/Components/buttons/button.css";
    • Screenshot - Screenshot of Button component in the documentation page
  • Card

    • Elixir offers the following range of cards - vertical card, horizontal card, card with badge, card with dismiss button, card with overlay text, card with only text, and card with shadow.
    • To use cards in your project, add the following URL in the -
    • HTML file
        <link rel="stylesheet" href="https://elixir-ui.netlify.app/Components/cards/card.css" />
    • OR, CSS file
    @import "https://elixir-ui.netlify.app/Components/cards/card.css";
    • Screenshot - Screenshot of Card component in the documentation page
  • Grid

    • Elixir offers the following grid layouts as classes - 2 column grid, 3 column grid, and 4 column grid.
    • To create grid layouts in your project, add the following URL in the-
    • HTML file
        <link rel="stylesheet" href="https://elixir-ui.netlify.app/Components/grid/grid.css" />
    • OR, CSS file
    @import "https://elixir-ui.netlify.app/Components/grid/grid.css";
    • Screenshot - Screenshot of Grid component in the documentation page
  • Image

    • Elixir offers the following types of image components - Responsive image, Image with rounded corners, and Round images.
    • To use the image component in your project, add the following URL in the-
    • HTML file
        <link rel="stylesheet" href="https://elixir-ui.netlify.app/Components/images/image.css" />
    • OR, CSS file
    @import "https://elixir-ui.netlify.app/Components/images/image.css";
    • Screenshot - Screenshot of Image component on the documentation page
  • Input

    • Elixir offers the following types of input components - Default Inputs, Inline Inputs, Inputs with success validations, Inputs with warning validations, Inputs with error validations, and Textbox.
    • To use the input component in your project, add the following URL in the-
    • HTML file
        <link rel="stylesheet" href="https://elixir-ui.netlify.app/Components/input/input.css" />
    • OR, CSS file
    @import "https://elixir-ui.netlify.app/Components/input/input.css";
    • Screenshot - Screenshot of Input component in the documentation page
  • List

    • Elixir offers the following type of lists - Spaced List, Stacked List, and Inline List.
    • To use the list component to your project, add the following URL in the -
    • HTML file
        <link rel="stylesheet" href="https://elixir-ui.netlify.app/Components/lists/list.css" />
    • OR, CSS file
    @import "https://elixir-ui.netlify.app/Components/lists/list.css";
    • Screenshot - Screenshot of List componentin the documentation page
  • Modal

    • Elixir offers a simple modal with text and action buttons.
    • To use a modal in your project, add the following URL in the-
    • HTML file
        <link rel="stylesheet" href="https://elixir-ui.netlify.app/Components/modal/modal.css" />
    • OR, CSS file
    @import "https://elixir-ui.netlify.app/Components/modal/modal.css";
    • Screenshot - Screenshot of Modal component in the documentation page
  • Navigation

    • Elixir offers a simple, responsive navigation bar that contains the following parts - a logo/ brand name, search bar, and navbar actions/ navigation links.
    • To use the navbar in your project, add the following URL in the-
    • HTML file
        <link rel="stylesheet" href="https://elixir-ui.netlify.app/Components/navigation/navigation.css" />
    • OR, CSS file
    @import "https://elixir-ui.netlify.app/Components/navigation/navigation.css";
    • Screenshot - Screenshot of Navigation component in the documentation page
  • Rating

    • Elixir offers 2 types of ratings components - rating badge and star product rating.
    • To use the rating components in your project, add the following URL in the-
    • HTML file
        <link rel="stylesheet" href="https://elixir-ui.netlify.app/Components/rating/rating.css" />
    • OR, CSS file
    @import "https://elixir-ui.netlify.app/Components/rating/rating.css";
    • Screenshot - Screenshot of Rating component in the documentation page
  • Slider

    • Elixir offers a simple range slider that displays the min value, max value and a customized slider.
    • To use a slider in your project, add the following URL in the-
    • HTML file
        <link rel="stylesheet" href="https://elixir-ui.netlify.app/Components/slider/slider.css" />
    • OR, CSS file
    @import "https://elixir-ui.netlify.app/Components/slider/slider.css";
    • Screenshot - Screenshot of Slider component in the documentation page
  • Toast

    • Elixir offers one toast - a Simple Toast which is dark themed and appears in the bottom left corner.
    • To use a toast in your project, add the following URL in the -
    • HTML file
        <link rel="stylesheet" href="https://elixir-ui.netlify.app/Components/toast/toast.css />
    
    • OR, CSS file
    @import "https://elixir-ui.netlify.app/Components/toast/toast.css";

    Screenshot of Toast component in the documentation page

  • Typography

    • Elixir offers the following typography utilities - Heading Utilities, Text Utilities, Colored Text Utilities, and Aligned Text Utilities.
    • To create text content with the typograpgy utility to your project, add the following URL in the-
    • HTML file
        <link rel="stylesheet" href="https://elixir-ui.netlify.app/Components/typography/typography.css" />
    • OR, CSS file
    @import "https://elixir-ui.netlify.app/Components/typography/typography.css";

- Other utilities include - Flexbox layout, margin, padding, and variables.

Technology/ Languages Used

  • HTML
  • CSS
  • JavaScript


How to Run locally:

  • To run this project locally, use the following command in your CLI:
    git clone https://github.com/bharati-21/elixir-ui.git
  • Open any code editor of your choice and run locally.


How to Contribute

Contributions and ideas to this library are more than welcome!
If you want to contribute or have ideas for this project, just fork the repo and create a PR. If you spot a bug, you are more than welcome to open an issue! Do ⭐ this project!

Contribution Guidelines-

  1. Fork the Project
  2. Creata a branch for your feature/ idea. Please do give a good name for the branch that tells about the feature.
  3. Stage your changes
  4. Commit your changes
  5. Push the changes to your remote branch
  6. Open and Create a PR

Social Links

Let's connect and talk about development, music, books and much more 🌠!

GitHub Profile  ·  LinkedIn Profile  ·  Twitter Profile  ·  Dev.to Blogs  · 


Check out my developer portfolio 🌐-

Bharati Subramanian


Copyright © 2022
👩‍💻 Bharati Subramanian