/Focus-UI

Component library

Primary LanguageHTML

☀️ Focus-UI

Component library that allows us to focus on logic part of our web apps by making UI building piece of cake 🍰

⚡️ Quick Start

To use Focus-UI in your projects just copy the starter code given below and paste it in your empty .html file

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  
 <!--Material-Icons-->
  <link
    href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
    rel="stylesheet"
  />
  
 <!--Focus-UI-->
  <link
    rel="stylesheet"
    href="https://focus-ui.netlify.app/css/components.css"
  />
    
 <!--Add-Your-CSS-Above-Title-👇-->
    
 <title>🚀 Starter | Focus-UI</title>
 </head>
 <body>
  <h1>Happy Coding</h1>
 </body>
</html>

Components

  • Avatar

  • Alert

    • Basic
    • Outlined

  • Badge

    • Badge on avatar
    • Badge on icons

  • Button

    • Contained button
    • Outlined button
    • Link button
    • Icon button
    • Floating action button

  • Card

    • Simple text card
    • Simple text card with dismiss
    • Vertical card
    • Text over media
    • Vertical card with badge
    • Horizontal Card

  • Simplified Grids

  • Image

    • Responsive image
    • Image with rounded corners
    • Fully rounded image

  • Input with

    • Default state
    • Success state
    • Warning state
    • Error state
    • Disabled state

  • List

    • Stacked list
    • Spaced list

  • Modal

  • Navigation

  • Rating

  • Slider

    • Basic slider
    • Slider with icon

  • Text Utilities

    • Headings
    • Paragraph
    • Gray text
    • Small text
    • Centered Text

  • Toast