SparkUI - component library

About

Spark UI is an easy to use, highly customizable and responsive UI component library to help you design your apps quickly and efficiently.

Tech Stack

HTML, Vanilla CSS

Features

• All components colors, styles can be easily customized using the given css-variables for them!
• You can either import css for all components, or you can import css for a component individually too, thus avoiding extra css.
• The library as well as all components are fully responsive.
• Appropriate color constrast ratio, tested for constrast issues.
• All interactive elements are keyboard accessible.
• Used meta tags with author-name, description, title and keywords.
• Used semantic HTML tags for better accessibility.

List of available components -

1. Avatar

• Types
  • Standard avatars
• Features
  • available in 5 sizes
  • can be given any other size too using given css-variable

2. Alert

• Types
  • Simple info alert
  • Success or Error alert
• Features
  • they can be oriented either at bottom-left or bottom-right of the page

3. Badge

• Types
  • Text with a badge
  • Button with a badge
  • Icon with a badge
  • Avatar with a badge
• Features
  • each is available in 3 sizes

4. Button

• Types
  • Standard buttons
  • Link buttons
  • Icon buttons
  • Floating action buttons
• Features
  • each can be used in 3 variants - primary, secondary and warn
  • colors, border-styles can be changed using css-variables

5. Card

• Types
  • Basic vertical card
  • Basic vertical card with header
  • Basic vertical card with icons only
  • Basic vertical card with buttons only
  • Basic vertical card with text overlay
  • Basic vertical card with text only
  • Basic vertical card with badge
  • Basic vertical card with dismiss
  • Basic horizontal card
• Features
  • All elements of card are customizable

6. Image

• Types
  • Responsive Image
  • Small round Image
• Features
  • responsive image can be given any width
  • round image crops itself to maintain aspect ratio

7. Input

• Types
  • Input textbox
  • Input validation
• Features
  • validation has 3 variants - error, warn and success

8. Modal

• Types
  • Alert modal
  • Alert modal with stacked buttons
  • Simple modal
  • Confirmation modal
  • Confirmation modal with stacked buttons
• Features
  • stacked buttons variant for wider button text
  • can have scrollbar for options if user wants

9. Navigation

• Types
  • Movable navigation
  • Fixed navigation
• Features
  • each have 2 variants - standard and short

10. Rating

• Types
  • Outline-only star rating
  • Filled star rating
• Features
  • size, spacing-between can be adjusted using css-variables

11. Toast

• Types
  • Standard toast with buttons
• Features
  • it can be oriented either at bottom-left or bottom-right of the page

Things I want to add or improve

• Add more components in the library
• Use utility classes
• Add page navigation on right side

Connect With Me

• Twitter – @mohitdhatrak
• LinkedIn – @mohitdhatrak
• All social links – @mohitdhatrak