Vincec's Dimension

Vincec Normalize CSS - vnorm.css

Word count: 127 / Reading time: 1 min
2018/07/01 Share

For making life easier, I tweaked flex into a small normalize CSS file. Now with vnorm.css, we can make layout much quickly, all following class-default will add the setting of Vertically Center to the child elements, and by different classes performing as:

  • .expand(Expand the current element across relatively)
  • .hori(Horizontal Layout towards the child elements)
  • .vert(Vertical Layout towards the child elements)
  • .center(Horizontal Center towards the child elements)
  • .bwt(Add a flex space between the child elements)
  • .end(Make the child elements flex from the end)
  • Simple font color presets including .dark, .light-gray, .gray, .green, .light-green, .orange, .dark-orange, .highlight, .white, .bold, .selected

A small demo for how it works:

See the Pen Vnorm.css demo by vincecao (@vvvvvincecccc) on CodePen.

Author: VINCEC

Permalink: https://vince-amazing/blog/2018/07/01/vnormalize-css/

Date: July 1st 2018, 2:12:00

Copyright license: The article usingCC licensing 4.0