beercss 3.6.13

v3.6.13

on Node.js NPM

CHANGELOG 3.6.13

🚀 Added

• Added support to <fieldset> and <legend>
• Added support to <blockquote>, <pre> and <code>
• Added support to <aside> #340
• Added "Fieldsets" section on homepage
• Added "Blockquote, pre and code" section on homepage, inside "Typography" section
• Added "Side content" section on homepage, inside "Containers" section
• Added --top, --bottom, --left, --right global variables representing safe area on mobile devices
• Added a javascript doc https://github.com/beercss/beercss/blob/main/docs/JAVASCRIPT.md #323

🩹 Fixed

• Fixed autofill background color on Chrome #332
• Fixed safe area on mobile devices #338
• Fixed table issues on iOS #333
• Fixed margins on grid items #350
• Fixed textarea content wrap #348
• Fixed search focus #343

⚠️ Breaking changes

• The divider helpers were deprecated. Use the <hr> element to be more semantic
• Removed --overlay, --active, --elevate1, --elevate2, --elevate3 from light/dark.css. This variables was moved to globals.css. You can safely remove from your themes too.

The divider helpers were deprecated. Use the <hr> element to be more semantic

// before
<div class="divider"></div>
<div class="small-divider"></div>
<div class="divider vertical"></div>

// after
<hr />
<hr class="small" />
<hr class="vertical" />

Added support to <fieldset> and <legend>

<fieldset>
  <legend>Title</legend>
  ...
</fieldset>

Added support to <blockquote>, <pre> and <code>

<blockquote>
  ...<br>
  ....<br>
  ....
</blockquote>

<pre>
  ...
  ...
  ...
</pre>

<pre>
  <code>
    ...
    ...
  </code>
</pre>

<p>
  ... <code>...</code> ...
</p>

Added support to <aside> #340

<aside class="right">...</aside>
<h5>...</h5>
<p>...</p>

<aside class="left">...</aside>
<h5>...</h5>
<p>...</p>

To test a codepen with this release

https://codepen.io/leo-bnu/pen/GRbjppY