A simple modern, and responsive framework for building components on the fly.
Fashgram Component Library can be found here -> Fashgram
- Light theme
CL-light.mp4
- Dark theme
CL-dark.mp4
To start using this component library, paste the following code snippet in your HTML head tag. Please note that your own stylesheets should be included after this stylesheet to allow customization.
For Light theme:
<link
rel="stylesheet"
href="https://fashgram-ui.netlify.app/lighttheme.css"
/>For Dark theme:
<link
rel="stylesheet"
href="https://fashgram-ui.netlify.app/darktheme.css"
/>You can also import the library in CSS:
<style>
@import url("https://fashgram-ui.netlify.app/darktheme.css");
</style>Alerts are used to notify the user of an important event or action. It can prompt users to take a specific action and can also be dismissed.
You will find the following types of Alert on https://fashgram-ui-documentation.netlify.app/alert.html
Basic and Descriptive Alert
- Info Alert
- Success Alert
- Warning Alert
- Danger Alert
- Themed Alert (primary color)
- Outlined Alert
- Secondary Alert
- Dissmissable Alert
Avatar can be used to show a user's profile picture on the profile information page, on the navigation bar, and in blogs grid items. A total of 5 sizes are available: xl, l, m, s, xs.
You will find the following types of Avatar https://fashgram-ui-documentation.netlify.app/avatar.html
Standard Round Avatars
Squared Avatars
Text Avatars
Avatar with shadow
Badges can be used to relay some information. For example, a status badge can be used to indicate whether a user is online or offline.
You will find the following types of Badge on https://fashgram-ui-documentation.netlify.app/badge.html
Status badge: Status badge indicates whether the user is online, offline or away.
Edit badge: Edit badge can be used to provide an option to change the avatar.
Badge with Icon: Badge can be used on icons to indicate the number of notifications
The button component can be used to trigger an action. This component library supports multiple variants of buttons which can be customized easily.
You will find the following types of Button on https://fashgram-ui-documentation.netlify.app/button.html
Standard Button
- Primary Button
- Secondary Button
Outlined Buttons
- Primary Outline Button
- Secondary Outline Button
Buttons with different sizes: Small and large
Icon button
Floating Action button
Link text button
Disabled buttons
Cards are used to display content and action on a particular topic. It provides a flexible and extensible content container with multiple variants and options.
You will find the following types of Card on https://fashgram-ui-documentation.netlify.app/card.html
Vertical Cards
Horizontal Cards
Cards with badges
Cards with dismiss button
Cards with text overlay
Text only cards
A grid layout can be used to break down your layout into sections.
You will find the following types of Grid on https://fashgram-ui-documentation.netlify.app/grid.html
Grid 50-50
Grid 70-30
Grid with 3 items - 3 col 1 row
Grid with 3 items - 2 col 2 row
Image components are used when you need to display pictures.
You will find the following types of Image on https://fashgram-ui-documentation.netlify.app/image.html
Responsive Image
Responsive Round Image
The Input HTML element is used to create interactive controls for web-based forms in order to accept data from the user.
You will find the following types of Input on https://fashgram-ui-documentation.netlify.app/input.html
Active form input fields
Read only form fields
Form validation for errors
Form validation for check pass
Lists are used to display content in an ordered manner.
You will find the following types of Lists on https://fashgram-ui-documentation.netlify.app/lists.html
Unordered menu List
Notification stacked lists
A modal is a dialog box/popup window that is displayed on top of the current page. It gets closed only with close button on the pop-up.
The navigation is responsive and will open as full/left/right on small screens. The navbar of this documentation site is an example of full variant. Note that for documentation purposes, the burger menu has been disabled. But you can refer to the main documentation navbar for live demo. You will find the following types of Navigations on https://fashgram-ui-documentation.netlify.app/navigation.html
Navigation full - add navigation-full Navigation left - add navigation-left Navigation right - add navigation-right
Ratings are used to show the user the rating of a product or service.
You will find the following types of Ratings on https://fashgram-ui-documentation.netlify.app/rating.html
Read only ratings
Interactive ratings
Sliders can be used to select between a range of values.
You will find the following types of Slider on https://fashgram-ui-documentation.netlify.app/slider.html
Price sliders
Toast provides brief messages about app processes at the bottom of the screen.
You will find the following types of Toast on https://fashgram-ui-documentation.netlify.app/toast.html
Regular Toast
Leading Toast (bottom of the viewport)
Success toast
Danger Toast
Primary toast
Use Typography to format the text of your website.
You will find the following types of Typography on https://fashgram-ui-documentation.netlify.app/typography.html
Headings
Large title and medium title
Text alignment
Additional utility classes for typography
- First: Clone the repository by running the command in your terminal.
git clone https://github.com/muskanbagrecha/component-library.git
-
A directory named "component-library" will be created on your machine.
-
The library has two main CSS stylesheets: lighttheme and darktheme
Toggle between themes by clicking the button in the navbar. If theme does not change, click atleast twice. The bug fix will be addressed in the next iteration.
