INITAL > added

README.md

@@ -0,0 +1,3 @@
+# SCSS Helper 
+
+Here is the documentation.

modules/_index.scss

@@ -0,0 +1,3 @@
+@forward 'reset';
+@forward 'variables';
+@forward 'placeholders';

modules/placeholders/_color.scss

@@ -0,0 +1,71 @@
+/** 
+* Background Color Placeholders
+*/ 
+
+%bg-trans {
+    background-color: map-get( $colors, trans ); 
+}
+
+%bg-primary {
+    background-color: map-get( $colors, primary ); 	 
+}
+
+%bg-secondary {
+    background-color: map-get( $colors, secondary ); 
+}
+
+%bg-dark {
+    background-color: map-get( $colors, dark );
+}
+
+%bg-grey {
+    background-color: map-get( $colors, grey );
+}
+
+%bg-light {
+    background-color: map-get( $colors, light );
+}
+
+%bg-black {
+    background-color: map-get( $colors, black );
+}
+
+%bg-white {
+    background-color: map-get( $colors, white );
+}
+
+/** 
+* Colors
+*/ 
+
+%color-trans {
+    color: map-get( $colors, trans );
+}
+
+%color-primary {
+    color: map-get( $colors, primary );
+}
+
+%color-secondary {
+    color: map-get( $colors, secondary );
+}
+
+%color-dark {
+    color: map-get( $colors, dark );
+}
+
+%color-grey {
+    color: map-get( $colors, grey );
+}
+
+%color-light {
+    color: map-get( $colors, light );
+}
+
+%color-black {
+    color: map-get( $colors, black );
+}
+
+%color-white {
+    color: map-get( $colors, white );
+}

modules/placeholders/_fonts.scss

@@ -0,0 +1,38 @@
+%font {
+
+    // Family
+    &--primary {
+        font-family: map-get( $fonts, primary );
+    }
+
+    &--secondary {
+        font-family: map-get( $fonts, secondary );
+    }
+
+    // Weight
+    &--w-light {
+        font-weight: 300;
+    }
+
+    &--w-normal {
+        font-weight: 400;
+    }
+
+    &--w-medium {
+        font-weight: 500;
+    }
+
+    &--w-bold {
+        font-weight: 700;
+    }
+
+    // style
+    &--s-normal {
+        font-style: normal;
+    } 
+
+    &--s-italic {
+        font-style: italic;
+    }
+
+}

modules/placeholders/_index.scss

@@ -0,0 +1,2 @@
+@forward 'color';
+@forward 'position';

modules/placeholders/_position.scss

@@ -0,0 +1,37 @@
+// Position
+%pos {
+    &--rel {
+        position: relative;
+    }
+
+    &--abs {
+        position: absolute;
+    }
+
+    &--fix {
+        position: fixed;
+    }
+
+    &--sticky {
+        position: sticky;
+    }
+
+    &--inh {
+        position: inherit;
+    }
+
+    &--ini {
+        position: initial;
+    }
+
+    &--uns {
+        position: unset;
+    }
+
+    &--overlay {
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+    }
+}

modules/reset.scss

@@ -0,0 +1,66 @@
+@mixin reset {
+
+    *,
+    *::before,
+    *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+
+    /* Remove default margin */
+    body,
+    h1,
+    h2,
+    h3,
+    h4,
+    p,
+    figure,
+    blockquote,
+    dl,
+    dd {
+        margin: 0;
+    }
+
+    /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+    ul[role="list"],
+    ol[role="list"] {
+        list-style: none;
+    }
+
+    /* Set core root defaults */
+    html:focus-within {
+        scroll-behavior: smooth;
+    }
+
+    /* Set core body defaults */
+    body {
+        min-height: 100vh;
+        text-rendering: optimizeSpeed;
+        line-height: 1.5;
+    }
+
+    /* A elements that don't have a class get default styles */
+    a:not([class]) {
+        text-decoration-skip-ink: auto;
+    }
+
+    /* Make images easier to work with */
+    img,
+    picture {
+        max-width: 100%;
+        height: auto;
+    }
+
+    /* Inherit fonts for inputs and buttons */
+    input,
+    button,
+    textarea,
+    select {
+        font: inherit;
+    }
+
+}
+@include reset;

modules/variables/_breakpoints.scss

@@ -0,0 +1,33 @@
+/** Usage:
+    @include breakpoint(tablet) {}
+**/
+
+@mixin breakpoint( $point, $value: 0 ) {
+    @if $point == mobile {
+        @media ( max-width: 320px ) { @content; }
+    }
+
+    @else if $point == mobile-horizontal {
+        @media ( max-width: 480px ) { @content; }
+    }
+
+    @else if $point == tablet {
+        @media ( max-width: 768px ) { @content; }
+    }
+
+    @else if $point == tablet-horizontal {
+        @media ( max-width: 1024px ) { @content; }
+    }
+
+    @else if $point == desktop {
+        @media ( max-width: 1280px ) { @content; }
+    }
+
+    @else if $point == desktop-wide {
+        @media ( max-width: 1500px ) { @content; }
+    }
+
+    @else {
+        @media ( $point: $value ) { @content; }
+    }
+}

modules/variables/_index.scss

@@ -0,0 +1,2 @@
+@forward 'breakpoints';
+@forward 'main';

modules/variables/_main.scss

@@ -0,0 +1,52 @@
+/**
+*  Color
+*  @use  background-color: map-get( $colors, dark );
+*/ 
+
+$colors: (
+    trans: transparent,
+    primary: #005b96,
+    secondary: #e6e6ea,
+
+    white: #ffffff,
+    light: #f4f4f8,
+
+    black: #000000,
+    dark: #2a363b,
+
+    light-grey: #949a98,
+    grey: #4a4e4d,
+);
+
+// Color
+$fonts: (
+    primary: 'Open Sans',
+    secondary: 'Lato',
+);
+
+// Spacing
+$spacing: (
+    main: 40px,
+    half: 20px,
+    small: 10px,
+);
+
+// CSS Color Variables
+:root {
+
+    // Colors 
+    @each $name, $colors in $colors {
+        --color-#{$name}: $colors;
+    }
+
+    // Fonts
+    @each $name, $fonts in $fonts {
+        --font-#{$name}: $fonts, sans-serif;
+    }
+
+    // Spacing
+    @each $name, $spacing in $spacing {
+        --space-#{$name}: $spacing;
+    }
+
+}

package.json

@@ -0,0 +1,19 @@
+{
+  "name": "scss-helper",
+  "version": "1.0.0",
+  "description": "SCSS Helper Package",
+  "main": "style.scss",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bz-projects/scss-helper.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Benjamin Zekavica",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/bz-projects/scss-helper/issues"
+  },
+  "homepage": "https://github.com/bz-projects/scss-helper"
+}

style.scss

@@ -0,0 +1,5 @@
+/**
+*   SCSS Import
+*/ 
+
+@import 'modules';