🎨 Useful Things to SCSS

Useful things that I use in SCSS and that make the work easier.

---

📌 Table of Contents

• 💡 Features
• 🎯 Purpose
• 🛠 Installation
• 📝 Utilization
  • 💽 Reset
  • 🎨 Colors
  • ☂ Shadow
  • 🎢 Transition
  • 📦 Flexbox
  • 🖥 Grid
  • 📏 Spacing
  • 🧩 Components
• 🤝 Contributing
• ⚙ Technologies Used
• 👋 Author
• 🧾 License

---

💡 Features

• 📁 Organization
• 💽 Reset css
• 🎨 Colors
• ☂ Shadows styles
• 🎢 Transition
• 📦 Simplified Flexbox
• 🖥 Simplified grids into classes
• 📏 Spacing classes
• 🧩 Components basics like
  • Buttons and animation style
  • Card
  • Navbar
  • Navbar vertical
  • Footer
  • Scroll

---

🎯 Purpose

My purpose with this repository is to share my SCSS codes and also receive contributions to grow knowledge.

---

🛠 Installation

First you need to download git initially

Run this command to clone the repository:

git clone https://github.com/AleNoia/useful-thingss-SCSS.git

Run a compiler SCSS like Live SASS

---

📝 Utilization

This repository has the purpose of storing SCSS codes, so there are some folder divisions according to each functionality.

/usefulScss
 |
 ├── /Components
 |   ├── _buttons.scss
 |   ├── _card.scss
 |   ├── _footer.scss
 |   ├── _navbarVertical.scss
 |   ├── _scroll.scss
 |
 ├── /Spacing
 |   ├── _Margin.scss
 |   ├── _Padding.scss
 |
 ├── _colors.scss
 ├── _isFlex.scss
 ├── _project.scss
 |   ...
 |
 └── mainUseful.scss

In the project folder enter your project's codes.

---

💽 Reset

A reset css by Meyerweb

---

🎨 Colors

In colors there are three divisions:

Colors project

Here you can enter the colors of your project.

$color-1: #0096c7;

Gradient project

Here you can enter the gradients of your project.

$gradient-1: linear-gradient(to left top, #8ff8ff, #97f6ff, #a0f4ff, #a8f1ff, #b0efff);

Colors buttons

Default button colors

$color-primary: linear-gradient(to right bottom, #0069d9, #1374e1, #2280ea, #2f8bf1, #3b97f9);
$color-secondary: hsla(0, 0%, 100%, 0);
$color-success: linear-gradient(to right bottom, #00b027, #09ba2f, #11c536, #17cf3e, #1cda45);
$color-danger: linear-gradient(to right bottom, #c82333, #d53341, #e1424f, #ed505d, #f95d6c);

OBS: It is advisable to follow the "type-color-number" pattern

---

☂ Shadow

Here you can enter the shadows of your project.

$shadow-1: hsla(0, 0%, 0%, 0.25) 0px 5px 10px;

OBS: It is advisable to follow the "type-shadow-number" pattern

---

🎢 Transition

Here you can enter the transitions of your project.

$transition-1: ease .15s;

OBS: It is advisable to follow the "transition-number" pattern

---

📏 Spacing

Folder with mixins to assign spacing.

All mixins can receive two variables:

• $NumOfClass Number of spacings you want to have.
• $SpacingEm Spacing size.

Margin

In margin you will have:

• .m-NUMBER to margin
• .mx-NUMBER to X-axis margin
• .my-NUMBER to Y-axis margin
• .mt-NUMBER to margin top
• .mb-NUMBER to margin bottom
• .ml-NUMBER to margin left
• .mr-NUMBER to margin right

$NumOfClass: 7;
$SpacingEm: 0.4;

// ================================ Margin
@for $i from 0 through $NumOfClass{
    .m*#{$i * 1}{
        margin: #{$i * $SpacingEm}em;
    }
}

✏ Example:

You will use m-2 in a class HTML for example.

<div class="card m-2">
    <h1>Card example</h1>
</div>

---

Padding

In padding you will have:

• .p-NUMBER to padding
• .px-NUMBER to X-axis padding
• .py-NUMBER to Y-axis padding
• .pt-NUMBER to padding top
• .pb-NUMBER to padding bottom
• .pl-NUMBER to padding left
• .pr-NUMBER to padding right

$NumOfClass: 7;
$SpacingEm: 0.4;

// ================================ Padding
@for $i from 0 through $NumOfClass{
    .p*#{$i * 1}{
        padding: #{$i * $SpacingEm}em;
    }
}

✏ Example:

You will use p-2 in HTML for example.

<div class="card p-2">
    <h1>Card example</h1>
</div>

📦 Flexbox

Folder with mixins and classes to assign Flexbox.

All mixins can receive two parameters:

• $align
• $justify

@mixin is-flex / 👨‍💻 Codepen

// ========== [IS-FLEX]
@mixin is-flex($align, $justify) {
    display: flex;
    align-items: $align;
    justify-content: $justify;
    flex-wrap: wrap;
}

✏ Example:

body{
  @include is-flex(center, center)
}

---

@mixin is-flex-column / 👨‍💻 Codepen

// ========== [IS-FLEX-COLOUMN]
@mixin is-flex-column($align, $justify) {
    display: flex;
    flex-direction: column;
    align-items: $align;
    justify-content: $justify;
}

✏ Example:

body{
  @include is-flex-column(center, space-around)
}

---

@mixin is-flex-self / 👨‍💻 Codepen

// ========== [IS-FLEX-SELF]
@mixin is-flex-self($align, $justify) {
    align-self: $align;
    justify-self: $justify;
}

✏ Example:

body{
  display: flex;
}
.card{
  @include is-flex-self(center, center)
}

---

.class is-flex / 👨‍💻 Codepen

// ========== [IS-FLEX]
.is-flex{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

✏ Example:

<body class="is-flex">
    <div class="card">
        <h1>Card example #1</h1>
    </div>
    <div class="card">
        <h1>Card example #2</h1>
    </div>
</body>

---

.class is-flex-column / 👨‍💻 Codepen

// ========== [IS-FLEX-COLUMN]
.is-flex-column{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

✏ Example:

<main class="is-flex-column">
  <div class="card ">
    <h1>Card example #1</h1>
  </div>
  <div class="card">
    <h1>Card example #1</h1>
  </div>
</main>

---

🖥 Grid / 👨‍💻 Codepen

Customizable grid system

// ======================================== [VARIABLES]
$grid-gutter: 1%; 
$grid-columns: 12; 
$grid-max: 980px; 

// ======================================== [GRID]
* {
    box-sizing: border-box;
}
[class*="grid-"] {
  float: left;
  margin-bottom: 20px;
  padding: 0 $grid-gutter;
}

@for $i from 1 through $grid-columns{ 
  .grid-#{$i} {
    width: 100% / $grid-columns * $i;
  }
}

✏ Example:

<div class="grid-2">
  <h1>Grid 2</h1>
</div>
<div class="grid-10">
  <h1>Grid 10</h1>
</div>

---

🧩 Components

Basic components

📌 Table of Contents

• Buttons
• Card
• Navbar
• Scroll

📍 Buttons / 👨‍💻 Codepen

There is a standard class to be a button: btn

<button class="btn btn-primary">Button</button>

There are four types of buttons:

Primary button

.btn-primary {
    background-image: $color-primary;
}

Secondary button

.btn-secondary {
    background-image: $color-secondary;
    color: #343a40;
}

Success button

.btn-success {
    background-image: $color-success;
}

Danger button

.btn-danger {
    background-image: $color-danger;
}

To up

.btn-up {

    &:hover {
        box-shadow: $shadow-1;
        transform: scale(1.1);

        i {
            transform: scale(1.2);
        }
    }

    &:active {
        transform: scale(0.99);
        outline: none;
    }
}

📍 Card / 👨‍💻 Codepen

Card style

.card {
    padding: 1em 1.5em;
    border-radius: 13px;
    margin-bottom: .8em;
    box-shadow: $shadow-1;
    background-color: rgb(255, 255, 255);
}

📍 Navbar

Navbar

Variables:

$navbarOn: true; //On to spacing main
$heightNavbar: 70px; // Height navbar

✏ Example:

SCSS

.navbar{
    @include navbar-1();
}

HTML

<nav class="navbar">
    <div class="navbarContent">
        <div class="navBrand mr-4">
            <h1 class="">Brand</h1>
        </div>
        <div class="navbarContentMain">
            <div class="contentStart">
                <a href="./index.html"><button class="btn btn-primary"><i class="fas fa-ticket-alt mr-2"></i>Button Start</button></a>
            </div>
            <div class="contentEnd">
                <a href="./admin.html"><button class="btn btn-primary"><i class="fas fa-crown mr-2"></i>Button End</button></a>
            </div>
        </div>
    </div>
</nav>

Navbar Vertical

The body and main have to have these settings

body {
    @include is-flex(flex-start, flex-start);
}

main {
    @extend .grid-9; // According to your grid
}

✏ Example:

SCSS

.navbarVertical{
    @include navbar-vertical-1();
}

HTML

<nav class="navbarVertical">
    <div class="navbarContent">
        <div class="navBrand">
            <h1>Brand</h1>
        </div>
        <ul class="namesList">
            <button class="btn navItem">Item</button>
        </ul>
    </div>
</nav>

📍 Footer

Simple Footer Style

✏ Example:

<footer>
    <h1 class="mb-5">
        <strong>Developed</strong> by <a href="https://github.com/AleNoia" class="a" target="_blank">Igor Noia
            Silva</a>
    </h1>
    <div class="footer-buttons">
        <a href="https://github.com/AleNoia" target="_blank" class="mr-2">
            <button class="btn btn-footer">
                <span>Github</span>
            </button>
        </a>
        <a href="https://www.linkedin.com/in/igor-noia-619a0820b/" target="_blank" class="mr-2">
            <button class="btn btn-footer">
                <span>Linkedin</span>
            </button>
        </a>
        <a href="https://github.com/AleNoia/client-manager" target="_blank">
            <button class="btn btn-footer">
                <span>Documentation</span>
            </button>
        </a>
    </div>
</footer>

📍 Scroll

Scroll style

Scroll #1 / 👨‍💻 Codepen

// ========== [TYPE 1]
@mixin scroll-1() {
  &::-webkit-scrollbar {
    width: .5em;
    background-color: $colorBackground;
  }

  /* Track */
  &::-webkit-scrollbar-track {
    border-radius: .7em;
  }

  /* Handle */
  &::-webkit-scrollbar-thumb {
    background-image: $gradient1;
    cursor: pointer;
  }
}

Scroll #2 / 👨‍💻 Codepen

// ========== [TYPE 2]
@mixin scroll-2() {
  &::-webkit-scrollbar {
    width: 17px;
    padding: 20px 0;
  }
  
  &::-webkit-scrollbar-thumb {
    background-color: $color-2;
    cursor: pointer;
    border-radius: .7em;
    border: 5px solid transparent;
    background-clip: padding-box;  
  }
}

---

⚙ Technologies used

Technologies that were used in the construction of the project:

• SCSS

---

🤝 Contributing

1. Fork the project.
2. Create a new branch with your changes: git checkout -b my-feature
3. Save your changes and create a commit message telling you what you did: git commit -m" feature: My new feature "
4. Submit your changes: git push origin my-feature
5. Now just open your pull request in the repository that you forked describing your changes
6. After the merge of your pull request is done, you can delete yout branch

If you have any questions check this guide on how to contribute

Feel free to contribute 🙂

---

👋 Author

Igor Noia Silva

If you want to contact, mail me or send a message on Twitter

---

🧾 License

Released in 2021. This project is under the MIT license.

Made by Igor Noia ✌