Arc UI is an open source styling framework, which helps Developers to use best styles and components, by using pre-defined classnames. Arc UI helps you to quickly build your Dream Project, by focusing much on Functionality.
Checkout the Live Link
In order to introduce Arc UI to your project, copy the link given below and paste it in the head tag of your html.
<link rel="stylesheet" href="https://arcui.netlify.app/styles/components.css"><link rel="stylesheet" href="https://arcui.netlify.app/pages/components/componentName/componentName.css"><link rel="stylesheet" href="https://arcui.netlify.app/scripts/componentName.js">- HTML
- CSS
- JavaScript
Checkout Our Documentation Site
- Alerts
- Standard Alerts
- Outline Alerts
- Alerts with Icon
- Avatars
- Square Avatars
- Round Avatars
- Round Avatars with different sizes
- Badges
- Badge on Avatars
- Badge on Icons
- Buttons
- Standard Buttons
- Outline Buttons
- Link Buttons
- Icon Buttons
- Floating Buttons
- Cards
- Vertical Card
- Horizontal Card
- Vertical Card with Badge
- Vertical Card with Dismiss
- Vertical Card with Text Overlay
- Text Only Card
- Vertical Card with Box Shadow
- Grids
- Grid with 2 columns
- Grid with 3 columns
- Images
- Responsive Image
- Round Image
- Responisve Image with Size Variant
- Round Image with Size Variant
- Inputs
- Text Input
- Validation Input
- Lists
- Stacked Lists
- Spaced Lists
- Modal
- Simple Modal
- Navigation
- Standard Navigation
- Standard Navigation without Icons
- Short Navigation
- Rating
- Simple Rating
- Slider
- Simple Slider
- Toast
- Basic Toast
- Toast with Close Button
Here is a quick example to get you started, it's all you need:
<head>
<!-- Google Fonts CDN Link -->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&display=swap" />
<!-- Font Awesome CDN Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Components Styles Link -->
<link rel="stylesheet" href="https://arcui.netlify.app/styles/components.css" />
<!-- Utility Classes Styles Link -->
<link rel="stylesheet" href="https://arcui.netlify.app/styles/typography.css" />
<link rel="stylesheet" href="https://arcui.netlify.app/styles/flex.css" />
<link rel="stylesheet" href="https://arcui.netlify.app/styles/margin.css" />
<link rel="stylesheet" href="https://arcui.netlify.app/styles/padding.css" />
<!-- Custom User Style Link Comes here -->
<title>Demo</title>
</head>
<body>
<button type="button" class="btn btn-primary m-2">Primary</button>
<button type="button" class="btn btn-secondary m-2">Secondary</button>
<button type="button" class="btn btn-success m-2">Success</button>
<button type="button" class="btn btn-danger m-2">Danger</button>
<button type="button" class="btn btn-warning m-2">Warning</button>
<button type="button" class="btn btn-dark m-2">Dark</button>
</body>
</html>Glad to see you here! Show some love by starring this repo!
