Skip to content

Home

Jump to bottom
Edmund edited this page Sep 2, 2018 · 4 revisions

Inline docs Build Status codecov

PAX5 is a UI grid-system for JSX applications, styled with Polymorph

Overview

Features
  • Uses Flex
  • Styled with Polymorph (all-in-one module with JSS styles)
  • Fully responsive
  • Fully customizable
  • Built using Synergy

Learn how to integrate with React

import PAX5 from 'pax5';

const App = () => (
    <PAX5.row>
        <PAX5.column>My first column</PAX5.column>
        <PAX5.column>My second column</PAX5.column>
        <PAX5.column>my third column</PAX5.column>
    </PAX5.row>
);

export default App;

Installation & Setup

PAX5

API

<PAX5.row>

<PAX5.row { name, config, no-gutter }>
Param Type Default Info
name String PAX5 The namespace to use for the rendered DOM element
no-gutter Boolean false Enable to render columns with no separating gutter/margin
[config] Object {...} Custom configuration to use when rendering the Row

<PAX5.column>

<PAX5.column { name, width, push, pull, breakpoint-[x], config }>

If the width property is not set then columns will be equal width

Param Type Default Info
name String column The namespace to use for the rendered DOM element
[width] (String|Object) undefined The width of the column
[push] Number undefined Push column by X amount of column spans
[pull] Number undefined Pull column by X amount of column spans
[breakpoint-[x]] Array undefined Width to use at specified breakpoint
[config] Object {...} Custom configuration to use when rendering the Row

width

Basic Usage
<PAX5.row>
    <PAX5.column width='4'>My first column</PAX5.column>
    <PAX5.column width='6'>My first column</PAX5.column>
    <PAX5.column width='2'>My first column</PAX5.column>
</PAX5.row>
Alternatively
<PAX5.row>
    <PAX5.column width={4}>My first column</PAX5.column>
    <PAX5.column width={6}>My first column</PAX5.column>
    <PAX5.column width={2}>My first column</PAX5.column>
</PAX5.row>
Responsive Breakpoints
<PAX5.row>
    <PAX5.column width={{
        'breakpoint-1': [1,2], 
        'breakpoint-2': [1,3], 
        'breakpoint-3': [1,4]
    }}>Column</PAX5.column>

    <PAX5.column width={{
        'breakpoint-1': [1,2], 
        'breakpoint-2': [1,3], 
        'breakpoint-3': [1,4]
    }}>Column</PAX5.column>

    <PAX5.column width={{
        'breakpoint-1': [1,2], 
        'breakpoint-2': [1,3], 
        'breakpoint-3': [1,4]
    }}>Column</PAX5.column>

    <PAX5.column width={{
        'breakpoint-1': [1,2], 
        'breakpoint-2': [1,3], 
        'breakpoint-3': [1,4]
    }}>Column</PAX5.column>
</PAX5.row>
Alternatively
<PAX5.row>
    <PAX5.column breakpoint-1={[1,2]} breakpoint-2={[1,3]} breakpoint-3={[1,4]}>Column 1</PAX5.column>
    <PAX5.column breakpoint-1={[1,2]} breakpoint-2={[1,3]} breakpoint-3={[1,4]}>Column 1</PAX5.column>
    <PAX5.column breakpoint-1={[1,2]} breakpoint-2={[1,3]} breakpoint-3={[1,4]}>Column 1</PAX5.column>
    <PAX5.column breakpoint-1={[1,2]} breakpoint-2={[1,3]} breakpoint-3={[1,4]}>Column 1</PAX5.column>
</PAX5.row>

Push/Pull Columns

<PAX5.row>
    <PAX5.column width={6} push={6}>Column 1</PAX5.column>
    <PAX5.column width={6} pull={6}>Column 2</PAX5.column>
</PAX5.row>
<PAX5.row>
    <PAX5.column width={2}>Column 1</PAX5.column>
    <PAX5.column width={4}>Column 2</PAX5.column>
    <PAX5.column width={3} pull={3}>Column 3</PAX5.column>
</PAX5.row>

breakpoint-[x]

Render columns at different widths depending on the window width

<PAX5.row>
    <PAX5.column breakpoint-1={[1,2]} breakpoint-2={[1,3]} breakpoint-3={[1,4]}>Column 1</PAX5.column>
    <PAX5.column breakpoint-1={[1,2]} breakpoint-2={[1,3]} breakpoint-3={[1,4]}>Column 1</PAX5.column>
    <PAX5.column breakpoint-1={[1,2]} breakpoint-2={[1,3]} breakpoint-3={[1,4]}>Column 1</PAX5.column>
    <PAX5.column breakpoint-1={[1,2]} breakpoint-2={[1,3]} breakpoint-3={[1,4]}>Column 1</PAX5.column>
</PAX5.row>

Configuration

{
    'columns': 12,
    'gutter': '3%',
    'default-stack': '720px',
    'breakpoints' : {
        'breakpoint-0': '0px',
        'breakpoint-1': '460px',
        'breakpoint-2': '720px',
        'breakpoint-3': '940px',
        'breakpoint-4': '1200px'
    }
}
Clone this wiki locally