Skip to content

Releases: Bedrock-Layouts/Bedrock

Removing JavaScript from my Layout Library

14 Dec 18:49
@Jarvis1010 Jarvis1010
@bedrock-layout/[email protected]
f154b8f
Compare
Choose a tag to compare
Removing JavaScript from my Layout Library Latest
Latest

A ResponsiveswitchAt without all the JavaScript

Bedrock's Columns Component has always had the ability to switch to a stacking layout if you provided the switchAt prop. The switchAt prop lets the column component know at which size it should switch from columns to Stack. So nothing has really changed, except one major thing: It no longer requires JavaScript to do it. It's now done with just CSS. Here is an example where if you go below 60ch, it will automatically change to a stacking layout: https://codesandbox.io/s/vibrant-goldstine-bk7bt0?file=/src/App.tsx

What's Changed

Full Changelog: https://github.com/Bedrock-Layouts/Bedrock/commits/@bedrock-layout/[email protected]

Contributors

Jarvis1010
Assets 2
Loading

Breaking Bedrock

21 Nov 18:12
@Jarvis1010 Jarvis1010
@bedrock-layout/[email protected]
33b1835
Compare
Choose a tag to compare
Breaking Bedrock

A detailed description of the motivations of this release can be read at https://non-traditional.dev/breaking-bedrock

in summary:

  • Bedrock will no longer use styled-components. Instead, it will depend on its own Bedrock Layout CSS framework
  • Bedrock has adopted open-props sizes as the default spacing
  • prop-types have been dropped
  • Named exports are now the standard across all packages
Assets 2
Loading

The one where we "use the platform"

14 Sep 03:28
@Jarvis1010 Jarvis1010
@bedrock-layout/[email protected]
4bc9f80
Compare
Choose a tag to compare
The one where we "use the platform"

In this release, we have refactored the internals of the Split component, along with the split CSS, to move away from the JavaScript to do the switchAt logic and move all that to the CSS. It's also allowed me to implement a minItemWidth prop that will allow you to set the minimum item width for the children.

Split is also now responsive by default. The Split will automatically move to a Stack layout if the minItemWidth cannot be maintained inline.

Thanks, and enjoy!

Assets 2
Loading

The one where we align the props

23 Jun 02:12
@Jarvis1010 Jarvis1010
@bedrock-layout/[email protected]
da7666b
Compare
Choose a tag to compare
The one where we align the props

We've been a bit inconsistent here at Bedrock. Each component has been made in a vacuum, which means that we ended up with a couple of ways to say the same thing. In the Grid component we had the minItemWidth prop and in the ColumnDrop we had the basis prop. Both effectively said the same thing. We also had the Inline Component that should have implemented this, but didn't.

So this release is doing just that. The Grid, ColumnDrop, and Inline components now have the same minItemWidth prop. The ColumnDrop will no longer have the basis prop and inline will no longer default to having each of the children have a minimum width of fit-content. This means breaking changes in the following components:

  • Grid
  • MasonryGrid
  • Inline
  • ColumnDrop

In addition, bedrock-layout-css and the primitives packages also got a major version bump due to the changes. I hope you enjoy this update.

What's Changed

Full Changelog: https://github.com/Bedrock-Layouts/Bedrock/commits/@bedrock-layout/[email protected]

Contributors

Jarvis1010
Assets 2
Loading

“I Want to Break Free”

08 Mar 01:43
@Jarvis1010 Jarvis1010
@bedrock-layout/[email protected]
62412d7
Compare
Choose a tag to compare
“I Want to Break Free”

In a perfect world, every website will have a well-defined spacing scheme that you can use to have nice and consistent layouts. In the real world, applications we work on don't have well-defined spacing schemes, and sometimes we just need to use arbitrary spacing values in applications like this.

Unfortunately, Bedrock has forced all spaceing props, like gutter and padding to be based on a spacing scheme and did not have a way to allow arbitrary values. This works well in an ideal situation like a design system or an app with good spacing scheme in the style guide, but extremly difficult otherwise.

Breaking Free of the Spacing Scheme

With this release all gutter and padding values, in addition to the spacing scheme properties, will allow you to pass in any positive integer or valid CSSLength value as a string. This even includes css custom properties wrapped in var, like this: var(--custom-properties). This release will now make Bedrock layout full achieve it's goal of being the "Lodash of web layouts" allowing you to use them in any application.

What's Changed

Full Changelog: https://github.com/Bedrock-Layouts/Bedrock/commits/@bedrock-layout/[email protected]

Contributors

Jarvis1010
Assets 2
Loading

New Package: register-resize-callback

03 Mar 18:24
@Jarvis1010 Jarvis1010
@bedrock-layout/[email protected]
3278959
Compare
Choose a tag to compare
New Package: register-resize-callback

The ResizeObserver API is now fully supported, but I would argue that the API is not super intuitive to how it was intended to work. It is intended to be instantiated with a callback that will take multiple resized elements. Then you can use the ResizeObserver to observe multiple DOM Elements, and call the supplied callback will be called with an array of elements that were resized in this tick. From there you can loop through the elements and make decisions based on them.

In practice, most people want to have one callback per node and so they end up creating multiple ResizeObservers each with their own unique callback just to observe a single node. This is ok for one or two things, but this can start to create performance issues the more you create.

register-resize-callback

I decided to create a wrapper that let's you use a ResizeObserver the way you want to. You simply register a callback for the node you want to observe and it returns a cleanup function, like this:

import { init, registerCallback } from '@bedrock-layout/register-resize-callback';

// used to allow you to safely initialize observer in the browser and not on the server
init()

const callback = (entry) => {
  console.log(entry);
};

const callbackObj = {
  current: (entry) => {
    console.log(entry);
  }
};

const header = document.querySelector('header');

const article = document.querySelector('article');

//register a callback for a node
const cleanupHeader = registerCallback(header, callback)

const cleanupArticle = registerCallback(article, callbackObj)

callbackObj.current = (entry)=>{
  console.log('new callback', entry);
};

//unregister the callback
cleanupHeader()
cleanupArticle()

Go check it out.

What's Changed

Full Changelog: https://github.com/Bedrock-Layouts/Bedrock/commits/@bedrock-layout/[email protected]

Contributors

Jarvis1010
Assets 2
Loading

You Can Ratio this Release

16 Feb 19:37
@Jarvis1010 Jarvis1010
@bedrock-layout/[email protected]
1957411
Compare
Choose a tag to compare
You Can Ratio this Release

Now that aspect-ratio is fully supported across the big 3, it makes more sense to align the Frame component with the CSS-only version that accepts a string in the width/height format. The Frame component will continue to support the two number array for the foreseeable future, but the string format should be the preferred way to use the ratio prop.

What's Changed

Full Changelog: https://github.com/Bedrock-Layouts/Bedrock/commits/@bedrock-layout/[email protected]

Contributors

Jarvis1010
Assets 2
Loading

@bedrock-layout/[email protected]

10 Feb 08:45
@Jarvis1010 Jarvis1010
@bedrock-layout/[email protected]
b657e3b
Compare
Choose a tag to compare
@bedrock-layout/[email protected]

One Package to rule them all

Each of the primitives is independently versioned and installable. There are many benefits to doing this, but it is also nice to have a single install point if you know that you will be using all or most of the primitives.

The @bedrock-layout/primitives package includes all the primitives, hooks, and spacing-constants utilities in a single package as named exports.

Usage

import { Stack, Inline, Split, Cover, Frame } from '@bedrock-layout/primitives';

export function Hero() {
  return (
    <Stack>
      <Inline>{/* */}</Inline>
      <Split>
        <Cover>
          <Stack>
            <h1>{/* */}</h1>
            <p>{/* */}</p>
            <Inline>
              <button>{/* */}</button>
              <button>{/* */}</button>
            </Inline>
          </Stack>
        </Cover>
        <Frame>
          <img />
        </Frame>
      </Split>
    </Stack>
  );
}

What's Changed

Full Changelog: https://github.com/Bedrock-Layouts/Bedrock/commits/@bedrock-layout/[email protected]

Contributors

Jarvis1010
Assets 2
Loading

Type safety for properties that take a CSS length

09 Feb 20:31
@Jarvis1010 Jarvis1010
@bedrock-layout/[email protected]
079e6bd
Compare
Choose a tag to compare
Type safety for properties that take a CSS length

Up until now, props that accepted a CSS length as a string never had any proper type-safety. For example, one could set the minItemWidth to 100jibjabs on the Grid component and nothing would warn you that this is incorrect.

Luckily that is in our past. Bedrock has adopted much better type-safe types for anything that should be a CSS length. Now props, like Grid's minItemWidth prop, will show an error if the format of the string isn't either <number><CSS unit | percentage> or var(<custom prop name>). The following components will have adopted this:

Grid -> minItemWidth
ColumnDrop -> basis
Center -> maxWidth
Cover -> minHeight

What's Changed

Full Changelog: https://github.com/Bedrock-Layouts/Bedrock/commits/@bedrock-layout/[email protected]

Contributors

Jarvis1010
Assets 2
Loading

Better Typing for CSS Length

09 Feb 02:48
@Jarvis1010 Jarvis1010
@bedrock-layout/[email protected]
6e06701
Compare
Choose a tag to compare
Better Typing for CSS Length

We are adding better typing for CSS lengths.

Let's get all this out of the way so we don't have to worry about it again. Sorry

What's Changed

Read more

Contributors

httpete, pdkkid, and 7 other contributors
Assets 2
Loading