I've been struggling to develop some simple, reusable layout components that I can replace bootstrap with.  I generally don't have complex layouts in my projects and bootstrap has always felt like overkill. On top of that, I don't like having 10 miles of classes on my HTML elements.

That's when i discovered https://every-layout.dev

I paid my money cause this is highly useful. I highly recommend this read :)

I've created react components with styled-jsx for the stack, and cluster layouts for work but I'm playing with using the supplied HTML elements available on the pages.

Here's the StackLayout

import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';

const StackLayout = ({ space = '1.5rem', children, className }) => (
  <div className={cn(['stack', className])}>
    <style jsx global>
      {`
        div {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
        }

        div > :global(*) {
          margin-top: 0;
          margin-bottom: 0;
        }

        div > :global(*) + :global(*) {
          margin-top: ${space};
        }

        div:only-child {
          height: 100%;
        }
      `}
    </style>
    {children}
  </div>
);

StackLayout.propTypes = {
  // prop definitions
  children: PropTypes.node.isRequired,
  space: PropTypes.string,
  className: PropTypes.string
};

export default StackLayout;