Component library that allows us to focus on logic part of our web apps by making UI building piece of cake 🍰
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>-
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