Beercss Versions Save

Build material design interfaces in record time... without stress for devs... 🍺💛

v3.5.4

3 weeks ago

CHANGELOG 3.5.4

minzipped size

🚀 Added

🩹 Fixed

Added max helper to slider element, to be used as custom slider

<...>
  <label class="slider max">
    <input type="range">
    <span></span>
  </label>
</...>

Added min helper to field element, to be used as autoresize textarea

<div class="field textarea border min">
  <textarea></textarea>
</div>

Added indeterminate state checkbox

This is set using the indeterminate property via JavaScript (it cannot be set using an HTML attribute) https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes:

document.getElementById(elementId).indeterminate = true;

Updated list section on homepage

image

Updated slider section on homepage

image

v3.5.5

3 weeks ago

CHANGELOG 3.5.5

minzipped size

🚀 Added

🩹 Fixed

Added max helper to slider element, to be used as custom slider

<...>
  <label class="slider max">
    <input type="range">
    <span></span>
  </label>
</...>

Added min helper to field element, to be used as autoresize textarea

<div class="field textarea border min">
  <textarea></textarea>
</div>

Added indeterminate state checkbox

This is set using the indeterminate property via JavaScript (it cannot be set using an HTML attribute) https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes:

document.getElementById(elementId).indeterminate = true;

Updated list section on homepage

image

Updated slider section on homepage

image

v3.5.1

2 months ago

CHANGELOG 3.5.1

Size

🚀 Added

🩹 Fixed

// Added max, horizontal and vertical helpers to progress element
<...>
  ...
  <progress class="max"></progress>
</...>

Updated slider element to be like MD3 guidelines (https://github.com/beercss/beercss/issues/261)

image

Updated badge element to be like MD3 guidelines

image

Updated progress section on homepage

image

v3.4.13

3 months ago

CHANGELOG 3.4.13

Size

🚀 Added

ℹ️ Caveats

  • The <ul> and <ol> elements will not work with drawer, left, right, top, bottom helpers. This helpers are exclusive for <nav> element.

⚠️ Breaking changes

  • If you already have custom styles on <ol>, <ul> and <li> tags, this release can break for you (or not)
// Added support to ol, ul, li inside nav element
<nav>
  <ul>
    <li>
      <a>Item</a>
    </li>
    <li>
      <a>Item</a>
    </li>
    <li>
      <a>Item</a>
    </li>
  </ul>
</nav>

// Or continue with the minimalist version
<nav>
  <a>Item</a>
  <a>Item</a>
  <a>Item</a>
</nav>

// Added support to li inside menu element
<menu>
  <li>
      <a>Item</a>
  </li>
</menu>

// Or continue with the minimalist version
<menu>
  <a>Item</a>
  <a>Item</a>
  <a>Item</a>
</menu>

// Added support to ol, ul, li like nav and row elements (except with drawer, left, right, top, bottom helpers)
<ul>
  <li>
    <a>Item</a>
  </li>
  <li>
    <a>Item</a>
  </li>
  <li>
    <a>Item</a>
  </li>
</ul>

Added Reddit template on homepage

localhost_3000_reddit (1)

v3.4.11

4 months ago

CHANGELOG 3.4.11

Size

🚀 Added

  • Downsized the final bundle a little more (from 67.6 to 67.3)
  • Updated dialog element like MD3 specs (https://github.com/beercss/beercss/issues/253)
  • Updated material icon fonts
  • Updated dialog section on homepage with a custom blur overlay example

🩹 Fixed

⚠️ Breaking changes

  • Removed none helper from button element
// Removed none helper from button element

// before
<button class="none">Button</button>

// after (some alternatives)
<button>Button</button>
<button class="transparent">Button</button>

// This is the last release of 2023. 
// Merry christmas and a happy new year for us.
// 🎅🍻🎅🏼🍻🎅🏿🍻

v3.4.12

4 months ago

CHANGELOG 3.4.11

Size

🚀 Added

  • Downsized the final bundle a little more (from 67.6 to 67.3)
  • Updated dialog element like MD3 specs (https://github.com/beercss/beercss/issues/253)
  • Updated material icon fonts
  • Updated dialog section on homepage with a custom blur overlay example

🩹 Fixed

⚠️ Breaking changes

  • Removed none helper from button element
// Removed none helper from button element

// before
<button class="none">Button</button>

// after (some alternatives)
<button>Button</button>
<button class="transparent">Button</button>

// This is the last release of 2023. 
// Merry christmas and a happy new year for us.
// 🎅🍻🎅🏼🍻🎅🏿🍻

v3.4.9

5 months ago

CHANGELOG 3.4.9

Size

🚀 Added

  • Downsized the final bundle in 2kb (from 69.7 to 67.6)
  • Updated table section on homepage
  • Added stripes helper for table element
  • Added min helper for th and td elements
  • Added scrollable table using fixed helper for thead and tfoot elements (https://github.com/beercss/beercss/issues/241)

🩹 Fixed

// Added stripes helper for table element
// Added min helper for th and td elements

<table class="stripes">
  <thead>
    <tr>
      <th class="min">Header</th>
      <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="min">Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td class="min">Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td class="min">Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th class="min">Footer</th>
      <th>Footer</th>
    </tr>
  </tfoot>
</table>

// Added scrollable table using fixed helper for thead and tfoot elements

<div class="small-height scroll">
  <table>
    <thead class="fixed">
      <tr>
        <th>Header</th>
        <th>Header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
      <tr>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
      <tr>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
      <tr>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
      <tr>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
      <tr>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
    </tbody>
    <tfoot class="fixed">
      <tr>
        <th>Footer</th>
        <th>Footer</th>
      </tr>
    </tfoot>
  </table>
</div>

v3.4.3

6 months ago

CHANGELOG 3.4.7

Size

🚀 Added

🩹 Fixed

// Added support for standard navigation drawer

<nav class="drawer left|right">
  <a>
    <i>home</i>
    <span>Home</span>
  </a>
  <a>
    <i>search</i>
    <span>Search</span>
  </a>
  <a>
    <i>more_vert</i>
    <span>More</span>
  </a>
</nav>

// inside dialog/article
<dialog>
  <nav class="drawer">
    <a>
      <i>home</i>
      <span>Home</span>
    </a>
    <a>
      <i>search</i>
      <span>Search</span>
    </a>
    <a>
      <i>more_vert</i>
      <span>More</span>
    </a>
  </nav>
</dialog>

Main layouts section

image

Standard navigation drawer

image

v3.4.0

7 months ago

CHANGELOG 3.4.2

Size

🚀 Added

🩹 Fixed

⚠️ Breaking changes

  • Updated the html of input file inside field elements.
// Updated the html of input file inside field elements

// before
<div class="field">
  <input type="text">
  <input type="file">
</div>

// after
<div class="field">
  <input type="file">
  <input type="text">
</div>


// Added more use cases for input file/color

// inside fields
<div class="field">
  <input type="color|file">
  <input type="text">
</div>

// inside button elements
<button class="circle">
  <input type="color|file">
</button>

// inside other elements
<*>
  <input type="color|file">
</*>

v3.3.0

9 months ago

CHANGELOG 3.3.5

Size

🚀 Added

🩹 Fixed

⚠️ Breaking changes

🚩 Examples

// Renamed toast to snackbar to be material 3 friendly

// Before
<div class="toast">...</div>

// After
<div class="snackbar">...</div>

// Updated default chip to be like material 3 guidelines

// Before
<a class="chip">
  <i class="small">today</i>
  <span>Chip</span>
</a>

// After
<a class="chip">
  <i>today</i>
  <span>Chip</span>
</a>

// Merging loader and progress elements into <progress> tag to be more semantic with a pure css solution

// Before
<div class="progress"></div>
<div class="loader"></div>
<div class="progress orange"></div>

// After
<progress></progress>
<progress class="circle"></progress>
<progress class="orange-text"></progress>

<progress value="0.25"></progress>
<progress value="25" max="100"></progress>

// Updated search to not use header tag inside it

// Before
<menu class="min">
  <header class="fixed">
    <div class="field large prefix suffix no-margin">
      <i class="front">arrow_back</i>
      <input placeholder="Search text">
      <i class="front">close</i>
    </div>
  </header>
  ...
</menu>

// After
<menu class="min">
  <div class="field large prefix suffix no-margin fixed">
    <i class="front">arrow_back</i>
    <input placeholder="Search text">
    <i class="front">close</i>
  </div>
  ...
</menu>

// Added stepper examples on homepage

<nav>
  <button class="circle small">1</button>
  <div class="max divider"></div>
  <button class="circle small">2</button>
  <div class="max divider"></div>
  <button class="circle small">3</button>
</nav>

// Added directions to margin and padding helpers
// Added auto-margin and auto-padding helpers

<div class="left-margin"></div>
<div class="horizontal-margin"></div>

<div class="small-margin left-margin"></div>
<div class="small-margin horizontal-margin"></div>

<div class="auto-margin left-margin"></div>
<div class="auto-margin horizontal-margin"></div>

// Added clickable icon on field element using <a> tag

<div class="field prefix">
  <a>
    <i>search</i>
  </a>
  ...
</div>