Layout

@happeouikit/layout

yarn add @happeouikit/layout

This guideline part has the core layout principles and values.

Screen Sizes

There are five different screen sizes.

• XS, a.k.a Mobile Small: 0px -> 359px
• SM, a.k.a Mobile Standard: 360px -> 416px
• MD, a.k.a Tablet: 417px -> 1024px
• LG, a.k.a Small Laptop: 1025px -> 1280px
• XL, a.k.a Laptop: 1281px -> 1440px
• XXL, a.k.a Desktop: 1441 -> 1920px

Media Queries

Write in "Mobile First": without a media query you define the smallest screen. You can then add more elements with media.min[size] query, see example.

import styled from "styled-components";
import {media} from "@happeouikit/layout

const StyledDiv = styled.div`
  width: 100%;
  ${media.min.md`
    max-width: 1812px;
  `}
`;

To only show something on exact screen size use media.only[size].

const StyledDiv = styled.div`
  width: 100%;
  ${media.only.md`
    display: none;
  `}
`;

NOTE: For tricky situations there is also media.max[size], but please prefer the Mobile First approach, and use the minimum value to keep the code consistent.

Grid

Grid is based on Bootstrap 12 column grid. See Bootstrap documentation for extensive amount of examples. Basically the Bootstrap classes has been transformed to React Components: <Container>, <Row> and <Col>. Each of the components takes in the modifications as parameters, not with classes as in Bootstrap documentation.

For example:

If you want to have for example a fixed width sidebar and then columns for content. Do not use grid for the sidebar+content layout, but use custom elements with fixed with. Inside the sidebar and/or content you can then use a grid.

<Container />

<Row />

<Col />

Margins

Paddings

Spacers

Spacer component accepts width and height, both will default to 16px if value not given.

Popover

Popover allows to create elements that float in reference to a anchor element. You can also use the popover ref to add

Props

• anchor = Anchor element ref
• anchorPosition = "top left" | "top right" | "bottom left" | "bottom right"
• children = Child elements

Popover code example with useOnClickOutside

const PopoverExample = () => {
  const [isOpen, setIsOpen] = useState(false);
  const anchor = useRef();
  const popover = useRef();

  hooks.useOnClickOutside(popover, () => {
    if (isOpen) {
      setIsOpen(false);
    }
  });

  return (
    <div ref={anchor}>
      <button
        type="button"
        onClick={() => setIsOpen((prevValue) => !prevValue)}
      >
        clickedi
      </button>
      {isOpen && (
        <Popover anchor={anchor} ref={popover}>
          <div>
            <p>I am in a popover lol</p>
          </div>
        </Popover>
      )}
    </div>
  );
};