Completed Component Library

.gitignore

@@ -0,0 +1,35 @@
+# File created using '.gitignore Generator' for Visual Studio Code: https://bit.ly/vscode-gig
+
+# Created by https://www.toptal.com/developers/gitignore/api/visualstudiocode,linux
+# Edit at https://www.toptal.com/developers/gitignore?templates=visualstudiocode,linux
+
+### Linux ###
+*~
+
+# temporary files which can be created if a process still has a handle open of a deleted file
+.fuse_hidden*
+
+# KDE directory preferences
+.directory
+
+# Linux trash folder which might appear on any partition or disk
+.Trash-*
+
+# .nfs files are created when an open file is removed but is still being accessed
+.nfs*
+
+### VisualStudioCode ###
+.vscode/*
+!.vscode/tasks.json
+!.vscode/launch.json
+*.code-workspace
+
+### VisualStudioCode Patch ###
+# Ignore all local history of files
+.history
+.ionide
+
+# End of https://www.toptal.com/developers/gitignore/api/visualstudiocode,linux
+
+# Custom rules (everything added below won't be overriden by 'Generate .gitignore File' if you use 'Update' option)
+

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

README.md

@@ -1,2 +1,31 @@
-# Component_Library
-Component Library for My Projects
+# Component Library
+
+Component Library for personal projects built with html, css prismjs and vanilla-js.
+
+## Features
+
+- Contains various ready to use components
+- Fully responsive
+
+## Components
+
+- Avatar
+- Alert
+- Badge
+- Buttons
+- Cards
+- Image
+- Input
+- Lists
+- Navigation
+- Modal
+- Rating
+- Slider
+- Simplified Grid
+- Text Utilities
+- Snackbar
+
+## Preview
+
+https://user-images.githubusercontent.com/39916455/179960938-2baba1a9-3b74-4c34-b57f-68c399b2f9bf.mp4
+

components/.gitignore

@@ -0,0 +1 @@
+/*.html

components/Text-Utilities.css

@@ -0,0 +1,48 @@
+@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap");
+@import url("./resources/prism.css");
+@import url("./utils.css");
+@import url("./lists.css");
+
+:root {
+  --primary-font: Lato;
+  --primary-color: #111827;
+  --border-color: #e5e5e5;
+  --gray-text: #6b7280;
+}
+
+.spaced-list {
+  margin: 1rem;
+}
+
+/* Heading */
+.heading {
+  color: var(--primary-color);
+
+  font-family: var(--primary-font);
+
+  max-width: fit-content;
+}
+
+/* Small Text */
+.small-text {
+  color: var(--primary-color);
+
+  font-family: var(--primary-font);
+
+  font-size: 0.75rem;
+
+  max-width: fit-content;
+}
+
+/* Gray Text */
+.gray-text {
+  color: var(--gray-text);
+
+  font-family: var(--primary-font);
+
+  width: fit-content;
+}
+
+.spaced-list__item--center {
+  text-align: center;
+}

components/alerts.css

@@ -0,0 +1,76 @@
+@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap");
+@import url("../resources/prism.css");
+@import url("./utils.css");
+* {
+  box-sizing: border-box;
+}
+
+:root {
+  --primary-font: Lato;
+  --success-alert-backcolor: #c6f4d5;
+  --success-alert-fontcolor: #3bb54a;
+  --error-alert-backcolor: #fdd7d7;
+  --error-alert-fontcolor: #d1403f;
+  --warning-alert-backcolor: #feebc8;
+  --warning-alert-fontcolor: #f0c419;
+  --info-alert-backcolor: #bee3f8;
+  --info-alert-fontcolor: #447eae;
+  --alert-font-size: 1.3rem;
+  --alert-icon-margin-right: 1rem;
+  --alert-padding: 1rem;
+}
+
+.alerts {
+  width: 100%;
+}
+
+.alerts--common {
+  display: flex;
+  align-items: center;
+  padding: var(--alert-padding);
+
+  font-size: var(--alert-font-size);
+  font-family: var(--primary-font);
+
+  border-radius: 0.5rem;
+}
+
+.alerts--margin--common {
+  margin-right: var(--alert-icon-margin-right);
+}
+
+.alerts__success {
+  background-color: var(--success-alert-backcolor);
+  color: var(--success-alert-fontcolor);
+}
+
+.alerts__error {
+  background-color: var(--error-alert-backcolor);
+  color: var(--error-alert-fontcolor);
+}
+
+.alerts__warning {
+  background-color: var(--warning-alert-backcolor);
+  color: var(--warning-alert-fontcolor);
+}
+
+.alerts__info {
+  background-color: var(--info-alert-backcolor);
+  color: var(--info-alert-fontcolor);
+}
+
+.alerts .language-markup {
+  height: 10rem;
+}
+
+@media screen and (max-width: 620px) {
+  .alerts--common {
+    margin: 0 1rem 0 1rem;
+  }
+}
+
+@media screen and (min-width: 620px) {
+  .alert--reduce-width {
+    width: 50%;
+  }
+}

components/avatar.css

@@ -0,0 +1,57 @@
+* {
+  box-sizing: border-box;
+}
+
+:root {
+  --border-color: #e5e5e5;
+}
+
+.avatar {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border: 1px solid var(--border-color);
+  border-radius: 5px;
+}
+
+.avatar-display {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  align-items: center;
+
+  padding: 1rem;
+  border-bottom: 0;
+}
+
+.language-markup {
+  margin: 0;
+}
+
+.img-big {
+  max-width: 96px;
+}
+
+.img-medium {
+  max-width: 64px;
+}
+
+.img-small {
+  max-width: 48px;
+}
+
+.img-ex-small {
+  max-width: 32px;
+}
+/* utils */
+
+.img-utils {
+  margin: 1.7rem;
+  width: 100%;
+  border-radius: 50%;
+}
+
+.avatar .language-markup {
+  overflow-y: hidden;
+  overflow-x: scroll;
+}