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 =