Content
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!
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.
<link rel="stylesheet" href="https://elixir-ui.netlify.app/Components/elixir.css" />@import "https://elixir-ui.netlify.app/Components/elixir.css";-
- 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 -
-
- 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 -
-
- 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 -
-
- 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 -
-
- 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 -
-
- 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 -
-
- 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 -
-
- 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 -
-
- 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 -
-
- 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 -
-
- 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 -
-
- 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 -
-
- 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 -
-
- 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";
-
- 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.
- HTML
- CSS
- JavaScript
- 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.
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!
- Fork the Project
- Creata a branch for your feature/ idea. Please do give a good name for the branch that tells about the feature.
- Stage your changes
- Commit your changes
- Push the changes to your remote branch
- Open and Create a PR
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 🌐-
Copyright © 2022
👩💻 Bharati Subramanian