*This site is a work-in-progress and some pages are more complete than others. If you have any questions or issues, please email nick.harris@reckitt.com. *

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Version History

« Previous Version 16 Current »

Layout components are fundamental building blocks of Chameleon that contain, pad, and align content within a given device or viewport.

Section

A section is used to break up your page into meaningful chunks of information by wrapping your content in meaningful semantic HTML. Sections run to the full width of the viewport or device and provide top and bottom padding.

Props

  • mode - Sets the background colour of the section and tells its children what “mode” they are in.

    • default - sets the background colour as specified by the --cds-color-background-default token

    • default-alt - sets the background colour as specified by the --cds-color-background-default-alt token

    • inverse - sets the background colour as specified by the --cds-color-background-inverse token

    • inverse-alt - sets the background colour as specified by the --cds-color-background-inverse-alt token

    • transparant - sets no background colour

  • element - sets the semantic element in the HTML. See MDN Web Docs for more information on which element to use for your desired used case.

    • "div", "article", "aside", "section", "header", "footer"

  • removeDuplicateSpacing
    When two or more sections are stacked all but the first section will have their top-padding set to 0. This avoids the appearance of “double padding“. Set this prop to false to disable this setting and maintain the “double padding“

  • removeAllSpacing - Removes all padding from the section

  • className - Allows you to specify a custom className to override this component and it’s children’s styles.

Container

The container is used to contain groups of content within a section. The container controls the horizontal width of your content and provides left and right padding and margin.

Props

maxWidth - Specifies the maximum width of the container.

  • max-text: Runs to the size specified by the max-text token

    • To override this, change the value of --cds-container-size-width-max-text

  • max-grid: Runs to the max grid width (12 cols) as specified by the max grid token

    • To override this, change the value of --cds-container-size-width-max-grid

  • full-width: Runs to the edges of the viewport or device

disableGutters - Removes left and right padding if set to true

className - Allows you to specify a custom className to override this component and it’s children’s styles.

Grid

Chameleon’s grid system uses containers and grid items to layout and align content across a 12 column grid. Using flexbox, our grid system is is fully responsive and allows you to define layout behaviour across many breakpoints.

The grid component is actually made up of two sub components; gridContainer, and gridItem.

Grid container

<gridContainer /> acts as the outer container for the grid.

Props:

  • rowSpacing - Defines the vertical space between <gridItem/> rows. Accepts spacing tokens.

  • columnSpacing - Defines the horizontal space between <gridItem/> columns. Accepts spacing tokens.

  • wrap - Defines the flex-wrap css property.

  • direction - Defines the flex-direction css property.

  • tag - Defines the components HTML tag

  • alignContent - Defines the align-content css property.

  • justifyContent - Defines the justify-content css property.

  • alignItems - Defines the align-items css property. It's applied for all screen sizes. works when component - 'container'

  • className - Allows you to specify a custom className to override this component and it’s children’s styles.

Grid item

<gridItem /> - wraps each individual column

The grid item has the following props which accept an int representing the number of columns you want to span for that particular breakpoint: xxs, xs, sm, md, lg, xl , xxl.

Item widths are set in percentages, so they're always fluid and sized relative to their parent element.

<GridContainer
  alignContent="start"
  alignItems="start"
  columnSpacing="6"
  direction="row"
  justifyContent="start"
  rowSpacing="2"
  tag="div"
  wrap="wrap"
>
  <GridItem xxs={12} xs={8} sm={6} md={4} lg={2} xl={1} xxl={1}>
    {children}
  </GridItem>
</GridContainer>

Fluid-grid

tbd

Page Block

It is recommended that your sections always start with a heading.

You can use the <PageBlock/> component to quickly add a <Section/>, <Container/>, and <HeadingBlock /> to the page to maintain clean code and to ensure correct setup.

Using the exposed components:

<Section element="section" mode="default">
  <Container maxWidth="max-text">
    <HeadingBlock
      align="start"
      description="Lorem ipsum description"
      descriptionVariant="bodyM"
      headline="Title"
      headlineTag="h2"
      headlineVariant="headlineXL"
    />
    {children}
  </Container>
</Section>

Using <PageBlock>

<PageBlock
  heading={{
    align: "start",
    description: "Lorem ipsum dolor",
    descriptionVariant: "bodyM",
    headline: "Title",
    headlineTag: "h2",
    headlineVariant: "headlineL",
  }}
  maxWidth="max-grid"
  mode="default"
>
{children}
</PageBlock>

Internal notes

  • Section controls the background and paddings. It defaults to div now, but it can be section, aside, article, header, footer

  • Container controls the max-width and the values are S = 47.5 rem(760px). M = 72 rem (1152px), L = 90 rem (1440px),  Fluid width = 100%. No defaults here for now.

  • Grid component can be configured with breakpoints only. No presets here, they should be done on a backend level. Library just provides the tool here.  

  • Fluid Grid component is the one where we control items per row and preferred size and the rest is done by browsers without breakpoints involved. Two modes here – centered and standard. No default for now.

  • No labels