The Axis layout system used Grid based layout that consists of following:

• Container

• Row

Layout in Axis is responsive that means, we don't need to have fixed vertical Columns, we simply use the Column inside the Row and our content automatically gets evenly places without breaking the responsiveness by auto adjusting as we place more column.

Every Column has minimum width of 200px to ensure your content shifts to the next row if there is not enough space on mobile

• Containers are used as a wrapper to your content this should remain the same across your website for consistency and uniformity.

• Row should have Container as a parent and they are used as a wrapper to columns

• Columns will auto adjust your content by placing overflowing content to next row

Usage

import React from 'react'
import { Container, Heading } from '@therise3107/axis'

const home = ({ children }) => (
    <Container>
        {children}
    </Container>
)

Containers are fully responsive, they will auto-adjust based on the screen size. Below is the breakpoints table used for the maximum width of Containers:

Containers can also be fluid just use them as <Container fluid>

API Reference

For screen size (sm) ≥ 576px Container has horizontal padding of {theme.variables.gutter}rem

For screen size (xs) < 576px Container has horizontal padding of 0.5 * {theme.variables.gutter}rem

You can change the gutter in your theme file just note the same gutter is used Button, Container and Row

Installation

Use npm or yarn:

$ yarn add @theise3107/axis

Use ThemeProvider to wrapper all of the styled-components to provide the theme as prop:

Use styled-components in your pages

Usage

Using Column is very simple just use them inside your Row(s) to place your content, every Column has fixed minimum width of 200px and maximum width of the parent row.

Simple usage

import React from 'react'
import { Row, Column, Container, Heading, Text } from '@therise3107/axis'

const home = () => (
    <Container>
        <Row>
            <Column>
                <Heading>Cats 🐱</Heading>
                <Text>Cats are planning global invasion!</Text>
            </Column>
            
            <Column>
                <Heading>Dogs 🐶</Heading>
                <Text>Dogs are here to the rescue!</Text>
            </Column>
        </Row>
    </Container>
)

Props, following will only be applied when the screen size matches their respective size:

Compound usage

• The above code will reserve 2 / 3 space for first column, 1 / 3 for second column for screen size ≥ md+

• The above code will reserve 1 / 2 space for first column, 2 / 3 for second column for sm < screen size < md

Usage

If you are going to use your theme then first you need to define your typography in your theme file like this:

then, import Heading in your file:

Usage

Simply import Flex from axis:

import React from 'react'
import { Flex, Text } from '@therise3107/axis'

const home = () => (
    <Flex>
        <Text>Sample text 1</Text>
        <Text>Sample text 2</Text>
    </Flex>
)

Concept

Flex uses x-axis and y-axis to lay the flex-items, by default the direction of flex is row. We use the concept of main-axis and cross-axis

• main-axis is the axis around which flex is laying it items, by default row

• cross-axis is the perpendicular axis to the main axis, by default column

This means changing flex-direction should also reverse the main-axis to cross-axis and vice versa, for this reason, we first need to define the main-axis and cross-axis

API Reference

Further reading

You can also read about Aligning of items in Flex at MDN

Introduction

While typography is much easier to state but it is sometimes complicated to follow along. Establishing a good and clear typography is two way process, first your designs should be clear and well visible, second how we have implemented those design in our code with the rules which we define based on the designs.

We are mostly going to talk how we can work on the later part, i.e defining the rules which can be extended and uniformly applied to all of our content. The first step is to differentiate various content types, like what is heading, text and link and how they are used together. The next step is to draw the common styling analogy, like what are the typographies which are using same font-family. In next step we create a grouping of these common styling and name them appropriately for example

• Typography primary for main text like heading, texts

• Typography secondary for auxiliaries like font inside button

• Typography code for code snippets

We can continue the list as per our design, but the main concept is every code snippet should use the code typography, same for others as well. This is encouraged to not mix styled-components with naked <p> tags.

Don't worry if this doesn't make much sense right now, the key concept is we use a named property for classifying different texts in our app.

Typography in Axis is provided via three Components:

• Heading

• Text

• Link

API Reference

In order to use our styled-components, Axis uses the same theme properties across all kind of typographical components. We will need to extend our theme, prior to using the components, something like this:

We are going to use the above file for explaining our components

Usage

Usage of Row is simple, never use them alone, always use them to group the Columns.

API reference

For screen size (sm) ≥ 576px row has row gap of 2 * {theme.variables.gutter}rem and column gap {theme.variable.gutter}rem

For screen size (xs) < 576px row has row gap of 1 * {theme.variables.gutter}rem and column gap 0.5 * {theme.variable.gutter}rem

You can change the gutter in your theme file just note the same gutter is used Button, Container and Row