jepser

Project Title

One Paragraph of project description goes here

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Requirements

jepser

apt-get install php-mbstring

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('SHA384', 'composer-setup.php') === '669656bab3166a7aff8a7506b8cb2d1c292f042046c5a994c43155c0be6190fa0355160742ab2e1c88d40d5be660b410') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"

composer install 
cd {your/theme/path}
npm install

jepser

// helpers.js
/**
 * Generate a valid structure for responsive configuration for a component
 * @param {object} props props received from the component
 * @param {array} baseProps list of props to be validated
 *
 * @returns a structured object with the props for each media query
 */
export const generateResponsiveProps = (props, baseProps) => {
  // from the breakpoints registered check which props exists

jepser

import { Col } from 'super-library'
// either like this
<Col md={5} offsetMd={1} />
// or this
<Col md={{ size: 5, offset: 1 }} />

jepser

const Spacer = ({
   top, left, bottom, right, children,
}) => {
  return (
    <Root
      top={ top }
      left={ left }
      bottom={ bottom }
      right={ right }
    >

jepser

<MatchMedia query={BREAKPOINTS.md}>
 { matches => matches ? <UseThis /> : <UseOther /> }
</MatchMedia>

jepser

// for base usage
<Spacer bottom={2} left={2}>cool component here</Spacer>

// for responsive usage
<Spacer md={{ bottom: 2, left: 2 }} left={1}>cool component here</Spacer>

jepser

const Spacer = ({
  top, left, bottom, right, children, sm, md, lg, xl,
}) => {
  return (
  <Root
    top={ top }
    left={ left }
    bottom={ bottom }
    right={ right }
    sm={sm}

jepser

const Root = styled.div`
  //…
  ${mediaqueries.md`
    //specific rules for this break point
  `
`

jepser

/**
 * Generate a valid structure for responsive configuration for a component
 * @param {object} props props received from the component
 * @param {array} baseProps list of props to be validated
 *
 * @returns a structured object with the props for each media query
 */
export const generateResponsiveProps = (props, baseProps) => {
  // from the breakpoints registered check which props exists
  const shapedPropsWithMq = Object.keys(BREAKPOINTS).reduce(