Updated abstracts and utilities files

README.md

@@ -4,10 +4,54 @@ This is a template for a Sass project. Built with [Vite](https://vitejs.dev/).
 
 ![Landing Page](/public/landing-page.png)
 
+## How to use it
+
 1. Just download the `sass` folder
 2. Include it in your project.
 3. Start using Sass Template
 
+## Folder structure
+
+```bash
+sass/
+├── abstracts/
+│   ├── _colors.scss      # Placeholder for color variables
+│   ├── _mixins.scss      # Placeholder for SCSS mixins
+│   ├── _type.scss        # Placeholder for typography styles
+│   ├── ...               # Etc
+│   ├── _index.scss       # Imports for abstracts
+├── base/
+│   ├── _global.scss      # Global styles for the project
+│   ├── _reset.scss       # CSS reset styles
+│   ├── _root.scss        # Root-level variables and custom properties
+│   ├── ...               # Etc
+│   ├── _index.scss       # Imports for base styles
+├── components/
+│   ├── _buttons.scss     # Styles for buttons
+│   ├── _card.scss        # Styles for card components
+│   ├── _navbar.scss      # Styles for navigation bar
+│   ├── ...               # Etc
+│   ├── _index.scss       # Imports for components
+├── layouts/
+│   ├── _header.scss      # Header layout styles
+│   ├── _footer.scss      # Footer layout styles
+│   ├── _grid.scss        # Grid layout styles
+│   ├── ...               # Etc
+│   ├── _index.scss       # Imports for layouts
+├── pages/
+│   ├── _home.scss        # Home page-specific styles
+│   ├── _about.scss       # About page-specific styles
+│   ├── _contact.scss     # Contact page-specific styles
+│   ├── ...               # Etc
+│   ├── _index.scss       # Imports for pages
+├── utilities/
+│   ├── _helpers.scss     # Utility classes and helpers
+│   ├── _shame.scss       # Temporary fixes or overrides
+│   ├── ...               # Etc
+│   ├── _index.scss       # Imports for utilities
+style.scss                # Main entry point for SCSS
+```
+
 If you want to clone the whole project, run the following:
 
 - `npm install` - it will install all dependencies

sass/abstracts/_functions.scss

@@ -0,0 +1,3 @@
+@function rem($px) {
+  @return $px / 16 * 1rem;
+}

sass/abstracts/_index.scss

@@ -1,3 +1,4 @@
+@forward "varibles";
 @forward "mixins";
-@forward "colors";
-@forward "type";
+@forward "functions";
+@forward "placeholders";

sass/abstracts/_placeholders.scss

@@ -0,0 +1,5 @@
+%btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5em;
+}

sass/abstracts/_type.scss → sass/abstracts/_variables.scss

@@ -1,6 +1,9 @@
-$font-families: (
-  "primary": sans-serif,
-  "secondary": serif,
+$colors: (
+  "text": #eee,
+  "background": #1e232c,
+  "primary": #2f343d,
+  "secondary": #404a5a,
+  "accent": #00f3f3,
 );
 
 /**

sass/base/_reset.scss

@@ -13,6 +13,12 @@ body {
   margin: 0;
 }
 
+input,
+button,
+textarea {
+  font: inherit;
+}
+
 img,
 picture {
   max-width: 100%;

sass/components/_buttons.scss

@@ -7,11 +7,8 @@
 }
 
 .button {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5em;
+  @extend %btn;
   padding: 0.75em 1.5em;
-  font: inherit;
   color: var(--clr-text);
   text-decoration: none;
   background-color: var(--clr-primary);

sass/layouts/_index.scss

@@ -1,2 +1,2 @@
+@forward "home";
 @forward "grid";
-@forward "main";

sass/pages/_home.scss

@@ -0,0 +1,5 @@
+main {
+  display: grid;
+  gap: 1.5rem;
+  justify-items: center;
+}

sass/style.scss

@@ -1,7 +1,5 @@
 @use "base";
-@use "components";
-@use "layouts";
 @use "pages";
+@use "layouts";
+@use "components";
 @use "utilities";
-
-@use "shame";

sass/utilities/_sr-only.scss → sass/utilities/_accessibility.scss

@@ -1,3 +1,4 @@
+/// Screen reader only
 /// @see https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034
 .sr-only {
   border: 0 !important;

sass/utilities/_typography.scss → sass/utilities/_helpers.scss

@@ -1,3 +1,10 @@
+.container {
+  width: 100%;
+  max-width: 70rem;
+  margin-inline: auto;
+  padding-inline: 2rem;
+}
+
 .main-title {
   font-size: var(--fs-900);
   margin-block: 0;

sass/utilities/_index.scss

@@ -1,3 +1,3 @@
-@forward "container";
-@forward "typography";
-@forward "sr-only";
+@forward "helpers";
+@forward "accessibility";
+@forward "shame";