https://github.com/axelra-ag/styled-bootstrap-grid

Re-implementation with styled-components of the bootstrap grid-layout system.
https://github.com/axelra-ag/styled-bootstrap-grid

animated axelra grid-layout react styled styled-components typescript utility

Last synced: 22 days ago
JSON representation

Re-implementation with styled-components of the bootstrap grid-layout system.

• Host: GitHub
• URL: https://github.com/axelra-ag/styled-bootstrap-grid
• Owner: axelra-ag
• License: mit
• Created: 2020-09-11T07:27:43.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-02-16T14:41:35.000Z (10 months ago)
• Last Synced: 2024-10-31T00:22:54.577Z (about 2 months ago)
• Topics: animated, axelra, grid-layout, react, styled, styled-components, typescript, utility
• Language: TypeScript
• Homepage:
• Size: 1020 KB
• Stars: 9
• Watchers: 9
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Axelra Styled Bootstrap Grid

This library is a re-implementation of the bootstrap grid layout system. It uses styled-components as basic components for styling your web layout.

--- 

## Docs

https://lucas-pelloni.gitbook.io/styled-bootstrap-grid/

## Get Started

You can install the library using either yarn or npm. 

```

$ yarn add axelra-styled-bootstrap-grid 

```

Since this library has been built from skratch, you can simply re-styling all components defined on it. For instance, if you want to create a basic grid layout you can do the following: 

```jsx

import React from "react"; 

import styled from "styled-components"; 

import {Col, Container, Row, Spacer} from "axelra-styled-bootstrap-grid";

const MyContainer = styled(Container)`

  margin-top: 10px;

`;

const Column = styled(Col)`

    display: flex; 

`;

export const Example = () => {

  return (

    

      

      

        asfasf

      

    

  );

};

```