Medium - Atomic layout - Numeric - Custom

App.js

import Layout from 'atomic-layout'

Layout.configure({
  defaultUnit: 'rem' // append "rem" instead of "px" to all numeric values by default
})

// rest of the App code here, such as ReactDOM.render()

Header.jsx

import React from 'react'
import { Composition } from 'atomic-layout'

const Header = () => (
  <Composition
    gutter={2} // compiles to "2rem" of "grid-gap"
    paddingVertical="14px" // compiles to "14px" explicitly
  >
    {/* children */}
  </Composition>
)

export default Header