From db36a786c3d1f78bf60a98df27fc98c35b881d9b Mon Sep 17 00:00:00 2001 From: Doston Nabotov Date: Mon, 25 Nov 2024 22:09:04 +0200 Subject: [PATCH] Updated `abstracts` and `utilities` files --- README.md | 44 +++++++++++++++++++ sass/abstracts/_colors.scss | 7 --- sass/abstracts/_functions.scss | 3 ++ sass/abstracts/_index.scss | 5 ++- sass/abstracts/_placeholders.scss | 5 +++ .../abstracts/{_type.scss => _variables.scss} | 9 ++-- sass/base/_reset.scss | 6 +++ sass/components/_buttons.scss | 5 +-- sass/components/_card.scss | 0 sass/layouts/_index.scss | 2 +- sass/layouts/_main.scss | 5 --- sass/pages/_home.scss | 5 +++ sass/style.scss | 6 +-- .../{_sr-only.scss => _accessibility.scss} | 1 + sass/utilities/_container.scss | 8 ---- .../{_typography.scss => _helpers.scss} | 7 +++ sass/utilities/_index.scss | 6 +-- sass/{ => utilities}/_shame.scss | 0 18 files changed, 87 insertions(+), 37 deletions(-) delete mode 100644 sass/abstracts/_colors.scss create mode 100644 sass/abstracts/_functions.scss create mode 100644 sass/abstracts/_placeholders.scss rename sass/abstracts/{_type.scss => _variables.scss} (72%) create mode 100644 sass/components/_card.scss delete mode 100644 sass/layouts/_main.scss rename sass/utilities/{_sr-only.scss => _accessibility.scss} (96%) delete mode 100644 sass/utilities/_container.scss rename sass/utilities/{_typography.scss => _helpers.scss} (53%) rename sass/{ => utilities}/_shame.scss (100%) diff --git a/README.md b/README.md index 72e2d82..4f6e437 100644 --- a/README.md +++ b/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 diff --git a/sass/abstracts/_colors.scss b/sass/abstracts/_colors.scss deleted file mode 100644 index 2371fb1..0000000 --- a/sass/abstracts/_colors.scss +++ /dev/null @@ -1,7 +0,0 @@ -$colors: ( - "text": #eee, - "background": #1e232c, - "primary": #2f343d, - "secondary": #404a5a, - "accent": #00f3f3, -); diff --git a/sass/abstracts/_functions.scss b/sass/abstracts/_functions.scss new file mode 100644 index 0000000..184ae2c --- /dev/null +++ b/sass/abstracts/_functions.scss @@ -0,0 +1,3 @@ +@function rem($px) { + @return $px / 16 * 1rem; +} diff --git a/sass/abstracts/_index.scss b/sass/abstracts/_index.scss index de08034..b501df7 100644 --- a/sass/abstracts/_index.scss +++ b/sass/abstracts/_index.scss @@ -1,3 +1,4 @@ +@forward "varibles"; @forward "mixins"; -@forward "colors"; -@forward "type"; +@forward "functions"; +@forward "placeholders"; diff --git a/sass/abstracts/_placeholders.scss b/sass/abstracts/_placeholders.scss new file mode 100644 index 0000000..2bbd61b --- /dev/null +++ b/sass/abstracts/_placeholders.scss @@ -0,0 +1,5 @@ +%btn { + display: inline-flex; + align-items: center; + gap: 0.5em; +} diff --git a/sass/abstracts/_type.scss b/sass/abstracts/_variables.scss similarity index 72% rename from sass/abstracts/_type.scss rename to sass/abstracts/_variables.scss index de15c48..edb55ab 100644 --- a/sass/abstracts/_type.scss +++ b/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, ); /** diff --git a/sass/base/_reset.scss b/sass/base/_reset.scss index fc0fc5f..cb7672a 100644 --- a/sass/base/_reset.scss +++ b/sass/base/_reset.scss @@ -13,6 +13,12 @@ body { margin: 0; } +input, +button, +textarea { + font: inherit; +} + img, picture { max-width: 100%; diff --git a/sass/components/_buttons.scss b/sass/components/_buttons.scss index caac213..f749c7d 100644 --- a/sass/components/_buttons.scss +++ b/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); diff --git a/sass/components/_card.scss b/sass/components/_card.scss new file mode 100644 index 0000000..e69de29 diff --git a/sass/layouts/_index.scss b/sass/layouts/_index.scss index c719329..f842b46 100644 --- a/sass/layouts/_index.scss +++ b/sass/layouts/_index.scss @@ -1,2 +1,2 @@ +@forward "home"; @forward "grid"; -@forward "main"; diff --git a/sass/layouts/_main.scss b/sass/layouts/_main.scss deleted file mode 100644 index 4fd9c5b..0000000 --- a/sass/layouts/_main.scss +++ /dev/null @@ -1,5 +0,0 @@ -main { - display: grid; - gap: 1.5rem; - justify-items: center; -} diff --git a/sass/pages/_home.scss b/sass/pages/_home.scss index e69de29..4fd9c5b 100644 --- a/sass/pages/_home.scss +++ b/sass/pages/_home.scss @@ -0,0 +1,5 @@ +main { + display: grid; + gap: 1.5rem; + justify-items: center; +} diff --git a/sass/style.scss b/sass/style.scss index fb329c1..fb44776 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -1,7 +1,5 @@ @use "base"; -@use "components"; -@use "layouts"; @use "pages"; +@use "layouts"; +@use "components"; @use "utilities"; - -@use "shame"; diff --git a/sass/utilities/_sr-only.scss b/sass/utilities/_accessibility.scss similarity index 96% rename from sass/utilities/_sr-only.scss rename to sass/utilities/_accessibility.scss index 77a1010..bdefbec 100644 --- a/sass/utilities/_sr-only.scss +++ b/sass/utilities/_accessibility.scss @@ -1,3 +1,4 @@ +/// Screen reader only /// @see https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034 .sr-only { border: 0 !important; diff --git a/sass/utilities/_container.scss b/sass/utilities/_container.scss deleted file mode 100644 index d214356..0000000 --- a/sass/utilities/_container.scss +++ /dev/null @@ -1,8 +0,0 @@ -@use "../abstracts" as *; - -.container { - width: 100%; - max-width: 70rem; - margin-inline: auto; - padding-inline: 2rem; -} diff --git a/sass/utilities/_typography.scss b/sass/utilities/_helpers.scss similarity index 53% rename from sass/utilities/_typography.scss rename to sass/utilities/_helpers.scss index 94c19c3..f2b7603 100644 --- a/sass/utilities/_typography.scss +++ b/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; diff --git a/sass/utilities/_index.scss b/sass/utilities/_index.scss index 7140c6d..726c5af 100644 --- a/sass/utilities/_index.scss +++ b/sass/utilities/_index.scss @@ -1,3 +1,3 @@ -@forward "container"; -@forward "typography"; -@forward "sr-only"; +@forward "helpers"; +@forward "accessibility"; +@forward "shame"; diff --git a/sass/_shame.scss b/sass/utilities/_shame.scss similarity index 100% rename from sass/_shame.scss rename to sass/utilities/_shame.scss