@yamato-daiwa/frontend v1.2.1

@yamato-daiwa/frontend - YDF

The toolkit for the frontend development with Pug and Stylus pre-processors.

Currently, most of the functionality has the auxiliary role, but in the future GUI components will be added.

🛣️ Roadmap

Hint: Set the unlabeled slider in the top right corner of the screen to XL to see the tags and descriptions.

⚠️ Request to Stack Overflow users with >=1500 reputation

My account has not enough reputation to create the tag for @yamato-daiwa/frontend and start to answer the related questions. Please create it instead of me and notify me to tokugawa.takesi@gmail.com.

• Tag name: @yamato-daiwa/frontend
• Description: The toolkit for the frontend development with Pug and Stylus pre-processors.

Installation

npm i @yamato-daiwa/frontend -E

Documentation

Get functionality

@require "PATH_TO_NODE_MODULES/@yamato-daiwa/frontend/Functionality.styl"

Get components

Markup (Pug)

include "PATH_TO_NODE_MODULES/@yamato-daiwa/frontend/Components.pug

Styles

@require "PATH_TO_NODE_MODULES/@yamato-daiwa/frontend/Components.styl"

Table of contents

Assets

• 📖 Basic constants
• 📖 Font stacks

• 📖 Colors

• 📖 Basic variables

Functions

Value checkers

• isTrue/isFalse
• isString(value)
• isEmptyString(value)
• isUnitlessNumber(value)
• isBoolean(value)
• isObject(value)
• isIdentifier(value)

Value converters

The names of below functions has been developed such as everything must be obvious without explanations. If it not such as, please open the issue with title "FunctionName: Unclear name".

• emptyStringToNull(value)
• nullToZero(value)
• nullToEmptyString(value)

Strings

• 📖 buildString Allows to create the dynamic strings using the ES6 Template literals.

Objects (hashes)

• 📖 deeplyCloneAndOverrideObject Allows to clone and immediately override the object without affecting to initial object.
• 📖 deeplyCloneObject Creates the deep copy object the object.
• 📖 getObjectNonNullValuesCount Returns the count of non-null values of specified object.
• 📖 getObjectValueByDotSeparatedPathSafely Accesses to nested object (hash) without risk being throw the error when some property does not exist.
• 📖 iterateObjectSkippingNullValues Iterates the object's keys and values skipping entries with null value.
• formatObject Stringifies and formats object for logging

Arrays

• 📖 arrayConstructor__POLYFILL Fixes the Unsolicited two-dimensional array when trying to declare the plain one-dimensional array issue.
• 📖 getFirstNonNullArrayElement Returns first non-null element for array or null if no such elements.
• 📖 getStringsOrNumbersArrayLength Returns the elements count of array of strings of numbers.
• 📖 hasStringsOrNumbersArraySpecifiedElement Checks has certain array of strings of numbers the specified element.
• 📖 iterate2DimensionalArray Iterate the 2-dimensional array supporting single-element case.
• 📖 iterateAssociativeArray Iterates associative array supporting single-element case.

Logging

• 📖 log Makes log output to console. Unlike native similar p function formats the objects.

Parameters validation

• 📖 validateSingleParametersObject Validating of the parameters of function and mixins.

Other

• buildBEM_Class Builds BEM class according specified block, element and modifier.
• substituteWhenNull Substitutes the second argument's value when first one is null
• buildCalcExpression Generates calc() expression; interpolation is available.

Mixins

Basic

• 📖 applyIfNotNull adds each specified CSS property to target ruleset when if it's not null. Intended to be used in cases when CSS values are unknown in advance.
• 📖 applyIfNotZero adds each specified CSS property to target ruleset when if it's not zero. Intended to be used in cases when CSS values are unknown in advance.

Width sizing

• 📖 widthSizing Alternative width specifying approach intended to be used in frameworks development.
• fillViewportWidthIgnoringParentPaddings Takes 100% of viewport in spite of parent element's paddings.
• 📖 TableCellWidthSizing Allows to define the width, borders and paddings of table cell by various combinations of parameters.

Paddings

• 📖 Paddings mixin The alternative to native CSS method of defining of the paddings intended to be used in customizable components development.

Layout

• 📖 fillBodyVertically Fills <body> when <body> and <html> takes 100% of viewport's height as minimum with or without vertical scrolling availability.
• 📖 FixedTranslucentDimLayer The mixin intended to be applied to div element to overlap the other content which translucent dim layer. Such element is frequently being used as underlay for modal dialogs.
• 📖 Centerer Centering of the block elements with auto margins, minimal and maximal widths.

Positional relationship

• 📖 Introduction
• 📖 PositionalRelationship mixin Low-level mixin for the defining of the vertical space between two or more elements.
• 📖 retireFrom mixin Allows to define how much element B must retire from A by top/left margin.
• 📖 pushTargetFromSelf mixin Allows to define how much element B must push A from self by A's top/left margin.
• 📖 retireFromElementWithSameSelector mixin Allows to define how much certain element must retire from other element with same selector.
• 📖 whenItGoingFirst mixin Allows to define CSS properties for certain element when it is going first in some container.
• 📖 whenItGoingLast mixin Allows to define CSS properties for certain element when it is going last in some container.
• 📖 whenItJustAfter mixin Allows to specify any CSS properties for element B when it is going after element A.
• 📖 whenTargetGoingJustAfterIt mixin Allows to specify any CSS properties for the target element X when it is going after currently being declared element.
• 📖 whenTargetWithSameSelectorGoingJustAfterIt mixin The equivalent of +whenTargetGoingJustAfterIt({ targetElementSelector: ".X" }) for the case when reference element's selector is also .X.

Typography

• 📖 SingleLineElementOverflowTolerance
• 📖 MultilineTextWithoutExtraSpaceCausedByLineHeight Defines the font size and line height, herewith there will not be extra vertical space above first line and below last line caused by line-height. Prevents overflow.

Components

• 📖 OverflowSafeSingleLineLabel Improved solution of horizontal text overflow safety of single line labels problem.

Motivation

It is considered that the programming in the overkill for creating of stylesheets. Maybe is so until writing the flexible and customizable UI framework.

The @yamato-daiwa/frontend synthetically improving the programming functionality of Stylus pre-processor allows flexibly work with unknown at-advance data, namely the customization data from the framework users.