SCSS Mixins and Functions Starter

SCSS Starter Kit is a collection of essential SCSS functions and mixins compiled into a single file. This toolkit is designed to jumpstart your application by providing a robust, consistent, and straightforward baseline for building sophisticated PHP applications.

Functions ^v1.3.1

color()

This SCSS function retrieves the value of a specified color variable.
The $colorName parameter specifies the name of the color variable to retrieve.
The $colorValue parameter is an optional fallback value if the color variable is not found.

Usage

                                    color($colorName, $colorValue: default)
                                

desktopStart()

This SCSS function returns the starting breakpoint value for desktop view.
It provides the first registered responsive data point for desktop screens

Usage

                                    @media (max-width: desktopStart())
                                

mobileStart()

This SCSS function returns the starting breakpoint value for mobile view.
It provides the first registered responsive data point for mobile screens

Usage

                                    @media (max-width: mobileStart())
                                

Mixins ^v3.1.1

imageRatio()

This mixin creates ratio-based container classes for images, providing
@param {List} $desktopDimension - The dimensions (width, height) for desktop view.
@param {List|Boolean} $mobileDimension - The optional dimensions (width, height) for mobile view.
@param {Boolean|Unit} $maxWidth - An optional maximum width value. Can be a boolean or a specific unit.
@param {String} $objectFit - The object-fit property value for the image (default: contain).
@param {String} $className - The base class name for the container (default: "image").

Usage

                                    @include imageRatio($desktopDimension, $mobileDimension, $maxWidth, $objectFit, $className);
                                

typo()

This mixin creates typography styles with responsive handling for ellipsis and font sizes.
It iterates over desktop and mobile breakpoints to apply specific styles based on the given parameters.
@param {String} $fontName - The name of the font style to apply.
@param {Boolean} $elypsis - Enable ellipsis for text overflow (default: false).
@param {Number} $line-to-show - The number of lines to show before truncating with ellipsis (default: 1).
@param {Number} $line-height - The line height for the text (default: 1.6),

Usage

                                    @include typo($fontName, $elypsis: true, $line-to-show: 2, $line-height: 1.4);
                                

vwUnit()

This mixin sets a CSS property using viewport width (vw) units for both desktop and mobile breakpoints.
@param {String} $property - The CSS property to apply.
@param {Number} $valueD - The value for the property in vw units for desktop view.
@param {Number|null} $valueM - The optional value for the property in vw units for mobile view. Defaults to the desktop value if not provided.

Usage

                                    
                @include vwUnit(font-size, 5, 4);
                

                

                /** OR */
                

                

                @include vwUnit(padding, 10 20, 5 10);
            
                                

vwDesktop()

This mixin sets a CSS property using viewport width (vw) units for desktop breakpoints.
@param {String} $property - The CSS property to apply.
@param {Number} $value - The value for the property in vw units.

Usage

                                    
                @include vwDesktop(font-size, 5);
                

                

                /** OR */
                

                

                @include vwDesktop(padding, 10 20);
            
                                

vwMobile()

This mixin sets a CSS property using viewport width (vw) units for mobile breakpoints.
@param {String} $property - The CSS property to apply.
@param {Number} $value - The value for the property in vw units.

Usage

                                    
                @include vwMobile(font-size, 5);
                

                

                /** OR */
                

                

                @include vwMobile(padding, 10 20);
            
                                

PHP Functions Starter ^v1.0.0

PHP Functions Starter is a collection of essential PHP functions compiled into a single file. This toolkit is designed to jumpstart your application by providing a robust, consistent, and straightforward baseline for building sophisticated PHP applications.

components()

This function loads a component template part located in the /template-parts/components/ directory.
The $name parameter specifies the name of the component to load, while the $args parameter is an optional array of arguments to pass to the component.
@param {string} $name - The name of the component to load.
@param {array} $args - Optional. An array of arguments to pass to the component. Default is an empty array.
@return void

Usage

                                    
                <?php components('TheHeader'); ?>
                

                

                /** OR */
                

                

                <?php components('BaseButton', array('arg1' => 'value1')); ?>
            
                                

getPageData()

Retrieves the page data object by the given page title.
This function searches through the "page_links" field for an entry with a matching page title and returns the corresponding page object.
Ensure that the page title exists in the page option general settings -> page link.
@param {string} $page_title - The title of the page to search for.
@return mixed The page object if found, or an error message if not found.

Usage

                                    <?php getPageData('Contact Us'); ?>
                                

getCurrentLang()

Retrieves the current language of the WordPress site.
This function can be called within templates to obtain the current language setting.
It is particularly useful when working with the Polylang plugin.
@return string The current language in the format "en_us".

Usage

                                    <?php getCurrentLang(); ?>
                                

JS Functions

JavaScript Functions Starter is a comprehensive collection of fundamental JavaScript functions, all curated in one convenient file. This toolkit is crafted to accelerate your development process by providing a reliable and versatile base for creating sophisticated JavaScript applications effortlessly.

Transitions ^v1.0.1

slideUp()

Function to slide up an element over a specified duration.
The element`s height, padding, and margin are animated to 0, creating a slide-up effect. After the animation, the element`s display property is set to "none" and all inline styles used for the animation are removed.

@param {HTMLElement} target - The DOM element to slide up
@param {number} default = 400 - Duration of the animation in milliseconds (optional).
@param {Function} [callback] - Callback function to be executed after the animation completes (optional).

Usage

                                    
                slideUp(document.querySelector('.target'))
                

                

                /** OR */
                

                

                slideUp(document.querySelector('.target'), 200)
                

                

                /** OR */
                

                

                slideUp(document.querySelector('.target'), 200, () => { 

                   console.log('slide') 

                })
            
                                

slideDown()

Function to slide down an element over a specified duration.
This function makes an element visible by expanding its height, padding, and margin from 0 to their original values. It also ensures that any previously set display property is restored.

@param {HTMLElement} target - The DOM element to slide down
@param {number} default = 400 - Duration of the animation in milliseconds (optional).
@param {Function} [callback] - Callback function to be executed after the animation completes (optional).

Usage

                                    
                slideDown(document.querySelector('.target'))
                

                

                /** OR */
                

                

                slideDown(document.querySelector('.target'), 200)
                

                

                /** OR */
                

                

                slideDown(document.querySelector('.target'), 200, () => { 

                   console.log('slide') 

                })
            
                                

slideToggle()

Function to toggle the slide up/down effect on an element.
If the element is currently hidden, it slides down; otherwise, it slides up.

@param {HTMLElement} target - The DOM element to toggle
@param {number} default = 400 - Duration of the animation in milliseconds (optional).
@param {Function} [callback] - Callback function to be executed after the animation completes (optional).

Usage

                                    
                slideToggle(document.querySelector('.target'))
                

                

                /** OR */
                

                

                slideToggle(document.querySelector('.target'), 200, () => { 

                   console.log('slide') 

                })
            
                                

fadeIn()

Function to gradually fade in an element over a specified duration.
This function increase the opacity of the target element from 0 to 1, creating a fade-in effect. After the animation, the element`s display property is set to "block" and all inline styles used for the animation are removed.

@param {HTMLElement} target - The DOM element to fade out
@param {number} default = 400 - Duration of the animation in milliseconds (optional).
@param {Function} [callback] - Callback function to be executed after the animation completes (optional).

Usage

                                    
                fadeIn(document.querySelector('.target'))
                

                

                /** OR */
                

                

                fadeIn(document.querySelector('.target'), 200)
                

                

                /** OR */
                

                

                fadeIn(document.querySelector('.target'), 200, () => { 

                   console.log('fade') 

                })
            
                                

fadeOut()

Function to gradually fade out an element over a specified duration.
This function decreases the opacity of the target element from 1 to 0, creating a fade-out effect. After the animation, the element`s display property is set to "none" and all inline styles used for the animation are removed.

@param {HTMLElement} target - The DOM element to fade out
@param {number} default = 400 - Duration of the animation in milliseconds (optional).
@param {Function} [callback] - Callback function to be executed after the animation completes (optional).

Usage

                                    
                fadeOut(document.querySelector('.target'))
                

                

                /** OR */
                

                

                fadeOut(document.querySelector('.target'), 200)
                

                

                /** OR */
                

                

                fadeOut(document.querySelector('.target'), 200, () => { 

                   console.log('fade') 

                })
            
                                

fadeToggle()

Function to toggle the fade in/out effect on an element.
If the element is currently hidden, it fades in; otherwise, it fades out.

@param {HTMLElement} target - The DOM element to fade in
@param {number} default = 400 - Duration of the animation in milliseconds (optional).
@param {Function} [callback] - Callback function to be executed after the animation completes (optional).

Usage

                                    
                fadeToggle(document.querySelector('.target'))
                

                

                /** OR */
                

                

                fadeToggle(document.querySelector('.target'), 200)
                

                

                /** OR */
                

                

                fadeToggle(document.querySelector('.target'), 200, () => { 

                   console.log('fade') 

                })
            
                                

Initial Components

This section contains the basic building blocks for your application. These components are reusable and easy to customize, helping you create a consistent user interface.

ThemeButton

Usage

                                    
                                        
                <?php components('ThemeButton', [ 

                   'text' => 'Hello', 

                ]) ?>
                                                
                                

Coding Standards for WordPress Team

General Guidelines

• Adherence to Standards: Always follow the official WordPress coding standards for HTML, PHP, JavaScript, and CSS to ensure compatibility, readability, and maintainability.
• Consistency in Code: Maintain uniformity in naming conventions, indentation, and formatting across all files to enhance collaboration and reduce potential errors.
• Modern Build Tools: Utilize npm for managing project dependencies, automating build processes, and streamlining workflows. This includes tasks like compiling SCSS, bundling JavaScript, and optimizing assets for production.

Component Naming Guidelines

• Multi-Word Names: Ensure all component names are multi-word to prevent conflicts with PHP`s built-in classes or functions, and to improve clarity.
• PascalCase Convention: Use PascalCase (e.g., MyComponent) for naming components to distinguish them from other code entities.

                        
                            BaseButton.php

                            SearchBar.php

                            ProductDetail.php
                        
                    

HTML

• Semantic Structure: Leverage semantic HTML5 elements such as <article>, <section>, <header>, <footer> to enhance accessibility and SEO.
• Indentation: Use consistent indentation with 4 tabs to maintain code readability and structure.
• External Stylesheets: Avoid using inline styles; instead, define styles in external SCSS files for maintainability.
• Minimize Redundancy: Use appropriate HTML elements and avoid unnecessary wrappers (e.g., replace <div> with <section> where applicable).

PHP

• Reusable Logic: Write reusable functions for common operations to reduce code duplication and ensure consistent behavior.
• Namespace Prefixing: Prefix custom functions, classes, and variables with a unique namespace (e.g., mytheme_) to avoid conflicts with WordPress core or third-party plugins/themes.

SCSS (Using BEM)

• BEM Methodology: Follow the Block-Element-Modifier (BEM) convention for naming classes. This ensures clarity and consistency in style definitions.
  • Block: Represents a standalone entity (e.g., menu).
  • Element: Denotes a part of the block (e.g., menu__item).
  • Modifier: Represents a variation of the block or element (e.g., menu__item--active).
• Modular Organization: Keep SCSS files organized into components, layouts, and utilities to promote modularity and scalability.
• Optimized Usage: Use variables, mixins, and nesting sparingly to maintain readability and avoid overly complex styles.

JavaScript

• Functionality Splitting:
  • Write small, reusable functions that handle specific tasks to promote clarity and reusability.
  • Keep each file focused on a single functionality to make debugging and updates easier.
• Modular Imports:
  • Import only the required modules to reduce the overall bundle size and enhance code maintainability.
  • Use ES6 module syntax (import and export) for a clean, modular structure.
• Event Listeners:
  • Always wrap initialization code inside the DOMContentLoaded event to ensure the DOM is fully loaded before executing scripts.