lovelyui

A lovely way to use grid system and mediaqueries with React.

Installation

npm i lovelyui

Prerequisites

You should know how emotion works.

Main features

Lovely provides an easy and user-friendly way to work with grid systems and add different styles for each device type. Device sizes based on Ant Design.

The mqs utility

mqs is a function that takes an object, with sizes (xs, sm, md ...) as a key, and a string containing css ('color: red;') as its value. Supports six different sizes (based on ant design sizes): xs, sm, md, lg, xl, xxl. This makes an interaction and returns a string containing the specific styles for each device, and this should be called using emotion css, for example:

/** @jsx jsx */
import { jsx, css } from "@emotion/core";
import { mqs } from "lovelyui";

<h1
  css={css`
    color: black;
    ${mqs({
      xs: "font-size: 18px;",
      sm: "font-size: 20px;",
      md: "font-size: 22px;",
      lg: "font-size: 24px;",
      xl: "font-size: 26px;",
      xxl: "font-size: 26px; color: blue;"
    })}
  `}
>
  The Title!
</h1>;

You can use all valid css/sass style.

The <Row> component

The <Row> component is primarily designed to add spacing to its children. You do this by passing an object as an argument to gaps.

Adds 8px padding to your direct children (which must be <Col> components), and extra small devices like smartphones add only 6px:

<Row
  gaps={{
    xs: 6,
    all: 8
  }}>
</Row>;

And as you may know, padding does not "merge" as a margin, so the spacings that are in the corners of the <Row> container will be smaller than the spacing added on each child. To solve this, simply add the containerGap (<Row containerGap gaps={{//...}}>...</Row>) property that will add the same amount of padding to your container. This would basically work as a margin, but without breaking grid lines, and you add only half of it.

And since you want to use emotion to style the <Row> component, you can pass this to the extraCss parameter:

/** @jsx jsx */
import { jsx, css } from "@emotion/core";
<Row extraCss={css`align-items: center`}>...</Row>

And all other things should be passed to extraAttrs.

The <Col> component

<Col> also provides the extraCss andextraAttrs options of <Row>.

<Col> receives an object for the colSizes parameter, informing how many columns it will occupy (uses 24 column system):

<Row
  gaps={{
    all: 8
  }}
>
  <Col
    colSizes={{
      xs: 24,
      sm: 24,
      md: 24,
      lg: 10,
      xl: 8,
      xxl: 8
    }}
  >
    <ArticlePreviewCover feed_url={article.feed_image} slug={article.slug} />
  </Col>

  <Col
    colSizes={{
      xs: 24,
      sm: 24,
      md: 24,
      lg: 12,
      xl: 16,
      xxl: 16
    }}
  >
    <h2>{article.title}</h2>
    <p>{article.description}</p>
  </Col>
</Row>;

You can also use all on the object to be the same size regardless of device.

And well, as you know, there are cases where you want your elements inside <Col> to have the same height, which is the default behavior of display: flex; children, as in cards components. But that doesn't happen because the direct children of <Row> is the <Col> component, so you can simply add the fullHeight property to the element:

<Col fullheight>...</Col>

this will make all direct (1 expected) children of <Col> have height: 100%

Full example of use

/** @jsx jsx */
import { jsx } from "@emotion/core";
import { Row, Col, mqs } from "lovelyui";

const ArticlePreview = ({ article }) => (
  <article>
    <Row
      gaps={{
        all: 8
      }}
    >
      <Col
        colSizes={{
          xs: 24,
          sm: 24,
          md: 24,
          lg: 10,
          xl: 8,
          xxl: 8
        }}
      >
        <img src={article.image} />
      </Col>

      <Col
        colSizes={{
          xs: 24,
          sm: 24,
          md: 24,
          lg: 12,
          xl: 16,
          xxl: 16
        }}
      >
        <h1
          css={css`
            color: black;
            ${mqs({
              xs: "font-size: 18px;",
              sm: "font-size: 20px;",
              md: "font-size: 22px;",
              lg: "font-size: 24px;",
              xl: "font-size: 26px;",
              xxl: "font-size: 26px; color: blue;"
            })}
          `}
        >
          {article.title}
        </h1>
      </Col>
    </Row>
  </article>
);

export default ArticlePreview;