SNKRS UI
Design your dream project better and faster.
What is SNKRS UI?
SNKRS UI is a CSS library, integrated with pre-defined styled classes, for a quick creation of websites.
How to set it up?
To get the CSS styles of the components, add the following line of code in the head tag of your HTML document.
<link rel="stylesheet" href="https://snkrs-ui.netlify.app/components.css" />To get the JavaScript functionality, add the following code at the end of the body tag of your HTML document.
<script src="https://snkrs-ui.netlify.app/main.js"></script>What are the components provided by SNKRS UI?
- Alert
- Avatar
- Badge
- Button
- Card
- Grid
- Image
- Input
- Lists
- Modal
- Navigation
- Rating
- Snackbar
- Text Utilities
Alert
An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task. You can find the documentation here. The alert offers four severity levels that set a distinctive icon and color:
- Error Alert
- Warning Alert
- Information Alert
- Success Alert
Avatar
The Avatar component is used to represent a user and displays the profile picture, initials or fallback icon. You can find the documentation here. Types of avatars:
- Circular
- Square
- Rounded Square Also available in different sizes.
Badge
Badge generates a small badge to the top-right of its child(ren). Badges usually depict the status of the user. You can find the documentation here. Types of Badges:
- Avatar with badge
- Icons with badge Also they are of adaptable sizes.
Button
Buttons allow users to take actions, and make choices, with a single tap. You can find the documentation here. Types:
- Contained buttons
- Link buttons
- Default buttons
- Outlined buttons
- Buttons with icons
- Floating action buttons
Card
They contain a collected information about a similar topic. Cards come in a lot of variety, some of have text or images or both and also come Call to Action Buttons. You can find the documentation here.
- Card with Badge
- Card with Dismiss
- Text Only Cards
- Card with text overlay
- Card with shadow
- Horizontal Card
Grid
Grid is a two-dimensional layout. Items could be placed explicitly or implicitily in the grid. It helps to build complex layouts. You can find the documentation here.
- Two Columns Grid
- Three Columns Grid
Image
An image is a graphic representation of something. Images can be made responsive (so that they don't jump out of its parent container), have rounded corners or can look like a circle. You can find the documentation here. Types:
- Responsive Image
- Rounded Corners Image
- Circle Image
Input
Inputs are used to take information from the user, and then save the data to the server, accordingly. You can find the documentation here. Type:
- Text
- Disabled
- Error Input
List
Lists are continuous, vertical indexes of text or images. They are composed of items containing primary and supplemental actions, which are represented by icons and text. You can find the documentation here. Types:
- Simple Spaced List
- Stacked List
Modal
The modal component provides a solid foundation for creating dialogs, popovers, lightboxes, or whatever else. You can find the documentation here.
Navigation
The Navigation Component is used a Navigation Bar on top of every page to navigate among various sections of the website. You can find the documentation here.
Rating
Rating is powerful tool used for product reviews in review section. You can find the documentation here.
Snackbar
Snackbar display messages related to an interaction happened between user and the website. They usually stay on the screen for 2-3 seconds and then disappear. You can find the documentation here.
Text Utilities
These includes everything about texts: heading, font family, alignments, font weights, special text styles, etc. You can find the documentation here.
Have a look at the implementation of SNKRS UI. Watch a walkthrough video @ Walthrough Video