Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/acrool/acrool-react-grid
CSS IN JS following Bootstrap RWD design, composed of React + Styled Component
https://github.com/acrool/acrool-react-grid
acrool bootstrap flexbox grid-system react react-bootstrap react-grid styled-components typescript
Last synced: 3 months ago
JSON representation
CSS IN JS following Bootstrap RWD design, composed of React + Styled Component
- Host: GitHub
- URL: https://github.com/acrool/acrool-react-grid
- Owner: acrool
- License: mit
- Created: 2021-11-01T00:38:52.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-10-29T06:20:13.000Z (3 months ago)
- Last Synced: 2024-11-11T07:02:07.468Z (3 months ago)
- Topics: acrool, bootstrap, flexbox, grid-system, react, react-bootstrap, react-grid, styled-components, typescript
- Language: TypeScript
- Homepage: https://acrool-react-grid.pages.dev/
- Size: 3.68 MB
- Stars: 10
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
- awesome-react - Acrool React Grid System - CSS RWD Grid System (React underlying structure)
README
# Acrool React Grid
CSS IN JS following Bootstrap RWD design, composed of React + Styled Component
[](https://www.npmjs.com/package/@acrool/react-grid)
[](https://github.com/acrool/@acrool/react-grid/blob/main/LICENSE)
[](https://github.com/acrool/react-grid/blob/main/LICENSE)
[](https://www.npmjs.com/package/@acrool/react-grid)
[](https://www.npmjs.com/package/@acrool/react-grid)
## Documentation
- [Getting Started](https://acrool-react-grid.pages.dev/docs/getting-started)
- [Faq](https://acrool-react-grid.pages.dev/docs/category/faqs)
- [Config](https://acrool-react-grid.pages.dev/docs/config)
- [Utilities](https://acrool-react-grid.pages.dev/docs/utilities)
- [Breakpoints](https://acrool-react-grid.pages.dev/docs/breakpoints)
- [Container](https://acrool-react-grid.pages.dev/docs/container)
- [Grid System](https://acrool-react-grid.pages.dev/docs/category/grid-system)
- [CSS Grid](https://acrool-react-grid.pages.dev/docs/category/css-grid)
## Features
- Use `React` + `Styled-component` and `styled-component themeProvider`
- Easier to use
- Refer to the design of `Bootstrap 5` and change it to `CSS IN JS` method
- Provides tool CSS for `Bootstrap 5` layout
- Provide `RWD` Media query method
- Support `NextJS 14` (v5.0.3+)
- Container max width `--container-max-width-?` Change from the middle level
## Installation
```bash
yarn add styled-components @acrool/react-grid
```
in your packages. (Make the version of styled-component you use match the version of styled-component used in acrool-react-gird)
```json
"resolutions": {
"styled-components": "5.3.9"
}
```
in your App.js add
`see the example/src/App.js`
```tsx
import {GridThemeProvider, IGridSetting} from '@acrool/react-grid';
import '@acrool/react-grid/dist/index.css';
const gridTheme: IGridSetting = {
spacer: '1rem',
gridColumns: 12,
gridBreakpoints: {
xs: 0,
sm: 576,
md: 768,
lg: 992,
xl: 1200,
xxl: 1540,
},
containerMaxWidths: {
sm: 540,
md: 720,
lg: 960,
xl: 1140,
xxl: 1141,
},
}
```
## Examples
use in your page/component:
```tsx
import {Container, Row, Col, Grid, Flex, media} from '@acrool/react-grid';
const MyPage = () => {
return (
acrool-react-grid
myDesc
col2 (50%)
col2 (50%)
Grid Col2
Grid Col3
Grid Col3
Grid Col3
Grid Col3
);
}
// use rwd
const MyTitle = styled.div`
font-size: 12px;
${media.md`
font-size: 14px;
`}
`
// use rwd props
const Desc = styled.div<{
isVisible: boolean
}>`
${props => media.md`
display: ${props.isVisible ? 'block': 'flex'}
`}
// or
${props => css`
font-size: 12px;
${media.md`
display: ${props.isVisible ? 'block': 'flex'}
`}
`}
`
```
There is also a codesandbox template that you can fork and play with it:
[Acrool React Grid Template](https://github.com/acrool/acrool-react-grid-template)
Use Nextjs example
[Acrool React Grid Nextjs Template](https://github.com/acrool/acrool-react-grid-nextjs)
There is also a storybook that you can play with it:
[](https://acrool-react-grid-storybook.pages.dev)
## License
MIT © [Acrool](https://github.com/acrool) & [Imagine](https://github.com/imagine10255)