@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.
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
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 withnull
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 similarp
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 isnull
buildCalcExpression
Generatescalc()
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 todiv
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 withauto
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 elementB
must retire fromA
by top/left margin. - 📖
pushTargetFromSelf
mixin Allows to define how much elementB
must pushA
from self byA
'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 elementB
when it is going after elementA
. - 📖
whenTargetGoingJustAfterIt
mixin Allows to specify any CSS properties for the target elementX
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 byline-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.
4 days ago
8 months ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago