@yamato-daiwa/frontend

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

Usage no npm install needed!

<script type="module">
  import yamatoDaiwaFrontend from 'https://cdn.skypack.dev/@yamato-daiwa/frontend';
</script>

README

@yamato-daiwa/frontend - [YDF]

NPM Version IntelliJ IDEA plugin

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

Hero image of @yamato-daiwa/frontend

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.

image

⚠️ 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

Pages templates

Assets

Functions

Value checkers
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
Objects (hashes)
Arrays
Logging
  • 📖 log Makes log output to console. Unlike native similar p function formats the objects.
Parameters validation
Other

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
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. Intended to be used on containers.
  • 📖 provideClippedShadowsAndOutlinesVisibility The ugly but still no-alternatives solution of clipped by overflow shadows and outlines problem. Indented to be used on non-containers.
Positioning
Positional relationship
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 of body 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 after CrossBrowserStylesReset.
  • ButtonLikeElementsPrimer Resets all styles which usually pre-defined on buttons and similar elements such as the target element becomes even with unstyled span.

Typography

Components

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.