Skip to content

Releases: beercss/beercss

v3.11.17

10 Jun 14:43
@leonardorafael leonardorafael
v3.11.17
b115268
Compare
Choose a tag to compare
v3.11.17 Latest
Latest

CHANGELOG 3.11.17

minzipped size

🚀 Added

  • Added navigation rail/bar from "M3 expressive" (#460, #461)
  • Added shape element from "M3 expressive" (all 35 shapes)
  • Updated shape size, to be compatible with nav

🩹 Fixed

  • Fixed extend button when using <img class="responsive"> inside it.
  • Fixed horizontal scroll on textarea (#467)
  • Fixed some scoped version issues (#466, #463)
  • Fixed link butons inside nav (#471)

⚠️ Breaking changes

  • Navigation drawer was deprecated on "M3 Expressive" use list instead
  • Refactored main layout to use flexbox grid

Navigation drawer was deprecated on "M3 expressive" use list instead

Before:

<nav class="drawer">
  <a>
    <i>search</i>
    <div>Search</div>
  </a>
</nav>

<nav class="drawer">
  <a href="/path">
    <i>search</i>
    <div>Search</div>
  </a>
</nav>

After:

<ul class="list">
  <li class="wave round">
    <i>search</i>
    <div>Search</div>
  </li>
</ul>

<ul class="list">
  <li class="wave round">
    <a href="/path">
      <i>search</i>
      <div>Search</div>
    </a>
  </li>
</ul>

Added navigation rail/bar from "M3 expressive"

Navigation rail (normal/expanded)

<nav class="left">...</nav>
<nav class="left max">...</nav>

Flexible navigation bar (normal/expanded)

<nav class="bottom">...</nav>
<nav class="bottom max">...</nav>

Refactored main layout to use flexbox grid

Now we use the code below. This is how the majority M3 projects looks like. Only the <main> element is required. Old projects that uses a nav.top/nav.bottom and nav.left/nav.right at same time, could be impacted.

<body>
  <nav class="left">LEFT</nav>
  <nav class="right">RIGHT</nav>
  <nav class="top">TOP</nav>
  <nav class="bottom">BOTTOM</nav>
  <header>HEADER</header>
  <main>MAIN</main>
  <footer>FOOTER</footer>
</body>

image

Added shape element from "M3 expressive" (all 35 shapes)

<div class="shape loading-indicator"></div>

<div class="shape loading-indicator">
  <img class="responsive" src="/favicon.png">
</div>

<div class="small-witdh small-height">
  <div class="shape loading-indicator max"></div>
</div>

image

Assets 2
Loading

v3.11.11

23 May 15:24
@leonardorafael leonardorafael
v3.11.11
aba1207
Compare
Choose a tag to compare
v3.11.11

CHANGELOG 3.11.11

minzipped size

🚀 Added

  • Updated sliders from M3 expressive (new sizes, value indicator and inset icon)
  • Updated button groups (added connected, standard and split helpers)

🩹 Fixed

  • Fixed theme on nav #459
  • Fixed main header/footer z-index
  • Fixed responsive images on button for iOS devices

⚠️ Breaking changes

  • None
<nav class="group">
  <button class="left-round">Button</button>
  <button class="no-round">Button</button>
  <button class="right-round">Button</button>
</nav>
<nav class="group connected">
  <button class="left-round">Button</button>
  <button class="no-round">Button</button>
  <button class="right-round">Button</button>
</nav>
<nav class="group split">
  <button class="left-round">Button</button>
  <button class="right-round">Button</button>
</nav>
Loading

v3.11.4

19 May 16:27
@leonardorafael leonardorafael
v3.11.4
6e273ed
Compare
Choose a tag to compare
v3.11.4

CHANGELOG 3.11.4

minzipped size

🚀 Added

  • Updated borders and backgrounds of cards like latest M3 specs
  • Updated paddings of buttons and chips like latest M3 specs

🩹 Fixed

  • It was showing element on small devices when used <nav class="left drawer min l">...</nav> #453
  • Removed default shadows on button, use elevate, small-elevate, medium-elevate or large-elevate helper

⚠️ Breaking changes

  • None
Loading

v3.11.1

16 May 19:50
@leonardorafael leonardorafael
v3.11.1
458c392
Compare
Choose a tag to compare
v3.11.1

CHANGELOG 3.11.1

minzipped size

🚀 Added

  • Added "M3 expressive" buttons
  • Added "M3 expressive" button groups
  • Added "M3 expressive" FAB menu
  • Added "M3 expressive" split buttons
  • Added "M3 expressive" toolbars

🩹 Fixed

  • Fixed menu top right alignment #451

⚠️ Breaking changes

  • Segmented button was deprecated, use button groups from "M3 expressive"

More about 'M3 expressive"

Loading

v3.10.8

22 Apr 11:21
@leonardorafael leonardorafael
v3.10.8
6f68c7c
Compare
Choose a tag to compare
v3.10.8

CHANGELOG 3.10.8

minzipped size

🚀 Added

  • None

🩹 Fixed

  • Fixed responsive breakpoints #435

⚠️ Breaking changes

  • None
Loading

v3.10.7

17 Apr 11:22
@leonardorafael leonardorafael
v3.10.7
4f959c9
Compare
Choose a tag to compare
v3.10.7

CHANGELOG 3.10.7

minzipped size

🚀 Added

  • None

🩹 Fixed

  • Fixed tooltip on header/footer #433
  • Fixed scoped build

⚠️ Breaking changes

  • None
Loading

v3.10.5

09 Apr 23:08
@leonardorafael leonardorafael
v3.10.5
a19b42e
Compare
Choose a tag to compare
v3.10.5

CHANGELOG 3.10.5

minzipped size

🚀 Added

  • Added scoped version #429 #427
  • Added custom element version
  • Reduced 1kb on final bundle (without gzip)

🩹 Fixed

  • Fixed invalid import path on scoped version and custom element version (fixed in >= 3.10.3) #429 (comment)
  • Fixed typescript declarations (fixed in >= 3.10.4)
  • Fixed some header and footer bevaviors (fixed in >= 3.10.5)

⚠️ Breaking changes

  • None

SCOPED VERSION

Applied on child elements of <* class="beer">...</*>.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/beer.scoped.min.css" rel="stylesheet" />
<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/beer.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/material-dynamic-colors.min.js"></script>
npm i beercss
npm i material-dynamic-colors
import "beercss/scoped";
import "material-dynamic-colors";

CUSTOM ELEMENT VERSION

Applied on child elements of <beer-css>...</beer-css>.

<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/beer.custom-element.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/material-dynamic-colors.min.js"></script>
npm i beercss
npm i material-dynamic-colors
import "beercss/custom-element";
import "material-dynamic-colors";
Loading

v3.9.7

03 Mar 13:55
@leonardorafael leonardorafael
v3.9.7
f359504
Compare
Choose a tag to compare
v3.9.7

CHANGELOG 3.9.7

minzipped size

🚀 Added

  • Reducing 2kb on final bundle (from 16kb to 14kb)

🩹 Fixed

  • None

⚠️ Breaking changes

  • None
Loading

v3.9.6

28 Feb 11:03
@leonardorafael leonardorafael
v3.9.6
0bcf8aa
Compare
Choose a tag to compare
v3.9.6

CHANGELOG 3.9.6

minzipped size

🚀 Added

  • Added top, bottom helpers to menu #422
  • Added more projects that reach 10+ stars #305

🩹 Fixed

  • None

⚠️ Breaking changes

  • None

Added top, bottom helpers to menu

<menu class="top">...</menu>
<menu class="top no-wrap">...</menu>
<menu class="top left no-wrap">...</menu>
<menu class="top right no-wrap">...</menu>

image
image

Loading

v3.9.5

11 Feb 23:08
@leonardorafael leonardorafael
v3.9.5
dd5f349
Compare
Choose a tag to compare
v3.9.5

CHANGELOG 3.9.5

minzipped size

🚀 Added

  • Added support to Popover API on dialog and snackbar elements
  • Added list element (supporting nested and expansion lists too) #410
  • Added small, medium, large, extra helpers to checkbox and radio elements #356
  • Updated root size to 1rem (it will get the browser default automattcally) #38
  • Updated active switch animation, knob gets bigger #191
  • Added space helpers to menu
  • Added border helper to menu
  • Added minimal subset of icons #418

🩹 Fixed

  • Fixed square behavior on images #413
  • Fixed autoresizing textarea #401
  • Fixed setup for Svelte use case #417

⚠️ Breaking changes

  • Removed invalid HTML markup on menu element #410

Added support to Popover API on dialog and snackbar elements

<button popovertarget="dialog">Button</button>

<dialog id="dialog" popover>
  <h5>Title</h5>
  <nav>
    <button popovertarget="dialog">Button</button>
  </nav>
</dialog>
<button popovertarget="snackbar">Button</button>

<div id="snackbar" class="snackbar" popover>
  <span>Some text</span>
  <button popovertarget="snackbar">Button</button>
</div>

Added list element (supporting nested and expansion lists too)

<ul class="list">
  <li>Item</li>
  <li>Item</li>
</ul>
<ul class="list">
  <li>
    <a href="#">Item</a>
  </li>
  <li>
    <a href="#">Item</a>
  </li>
</ul>

Added small, medium, large, extra helpers to checkbox and radio elements

<label class="checkbox small">
  <input type="checkbox" />
  <span></span>
</label>
<label class="radio large">
  <input type="radio" />
  <span></span>
</label>

Removed invalid HTML markup on menu element

// before
<menu>
  <a>Item</a>
  <a>Item</a>
</menu>

// after
<menu>
  <li>Item</li>
  <li>Item</li>
</menu>
// before
<menu>
  <a href="#">Item</a>
  <a href="#">Item</a>
</menu>

// after
<menu>
  <li>
    <a href="#">Item</a>
  </li>
  <li>
    <a href="#">Item</a>
  </li>
</menu>
// before
<menu>
  <a class="row">
    <i>home</i>
    <span>Home</span>
  </a>
  <a class="row">
    <i>search</i>
    <span>Search</span>
  </a>
</menu>

// after
<menu>
  <li>
    <i>home</i>
    <span>Home</span>
  </li>
  <li>
    <i>search</i>
    <span>Search</span>
  </li>
</menu>
// before
<menu>
  <a>Item</a>
  <a>Item</a>
  <menu>
    <a>Item</a>
    <a>Item</a>
  </menu>
</menu>

// after
<menu>
  <li>Item</li>
  <li>Item</li>
  <li>
    <menu>
      <li>Item</li>
      <li>Item</li>
    </menu>
  </li>
</menu>
// before
<menu class="min">
  <div class="field large prefix no-margin">
    <i class="front">arrow_back</i>
    <input>
  </div>
  <a class="row">
    <i>history</i>
    <div>Item 1</div>
  </a>
</menu>

// after
<menu class="min">
  <li>
    <div class="field large prefix">
      <i class="front">arrow_back</i>
      <input>
    </div>
  </li>
  <li>
    <i>history</i>
    <div>Item 1</div>
  </li>
</menu>

image
image
image

Loading