How to use the atomic-layout.configure function in atomic-layout

To help you get started, we’ve selected a few atomic-layout examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github kettanaito / atomic-layout / examples / Playground / PeriodExample.jsx View on Github external
import React from 'react'
import Layout, { Composition } from 'atomic-layout'

Layout.configure({})

const templateBox = `
thumbnail
heading
channelName
meta
`

const templateRow = `
thumbnail heading heading
thumbnail channelName meta
thumbnail description description
`

const Video = ({ isBox, title, channelName, views, description }) => (
github kettanaito / atomic-layout / examples / configuration / CustomUnit.jsx View on Github external
componentWillMount() {
    Layout.configure({
      defaultUnit: 'rem',
    })
  }
github kettanaito / atomic-layout / examples / configuration / CustomBreakpoints.jsx View on Github external
componentWillMount() {
    Layout.configure({
      defaultUnit: 'rem',
      defaultBreakpointName: 'mobile',
      breakpoints: {
        mobile: {
          maxWidth: '575px',
        },
        tablet: {
          minWidth: '576px',
          maxWidth: '768px',
        },
        desktop: {
          minWidth: '769px',
        },
      },
    })
  }

atomic-layout

Physical representation of layout composition to create declarative, responsive layouts in React.

MIT
Latest version published 4 years ago

Package Health Score

51 / 100
Full package analysis