Qwaderton · atarwn · Mar 14, 2025 · Oct 28, 2024 · Oct 28, 2024 · Oct 28, 2024
diff --git a/.hgignore b/.hgignore
@@ -0,0 +1,2 @@
+.git
+.git/*
diff --git a/LICENSE b/LICENSE
diff --git a/README.md b/README.md
@@ -0,0 +1,75 @@
+# Qwaderton/Styles
+
+> [!WARNING]
+> This project is at an early stage of development. We are not responsible for any difficulties you may encounter.
+
+**Qwaderton/Styles** is a simple component library designed to enhance your website with ready-to-use styles. Think of it as a simpler and prettier alternative to Bootstrap, providing beautiful design elements right out of the box.
+
+## Table of Contents
+- [Installation](#installation)
+- [Usage](#usage)
+- [Components Included](#components-included)
+- [Customization](#customization)
+- [Contributing](#contributing)
+- [License](#license)
+- [Contact](#contact)
+
+## Installation
+
+To get started, download the library from our Releases page or directly via **Code -> Download ZIP** to obtain the latest version (please note it may not be stable). 
+
+1. Extract the downloaded archive.
+2. Move the `src` folder to your project directory. 
+3. Import the styles into your site by linking to `/src/styles/styles.css`.
+
+## Usage
+
+Qwaderton/Styles is perfect for:
+- Project websites
+- Personal pages
+- Small web applications
+
+## Components Included
+
+The library includes a variety of components, such as:
+- Buttons
+- Input fields
+- Some form elements
+- Cards
+- Grid layouts
+- Header/Footer
+- Navigation
+- Side menus
+
+## Customization
+
+You can customize the styles by modifying variables in the `_variables.scss` file. Future updates will introduce ‘add-ons’ that enhance certain elements of your site. For instance, the **Bubble Add-On** will create interesting 3D effects from simple shadows.
+
+## Contributing
+
+We welcome contributions! Here are some recommendations for contributing effectively:
+- Avoid writing styles inside an object for more than 7 lines consecutively (longer is fine if it makes sense).
+- Comment on what each style you write does for clarity.
+- Use SCSS for writing styles as it enhances readability and speeds up development.
+- If writing styles for a component, include its name at the top, e.g.: 
+  ```scss
+  // Main container of the grid
+  .grid {
+    ...
+  }
+  // Basic column class with padding variable
+  .col {
+    ...
+  }
+  ```
+- Create a separate file for each component or group of similar components to keep the structure organized.
+
+## License
+
+This project is licensed under the [BSD 4-Clause License](LICENSE).
+
+## Contact
+
+For any questions, feel free to join our communities:
+- [Discord Server](https://discord.gg/qtjrKnCk8y)
+- [Telegram Group](https://t.me/+1VzhavR1KM40NjE6)
diff --git a/bs.htm b/bs.htm
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Bootstrap Example</title>
+  <!-- Подключаем Bootstrap CSS -->
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+</head>
+<body>
+
+  <!-- Навигационная панель -->
+  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+    <div class="container">
+      <a class="navbar-brand" href="#">MySite</a>
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarNav">
+        <ul class="navbar-nav ms-auto">
+          <li class="nav-item">
+            <a class="nav-link active" href="#">Home</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">Features</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">Pricing</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">Contact</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+
+  <!-- Основной контент -->
+  <div class="container my-5">
+    <h1 class="text-center mb-4">Welcome to My Bootstrap Site</h1>
+    <div class="row">
+      <!-- Карточка 1 -->
+      <div class="col-md-4">
+        <div class="card">
+          <img src="https://lipsum.app/300x300" class="card-img-top" alt="Image 1">
+          <div class="card-body">
+            <h5 class="card-title">Card Title 1</h5>
+            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+            <a href="#" class="btn btn-primary">Go somewhere</a>
+          </div>
+        </div>
+      </div>
+      <!-- Карточка 2 -->
+      <div class="col-md-4">
+        <div class="card">
+          <img src="https://lipsum.app/300x300" class="card-img-top" alt="Image 2">
+          <div class="card-body">
+            <h5 class="card-title">Card Title 2</h5>
+            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+            <a href="#" class="btn btn-primary">Go somewhere</a>
+          </div>
+        </div>
+      </div>
+      <!-- Карточка 3 -->
+      <div class="col-md-4">
+        <div class="card">
+          <img src="https://lipsum.app/300x300" class="card-img-top" alt="Image 3">
+          <div class="card-body">
+            <h5 class="card-title">Card Title 3</h5>
+            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+            <a href="#" class="btn btn-primary">Go somewhere</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Футер -->
+  <footer class="bg-dark text-light py-4">
+    <div class="container text-center">
+      <p>&copy; 2024 MySite. All rights reserved.</p>
+    </div>
+  </footer>
+
+  <!-- Подключаем Bootstrap JS -->
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+</body>
+</html>