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 ---

$3

$3

.active
.active-{colorName}

$3

.outline
.outline-{colorName}

$3

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

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

$3

.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}

$3

.btn-{colorName}

$3

.show
.hide

$3

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

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

$3

grid
grid-container
flex
flex-container

$3

.grid-pos

$3

- 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

$3

Note: Needs updated

$3

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 =