npm-Full-Steck-Tools

Trying to Make Webdev an Easier & Better Place One Line at a Time

Plugin Contains

• SCSS for helpful out of the box styling & mixins to create your own custom classes
• Large Focus on SCSS Color Palette and Dynamically Made Classes

GIT REPO: https://github.com/steckReed/npm-Full-Steck-Tools

// // Package imports
// @import '@npm/full-steck-tools/themes/animal-crossing/_-color-palette.scss';
// @import '@npm/full-steck-tools/sassy/-fs-mixins.scss';
// @import '@npm/full-steck-tools/themes/animal-crossing/_-styles.scss';


// Testing imports
@import './full-steck-tools/themes/animal-crossing/_-color-palette.scss';
@import './full-steck-tools/sassy/-fs-mixins.scss';
@import './full-steck-tools/themes/animal-crossing/_-styles.scss';

Required & Recommended Packages

@Required:
    npm i lodash @types/webpack-env react-icons

    lodash              : https://lodash.com/
    @types/webpack-env  : https://webpack.js.org/guides/dependency-management/#requirecontext
    react-icons         : https://react-icons.github.io/react-icons/

TO USE:

1. Create A Global Stylesheet (SCSS)

   • E.g. '_global-styles.scss'

2. Include Global Styles within _app.js or Header File (Global Scope)

3. Create a '_color-palette.scss' File With the Contents Below

   • NOTE: Light & Dark Colors are Required to be Filled, but don't need to be used

   ''' // Default Theme // {Add Color(s) Here}

   // Light Theme $light-primary: hsl(0, 0%, 100%); $light-secondary: hsl(39, 90%, 55%); $light-tertiary: hsl(162, 90%, 46%); $light-text-primary: hsl(0, 0%, 11%); $light-text-secondary: hsl(194, 72%, 52%);

   // Dark Theme $dark-primary: hsl(215, 26%, 24%); $dark-secondary: hsl(206, 59%, 44%); $dark-tertiary: hsl(12, 85%, 60%); $dark-text-primary: hsl(0, 0%, 100%); $dark-text-secondary: hsl(10, 72%, 50%);

   // Add Any & All HSL Colors here to auto generate classes based on those colors $auto-class-generator:( // Normal 'primary':( 'light' : $light-secondary, 'dark' : $dark-secondary ), 'secondary':( 'light' : $light-tertiary, 'dark' : $dark-tertiary ), // Normal ); '''

4. Add the Following to your Global Stylesheet ''' @import './color-palette'; @import '../../../node_modules/full-steck-tools/Sassy/-fs-mixins'; '''

5. This Package Works Best With Icons, Who Doesnt Like Those?

   • Recommend to install 'react-icons' from (https://react-icons.github.io/react-icons/)

   ''' npm i react-icons --save '''

Important Notes

• Ensure all scss color variables are in HSL format to ensure Full-Steck Tools functions properly

Automated Class Generation

Created to auto-gen classes from specified color palettes Note: Text Color is soon to be auto generated by Chromes accessibility scoring (Default: AA)

EXAMPLE: (Add below code to own color-palette.scss file)

$auto-class-generator:( // Light/Dark Themed Classes (Changes based on light/dark themes) 'primary':( 'light' : $light-secondary, 'dark' : $dark-secondary ), 'secondary':( 'light' : $light-tertiary, 'dark' : $dark-tertiary ),

// Single Color Classes (Doesn't change on light/dark themes)
'success'  : $colorSuccess,

);

--- SCSS CLASSES ---

--- ---

--- Active ---

.active
.active-{colorName}

--- Accessibility ---

.outline
.outline-{colorName}

--- Backgrounds ---

Note: short-hand for below class is 'bg'

.bg-{colorName}
.background-{colorName}

--- Borders ---

.border-dotted-{colorName}
.border-dashed-{colorName}
.border-solid-{colorName}
.border-double-{colorName}
.border-groove-{colorName}
.border-ridge-{colorName}
.border-inset-{colorName}
.border-outset-{colorName}
.border-none-{colorName}
.border-hidden-{colorName}

--- Buttons ---

.btn-{colorName}

--- Display ---

.show
.hide

--- Font Colors ---

Note: short-hand for below class is 'color'

.color-{colorName}
.font-color-{colorName}

--- Grid Tags ---

grid
grid-container
flex
flex-container

--- Grids ---

.grid-pos

--- Positioning ---

- Fixed
  .position-fixed-top-left
  .position-fixed-top-middle
  .position-fixed-top-right
  .position-fixed-center-left
  .position-fixed-center-middle
  .position-fixed-center-right
  .position-fixed-bottom-left
  .position-fixed-bottom-middle
  .position-fixed-bottom-right

--- Text ---

Note: Needs updated

--- Textures ---

Note: In order for textures to work properly, or if you're getting a white background.
      Convert all HEX colors to HSL. Background-image doesn't support HEX :'(

.texture
.texture-transparent
.texture-{colorName}

--- JS FUNCTIONS ---

HOW TO USE "Full-Steck Scroll Animation"

sa_EleId           = (REQUIRED)
sa_TopEleId        = (REQUIRED)
sa_AnimationIn     = (REQUIRED)
sa_BottomEleId     =
sa_AnimationOut    =
sa_TimeDelay       =
sa_RepeatAnimation =