santosfrancisco / react-awesome-styled-grid

A responsive 8-point grid system layout for React using styled-components

React Awesome Styled Grid 😎

A responsive grid system for React using styled-components

Installation

npm i --save react-awesome-styled-grid

Dependencies

styled-components is a peerDependency and must be installed separately.

npm i --save styled-components

Documentation

Click here for documentation

Basic usage

This grid system is mobile-first based on Google Material Design.

Number of columns: xs: 4, sm: 8, md: 8, lg: 12, xl: 12

Breakpoints size: xs: > 1rem, sm: > 48rem, md: > 64rem, lg: > 90rem, xl: > 120rem

for a custom configuration, see this section of documentation

import { Container, Row, Col } from "react-awesome-styled-grid";

const MyCoolComponent = () => (
  <Container>
    <Row>
      <Col xs={4} md={2}>
        Col A
      </Col>
      <Col xs={6} md={10}>
        Col B
      </Col>
    </Row>
  </Container>
);

Development

run yarn install or npm install to install all dependencies

run yarn start or npm run start to run Docusaurus on port 3000

Go to http://localhost:3000/demo to see live demo and edit Demo.tsx file

Built With

• Styled-components - Visual primitives for the component age.
• Docusaurus - Build optimized websites quickly, focus on your content
• Rollup - Rollup is a module bundler for JavaScript

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Contributors

Thanks goes to these wonderful people (emoji key):

Francisco Santos 💻 📖 👀

Camila Belo ⚠️

Fábio Henrique Gabriele ⚠️

Bernardo Mariano 💻

Ahmed Tarek 💻

Steve Swanson 🚧

This project follows the all-contributors specification. Contributions of any kind welcome!

react-awesome-styled-grid's Issues

Custom dimensions

Hello guys, I did some research and find this lib as a useful replacement for bootstrap grid when I do a react project with styled-components.

I found that I could change the default configuration and this helped me a lot, but it would be greater if I could extend available dimensions with some extra breakpoints ( for example xxl: 1560 and hd: 1920 ).

Do you have any plans to allow such customization?

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

Question about Container width

Hey guys i'm trying to achieve a layout with a nav on the left and a centered content (which contains a grid) on the right.

https://codesandbox.io/s/awesome-grid-oj310

My questions are :

1. Every breakpoints from xs to xl are set to 6 but if you resize the window <Col /> go to full width from a certain point why (I'd like to keep 6/6 all the times)?
2. The <Container /> causes a scroll if you resize the window, this seems to be caused by the width set on the container. Using a max-width wouldn't be better to avoid this scroll ?

@santosfrancisco would be cool if you can provide me some explanations;) thanks in advance :D

Usage examples don't work as shown

The usage exmpales under https://awesome-styled-grid.netlify.com/usage which use a style property on Row or Col don't work as shown.

It fails with the error TS2322:
(JSX attribute) style: {} Type '{ children: Element; style: {}; }' is not assignable to type 'IntrinsicAttributes & IGridRowProps & { children?: ReactNode; }'. Property 'style' does not exist on type 'IntrinsicAttributes & IGridRowProps & { children?: ReactNode; }'.ts(2322)

My setup:
typescript v3.8.3
react v16.12.0
styled-components v5.0.1

I can set styles to the FCs if I Style them with styled-components:

const StyledRow = styled(Row)`
    height: 80px;
`;

This could be fixed by adding
style?: React.CSSProperties;
to the IGridRowProps in index.d.ts

umd module naming error

package.json "module" prop states that the file name is react-awesome-styled-grid.umd.js but in fact it's react-awesome-styled-grid.js.

Can't import ScreenClass or ScreenBadge

Using version 3.1.0, I find the util object is exported, but attempting to import ScreenClass or ScreenBadge yields Module '"react-awesome-styled-grid"' has no exported member 'ScreenClass'.

<Row> and <Col> requires style={{ height: '100%' }}

problem

I am having to add this inline style to the Row and Col in order for my layout to stretch vertically and takes the full height of the area I want.

Isn't there a more elegant way of doing this with this component?

ScreenBadge styled-components type doesn't seem quite right

Hi, I mentioned this in a comment to a closed issue, so I figured I would reproduce it here, I hope I'm not spamming you ;-)

I note there's still a typescript issue with ScreenBadge. It's defined as a StyledComponent, which isn't imported into types/index.d.ts. I added that import from styled-components, but that yielded: node_modules/react-awesome-styled-grid/types/index.d.ts:109:27 - error TS2707: Generic type 'StyledComponent' requires between 2 and 4 type arguments.

It looks like AnyStyledComponent would work, but I'm far from an expert on styled-components.

Hidden / Visible error global is not defined

Hi, when i try to use Hidden / Visible gatsby just go crazy with error like

Uncaught ReferenceError: global is not defined pn react-awesome-styled-grid.js:1 hn react-awesome-styled-grid.js:1 React 17 <anonymous> app.js:168

The above error occurred in the <Visible> component:

hn@webpack-internal:///./node_modules/react-awesome-styled-grid/lib/react-awesome-styled-grid.js:1:12565
Je/t<@webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:28:25346
div
O@webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:28:19237
div
O@webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:28:19237
div
O@webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:28:19237
webpack_exports.default<@webpack-internal:///./src/styles/headersStyles.js:23:19
O@webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:28:19237
HeroHeader
Index@webpack-internal:///./src/pages/index.js:28:51
div
TransitionRenderer@webpack-internal:///./node_modules/gatsby-plugin-transition-link/components/TransitionRenderer.js:33:35
Transition@webpack-internal:///./node_modules/react-transition-group/Transition.js:133:30
DelayedTransitionWrapper@webpack-internal:///./node_modules/gatsby-plugin-transition-link/components/delayTransitionRender.js:32:32
TransitionGroup@webpack-internal:///./node_modules/react-transition-group/TransitionGroup.js:60:30
div
Location@webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:64:18
TransitionHandler@webpack-internal:///./node_modules/gatsby-plugin-transition-link/components/TransitionHandler.js:45:29
main
Ge@webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:28:16810
Layout@webpack-internal:///./src/components/layout.js:57:18
LayoutComponent@webpack-internal:///./node_modules/gatsby-plugin-transition-link/components/Layout.js:44:18
PageRenderer@webpack-internal:///./.cache/page-renderer.js:23:29
PageQueryStore@webpack-internal:///./.cache/query-result-store.js:39:30
RouteHandler
div
FocusHandlerImpl@webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:359:20
FocusHandler@webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:330:13
RouterImpl@webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:235:20
Location@webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:64:18
Router
ScrollHandler@webpack-internal:///./node_modules/gatsby-react-router-scroll/scroll-handler.js:34:35
RouteUpdates@webpack-internal:///./.cache/navigation.js:304:32
EnsureResources@webpack-internal:///./.cache/ensure-resources.js:22:30
LocationHandler@webpack-internal:///./.cache/root.js:67:29
LocationProvider@webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:84:20
Location@webpack-internal:///./node_modules/@gatsbyjs/reach-router/es/index.js:64:18
Root
ee@webpack-internal:///./node_modules/gatsby-plugin-image/dist/index.browser-c5d45e0e.js:808:11
InternalProvider@webpack-internal:///./node_modules/gatsby-plugin-transition-link/context/InternalProvider.js:33:30
StaticQueryStore@webpack-internal:///./.cache/query-result-store.js:127:32
ErrorBoundary@webpack-internal:///./.cache/fast-refresh-overlay/components/error-boundary.js:24:35
DevOverlay@webpack-internal:///./.cache/fast-refresh-overlay/index.js:97:18
RootWrappedWithOverlayAndProvider

Browser Support

Hello

After too many days of searching for good library, I found this is what I am looking for, but I want to know the browser support for this library, can you please add the caniuse results or can you please tell that is this library supports all browsers?

I would be thankful if anyone can help me with this.

Visible & Hidden do not seem to follow custom breakpoints.

I have set custom breakpoints - only 4 (sm - 0-599, md - 600-899, lg - 900-1199 and xl - 1200+) along with a html font size of 62.5. So, in the customConf, the values for breakpoint are 1, 37.5, 56.25 and 75. Visible & Hidden seem to work with 4 breakpoints but they start from xs and not sm as specified. Also, it ignores the html font-size I set using GlobalStyles. So, Visible & Hidden work at 375px, 562px & 750px.

Internet Explorer 11 misses polyfill for scrollTo

Hi There,

don't know if this just related to your demo website or to the whole package, but when trying to open your demo site on IE11 (yep - I really need to support IE11 😆 ), an error occurs because scrollTo is not implemented.

Maybe you'll need to add https://github.com/iamdustan/smoothscroll as a peer dependency.

I will test the library using IE11 and keep you updated, but maybe you already know that IE11 won't be possible to support using this lib.

Config `container` typing is incorrect

The typing for the container property in IConfig seems inaccurate based on the docs. It expects a number container: Record<IGridBreakpoints, number> however the docs indicate you can pass a string "full". Currently I've fixed this at the implementation point by redefining IConfig, but was curious if this is a true bug or if I've misunderstood the docs.

Overall:

interface IConfig {
  media: Record<IGridBreakpoints, ThemedCssFunction<DefaultTheme>>;
  mediaQuery: string;
  columns: Record<IGridBreakpoints, number>;
  gutterWidth: Record<IGridBreakpoints, number>;
  paddingWidth: Record<IGridBreakpoints, number>;
  container: Record<IGridBreakpoints, number>;
  breakpoints: Record<IGridBreakpoints, number>;
}

should likely become

interface IConfig {
  media: Record<IGridBreakpoints, ThemedCssFunction<DefaultTheme>>;
  mediaQuery: string;
  columns: Record<IGridBreakpoints, number>;
  gutterWidth: Record<IGridBreakpoints, number>;
  paddingWidth: Record<IGridBreakpoints, number>;
  container: Record<IGridBreakpoints, number | string>;
  breakpoints: Record<IGridBreakpoints, number>;
}

Typescript types

Hey dudes, I love this lib but I noticed there's no typescript types defined and my linter is complaining. Is there any task in the horizon to add types to this project or have a @types/ helper?

Add wrap-reverse behavior

I expected to reverse how rows wrap the columns when using reverse props, but it's only reversing the direction they are placed. Was this the expected behavior?

() => {
  let text = 'Variables can set here'
  return (
    <Container>
      <ScreenBadge />
      <p>{text}</p>
      <Row reverse={['lg']}>
        <Col debug  lg={3}>
          Column 1
        </Col>
        <Col debug  lg={3}>
          Column 2
        </Col>
        <Col debug  lg={3}>
          Column 3
        </Col>
        <Col debug  lg={3}>
          Column 4
        </Col>
      </Row>
      <Row reverse={['lg']}>
        <Col debug  lg={12}>
          Column 1
        </Col>
        <Col debug  lg={12}>
          Column 2
        </Col>
        <Col debug  lg={12}>
          Column 3
        </Col>
        <Col debug  lg={12}>
          Column 4
        </Col>
      </Row>
   </Container>
  )
}

I opened this PR adding the feature (:

Possible to use with styled-system?

Been playing around with this library, it's fantastic @santosfrancisco! But i would love to combine it with theme-ui. Why? Because i use rebassjs to quickly build out some designs. Using the styled option so i don't have to utilize the bloated emotion library.

Has anyone successfully implemented this library with theme-ui?

The main problem is theme-ui does not use the default styled-components ThemeProvider, therefore breaking this library.

No Visible or Hidden types are exported from the package

No Visible or Hidden typescript types are exported from the package. May be it would be great to add it back?

Fails to pass other props.Only passes the classNames and children

react-awesome-styled-grid/src/components/grid/col.js

Lines 6 to 8 in 2022477

	const Col = styled(({ className, children }) => (
	<div className={className}>{children}</div>
	))`

Should Instead be

   const Col = styled.div``

Current typescript types cannot describe custom grid

With custom grid you could have different amount of columns for example as described here in the documentation. Types should be able somehow to describe it otherwise typescript builds with custom configuration fail.

TypeScript error

I'm testing out your awesome grid system in a TypeScript project, but I'm getting this error:

ERROR in [at-loader] ./node_modules/react-awesome-styled-grid/types/index.d.ts:71:23 
    TS2314: Generic type 'CElement' requires 2 type argument(s).

The error is connect with these two:

export const Visible: React.CElement<IVisibleProps>;
export const Hidden: React.CElement<IHiddenProps>;

Is there a fix for this error?