Layout

Paramount provides building blocks to create responsive layout via components Visible, Row and Column, Container and convenience functions.

Components

• Visible - Conditionally render children depending on screen size
• Row and Column (Grid) - For doing grid layouts
• Container - Keep children at contained width

Hook

Paramount exposes a convenience hook useLayout that you can import to make use of utility functions for layout

currentScreenSize

Retrieves the current screen size

const { currentScreenSize } = useLayout();

getResponsiveValue

const { getResponsiveValue } = useLayout();
const color = getResponsiveValue({
  xsmall: 'red',
  large: 'blue',
});
const number = getResponsiveValue({
  xsmall: 0,
  large: 1,
});

Options

These are all the available theme configuration options, as well as their default values. Pass the config to ThemeProvider

export const layout: Layout = {
  breakpoints: {
    small: 480,
    medium: 768,
    large: 992,
    xlarge: 1200,
  },
  containerSizes: {
    small: 540,
    medium: 720,
    large: 960,
    xlarge: 1200,
  },
  gridColumnCount: 12,
  gutterWidth: 32,
};