Skip to content

Latest commit

 

History

History
341 lines (281 loc) · 26.6 KB

README.md

File metadata and controls

341 lines (281 loc) · 26.6 KB

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

⚠️ 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 "RELATIVE/PATH/TO/node_modules/@yamato-daiwa/frontend/Functionality.styl"

Please note that this including will not cause any output CSS rules - 100% of YDF functionality has been provided via variables and mixins.

Get components

Again, neither Pug nor Stylus including will not cause any output CSS rules.

Markup (Pug)

include RELATIVE/PATH/TO/node_modules/@yamato-daiwa/frontend/Components.pug

Styles

@require "RELATIVE/PATH/TO/node_modules/@yamato-daiwa/frontend/Components.styl"

Table of contents

Markup

Pages templates
RegularWebPage
The basic HTML5 page with pre-filled required HTML tags.
StaticPreviewAnywherePage
The top page for static HTML/CSS implementation stage.

Styles

Assets
Kernel
Basic variables
Functions
Utility mixins
  • General
    applyIfNotNull
    Adds each specified CSS property to target ruleset when it is not null. Intended to be used in cases when CSS values are being retrieved via variables/parameters thus unknown in advance.
    applyIfNotZero
    Adds each specified CSS property to target ruleset when it is not zero. Intended to be used in cases when CSS values are being retrieved via variables/parameters thus unknown in advance.
  • Sizing
    • Width
      WidthSizing
      Alternative to native CSS approach of width specifying intended to be used in customizable UI components development.
      fillViewportWidthIgnoringParentPaddings
      Makes element fill the viewport's width ignoring parent's side paddings with some limitations.
      TableCellWidthSizing
      Allows to define the width, borders and paddings of table cell by various combinations of properties.
    • Borders
      BordersSizing
      Alternative to native CSS approach of specifying of the border width (thickness) and radius intended to be used in customizable UI components development.
      Border fillets radius
      Allows to define the top, bottom, left or right fillets radius.
    • Paddings
      Paddings
      Alternative to native CSS approach of paddings specifying intended to be used in customizable UI components development.
  • Positioning
    centerHorizontallyWithoutWrapper
    Centering of the block or inline-block elements without wrapper.
    placeToRight
    Places the element to right side or the container by relative positioning and transform.
    VerticallyCenteredAbsolutelyPositionedBlock
    Centers vertically the absolutely positioned block.
  • Positional relationship
    PositionalRelationship
    Low-level mixin for the defining of the space between two or more elements.
    retireFrom
    Allows to define how much element B must retire from A by top/left margin.
    pushTargetFromSelf
    Allows to define how much element B must push A from self by A's top/left margin.
    retireFromElementWithSameSelector
    Allows to define how much certain element must retire from other element with same selector.
    whenItGoingFirst
    Allows to define CSS properties for certain element when it is going first in some container.
    whenItGoingLast
    Allows to define CSS properties for certain element when it is going last in some container.
    whenItJustAfter
    Allows to specify any CSS properties for element B when it is going after element A.
    whenTargetGoingJustAfterIt
    Allows to specify any CSS properties for the target element X when it is going after currently being declared element.
    whenTargetWithSameSelectorGoingJustAfterIt
    The equivalent of +whenTargetGoingJustAfterIt({ targetElementSelector: ".X" }) for the case when reference element's selector is also .X.
  • Layout
    CenteredContentWithComputedHorizontalPaddings
    Centering of the element by computed horizontal symmetric paddings. Intended applied to the page containers on wide screens.
    Centerer
    Centering of the block elements with `auto` margins, minimal and maximal widths. Intended to be applied to containers.
    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 being frequently used as underlay for modal dialogs.
  • Typography
    SingleLineTextElementOverflowSafety
    Provides the text overflow safety for single-line elements
    MultiLineTextElementOverflowSafetyWithoutExtraSpaceCausedByLineHeight
    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".
  • Other
    provideClippedShadowsAndOutlinesVisibility
    The ugly but still no-alternatives solution of clipped by overflow shadows and outlines problem.
    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.
Build-in plugins
Additional color palettes
Components
OverflowSafeSingleLineLabel
Improved solution of horizontal text overflow safety of single line labels problem.