README
@yamato-daiwa/frontend - [YDF]
The toolkit for the frontend development with Pug and Stylus pre-processors.
Roadmap
Currently, the Pug and Stylus auxiliaries are under refactoring. The next step will be the adding of the UI components.
🛣️ Version 1.0 (2022 Spring sprint)
Hint: Set the unlabeled slider in the top right corner of the screen to XL
to see the tags and descriptions.
>=1500
reputation
⚠️ Request to Stack Overflow users with 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
Pages templates
- 📖
RegularWebPage
The basic HTML5 page with pre-filled required HTML tags. - 📖
StaticPreviewAnywherePage
The top page for static HTML/CSS implementation stage.
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.
Height sizing
- 📖
textBoxLikeElementsHeightSizing
The vertical sizing of block and inline block elements only with text content.
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. Intended to be used on containers. - 📖
provideClippedShadowsAndOutlinesVisibility
The ugly but still no-alternatives solution of clipped byoverflow
shadows and outlines problem. Indented to be used on non-containers.
Positioning
- 📖
centerHorizontallyWithoutWrapper
Centering of the block and inline-block elements without wrapper. - 📖
CenteredContentWithComputedHorizontalPaddings
Centering of the element by computed horizontal symmetric paddings. Intended to be used on the page containers on wide screens. - 📖
placeToRight
Placing the element to right side or the container by relative positioning andtransform
. - 📖
VerticallyCenteredAbsolutelyPositionedBlock
Centers vertically the absolutely positioned block.
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
.
Other mixin utils
- 📖 Sprite Mixin for the making of the element to sprite.
Styles initialization
- 📖
CrossBrowserStylesReset
The resetting of browser dependent styles and some usually redefinable styles like default margins ofbody
based on Eric Mayer's Reset CSS. InitialGlobalCSS_Rules
Some basic CSS rules like default font size and default line height intended to be applying directly afterCrossBrowserStylesReset
.ButtonLikeElementsPrimer
Resets all styles which usually pre-defined on buttons and similar elements such as the target element becomes even with unstyledspan
.
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.