feature: initiated documentation process

.gitignore

@@ -1 +1,2 @@
-node_modules
+node_modules
+Icon?

960.code-workspace

@@ -0,0 +1,8 @@
+{
+	"folders": [
+		{
+			"path": "."
+		}
+	],
+	"settings": {}
+}

CHANGELOG.md

@@ -0,0 +1,67 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+## [unreleased]
+
+### ⚙️ Miscellaneous Tasks
+
+- *(deps-dev)* Bump tape from 5.5.3 to 5.6.3
+- *(deps-dev)* Bump node-sass from 7.0.1 to 8.0.0
+- *(deps-dev)* Bump node-sass from 8.0.0 to 9.0.0
+- *(deps-dev)* Bump tape from 5.6.3 to 5.6.4
+- *(deps-dev)* Bump tape from 5.6.4 to 5.6.5
+- *(deps-dev)* Bump semistandard from 16.0.1 to 17.0.0
+- *(deps-dev)* Bump tape from 5.6.5 to 5.6.6
+- *(deps-dev)* Bump tape from 5.6.6 to 5.7.0
+- *(deps-dev)* Bump tape from 5.7.0 to 5.7.1
+- *(deps-dev)* Bump tape from 5.7.1 to 5.7.2
+- *(deps-dev)* Bump tape from 5.7.2 to 5.7.3
+- *(deps-dev)* Bump tape from 5.7.3 to 5.7.4
+
+## [1.0.6] - 2023-02-02
+
+### 🚀 Features
+
+- Remove "-" by geadline semantics
+
+## [1.0.5] - 2022-08-02
+
+### Bugfix
+
+- Correction on logical assign for size
+
+## [1.0.4] - 2022-07-29
+
+### 🚀 Features
+
+- Minor updates
+
+## [1.0.3] - 2022-07-27
+
+### Bugfix
+
+- Image classes concatenated
+
+## [1.0.2] - 2022-07-27
+
+### 🚀 Features
+
+- Text concatenate
+- Update version
+
+## [1.0.1] - 2022-07-25
+
+### 🚀 Features
+
+- Update flex attributes
+- Update version
+
+## [1.0.0] - 2022-07-25
+
+### 🚀 Features
+
+- First version of scss 960 grid
+- Update scripts
+
+<!-- generated by git-cliff -->

CITATION.cff

@@ -0,0 +1,29 @@
+# This CITATION.cff file was generated with cffinit.
+# Visit https://bit.ly/cffinit to generate yours today!
+
+cff-version: 1.2.0
+title: 960.css
+message: >-
+  If you use this software, please cite it using the
+  metadata from this file.
+type: software
+authors:
+  - email: [email protected]
+    given-names: Anton
+    family-names: Sychev
+    affiliation: too
+repository-code: "https://github.com/klich3/960/"
+abstract: >-
+  NMP module to include shortcuts in your project with Grid
+  960 CSS3
+keywords:
+  - "960"
+  - css
+  - scss
+  - layout
+  - module
+  - npm
+  - grid
+  - html
+license: MIT
+version: 1.0.7

Docs/.vitepress/config.mjs

@@ -0,0 +1,42 @@
+import { defineConfig } from "vitepress";
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+	title: "960.css",
+	description: "Library for implement 960 grid for your site",
+	themeConfig: {
+		logo: "/public/images/960.png",
+		// https://vitepress.dev/reference/default-theme-config
+		nav: [
+			{ text: "Home", link: "/" },
+			{ text: "Documentation", link: "/Documentation/" },
+		],
+
+		sidebar: [
+			{ text: "Home", link: "/" },
+			{
+				text: "Documentation",
+				items: [
+					{ text: "Getting Started", link: "/Documentation/getting-started" },
+					{ text: "Installation", link: "/Documentation/installation" },
+					{ text: "Development/Debug", link: "/Documentation/development" },
+					{ text: "Variables", link: "/Documentation/variables" },
+					{ text: "Grid", link: "/Documentation/grid" },
+					{ text: "Print", link: "/Documentation/print" },
+					{ text: "Debug", link: "/Documentation/debug" },
+					{ text: "Global", link: "/Documentation/global" },
+					{ text: "Text", link: "/Documentation/text" },
+					{ text: "List", link: "/Documentation/list" },
+					{ text: "Image", link: "/Documentation/image" },
+					{ text: "Margin", link: "/Documentation/margin" },
+					{ text: "Padding", link: "/Documentation/padding" },
+					{ text: "Flex", link: "/Documentation/flex" },
+					{ text: "Float", link: "/Documentation/float" },
+					{ text: "Height", link: "/Documentation/height" },
+				],
+			},
+		],
+
+		socialLinks: [{ icon: "github", link: "https://github.com/klich3/960" }],
+	},
+});

Docs/Documentation/debug.md

@@ -0,0 +1,57 @@
+# Debugging and Development with 960.css
+
+When working with the 960.css Grid Lightness Styles, you may find it helpful to use the debugging features provided by the library. Below are some tips and techniques for debugging and development.
+
+## Debug Class
+
+The library includes a debug class that you can apply to elements for easier debugging. Add the `debug` class to an element to apply a red dashed border of 1px, making it visually stand out.
+
+```html
+<div class="debug">
+  <!-- Your content here -->
+</div>
+```
+
+## Media Query Debugging
+For debugging media queries and responsive styles, you can leverage the `@media` rules provided in the `debug/debug.scss`file. These rules apply different border colors based on the screen width.
+
+* Red border (max-width: 768px)
+* Yellow border (min-width: 769px)
+* Green border (min-width: 1220px)
+* Blue border (min-width: 1600px)
+
+```css
+/* Example of media query debugging */
+@media (max-width: 768px) {
+  body {
+    border: 1px solid red;
+  }
+}
+
+@media (min-width: 769px) {
+  body {
+    border: 1px solid yellow;
+  }
+}
+
+/* Add more rules for larger screens as needed */
+```
+
+
+## Browser Developer Tools
+
+Utilize the browser's developer tools to inspect and debug styles applied by the library. You can inspect elements, check applied styles, and troubleshoot any layout or styling issues.
+
+### Chrome Developer Tools
+
+1) Right-click on an element and select "Inspect" to open the Chrome DevTools.
+2) Navigate to the "Elements" tab to inspect HTML structure.
+3) Use the "Styles" tab to view and modify applied styles.
+
+### Firefox Developer Tools
+
+1) Right-click on an element and select "Inspect Element" to open the Firefox DevTools.
+2) Navigate to the "Inspector" tab to inspect HTML structure.
+3) Use the "Rules" tab to view and modify applied styles.
+
+These debugging techniques should help you troubleshoot and optimize your layouts when using 960.css Grid Lightness Styles.

Docs/Documentation/development.md

@@ -0,0 +1,86 @@
+---
+layout: page
+title: Development Guide
+
+# Development Guide for 960.css
+
+Welcome to the development guide for 960.css Grid Lightness Styles. This guide provides information on how to contribute, build, and extend the library for your projects.
+
+## Contributing
+
+If you are interested in contributing to the development of 960.css, follow these steps:
+
+1. Fork the [960.css repository](https://github.com/klich3/960) on GitHub.
+2. Clone your forked repository to your local machine:
+
+   ```
+   git clone https://github.com/your-username/960.git
+   ```
+
+3. Create a new branch for your changes:
+
+   ```
+   git checkout -b feature-name
+   ```
+
+4. Make your changes and commit them:
+
+   ```
+   git add .
+   git commit -m "Add feature or fix"
+   ```
+
+5. Push the changes to your GitHub repository:
+
+   ```
+   git push origin feature-name
+   ```
+
+6. Create a pull request on the [original 960.css repository](https://github.com/klich3/960).
+
+## Building from Source
+
+If you want to build 960.css from source, follow these steps:
+
+1. Clone the repository:
+
+   ```
+   git clone https://github.com/klich3/960.git
+   ```
+
+2. Navigate to the project directory:
+
+   ```
+   cd 960
+   ```
+
+3. Install dependencies:
+
+   ```
+   npm install
+   ```
+
+4. Run the build command:
+
+   ```
+   npm run build:css
+   ```
+
+The compiled CSS files will be available in the `dist` directory.
+
+## Testing
+
+To run tests for 960.css, use the following command:
+
+```bash
+npm run test
+```
+
+## Development Scripts
+Here are some useful scripts for development:
+
+* Live preview: `npm run watch`
+* Lint: `npm run lint`
+* Lint fix: `npm run lint-fix`
+
+Feel free to explore the source code, contribute to the project, and enhance the capabilities of 960.css Grid Lightness Styles.