Documentation is good, but I can't get along the "Grid" system

[monecchi]

Documentation is good, but I can't get along the "Grid" system

[proksh]

Hey @monecchi,

The first thing I have noticed is that you are using 'react-atomize', I have moved the package to 'atomize' and updated it. I will recommend you to move to that package.

For Grid layout, it is very similar to reactstrap, and I think you are using it correct. For 3/4 column layout on 12 column grid u can use -

<Row>
  <Col size={9}>
    {/* ... */}
  </Col>
  <Col size={3}>
    {/* ... */}
  </Col>
</Row>

For making it responsive you can use -

<Row>
  <Col size={{ xs: 12, md: 9 }}>
    {/* ... */}
  </Col>
  <Col size={{ xs: 12, md: 3 }}>
    {/* ... */}
  </Col>
</Row>

For changing the order on mobile you can use -

<Row>
  <Col size={{ xs: 12, md: 9 }}>
    {/* ... */}
  </Col>
  <Col size={{ xs: 12, md: 3 }} order={{ xs: '-1', md: '0'}}>
    {/* ... */}
  </Col>
</Row>

You can also use offset just like in reactstrap. Let me know if you still have some issue.

[monecchi]

Hey there @proksh! Thanks for following up. I removed 'react-atomize' and updated to 'automize' repo. However, I'm now missing all layout styles I've set up until now, any hints regarding this issue?

[proksh]

I think it must be because I have replaced styled-component with styletron now. Can you try to remove the styled-component & install styletron instead.

https://atomizecode.com/docs/react/setup

[monecchi]

@proksh Thanks for pointing out styletron. I believe I'll wait for Atomize to grow towards it docs and UI components before trying it out again.

I got a glimpse on styletron set up doc and as long as I'm new to React, it seems to me a considerable move... I'm not really sure how to integrate it with Atomize... Wouldn't it be something supposed to be working out of the box?

Anyway, I really appreciate your help.

[monecchi]

@proksh I had it working now with Styletron ... However the issue with columns persists...

If I use a <Col> with along some specific breakpoint sizes while wrapping a <Div> within it, is it required to set different width sizes for the

for these same breakpoint sizes?

My project’s custom styles kind of sets everything within a 1366px max-width, container, and I’ve reflected that on atomize theme setup by defining breakpoints and grid sizes.

What I’m trying to achieve is a simple “ready to use” column configuration, so if I set sizes for the it simply adjusts itself as per the theme’s config...

I was hoping my “Cards” UI layout to be 4 columns on xl, 3 columns on md, 2 columns on sm and with a few tweaks 2 columns also on xs...

Here”s what I’ve achieve so far, I’m just not sure while it columns are broken even if I copy the markup from Atomize’s landing page on GitHub...

[https://github.com/monecchi/react-wp-rest-api/blob/master/src/App.js](App theme’s config)

[https://github.com/monecchi/react-wp-rest-api/blob/master/src/components/FoodMenu/CardsList/FoodMenuItems.js](Columns Cards Layout)

[proksh]

@monecchi

I think you are using some CSS for the container too. At one place you have used <Container> inside the class stores-card__container while at another place, you have given class to container <Container className="stores-card__container">. That's what causing the issue.

You are adding padding with this class and when you use it with the container, container overwrites those styles.

What you can do is remove that css .stores-card__container since you are using an atomize container.

Also you can replace the theme with this one -

const theme = {
  fontFamily: {
    primary:
      '"SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"',
    secondary:
      '"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"',
    code: "'Fira Mono','Roboto Mono', monospace"
  },
  colCount: 12,
  grid: {
    containerMaxWidth: {
      xl: "1366px",
    },
    gutterWidth: "16px",
  },
  textSize: {
    size: {
      display3: "48px"
    },
    height: {
      display3: "56px"
    }
  },
  colors: {
    brandgray: "#F7F5F4",
    white: "#ffffff",
    dark: "#141b24",
    brand: "#FC0E36",
    brandAlt: "#EF2840",
    brandHover: "#ea1d2c",
    success: "#1BC160",
    successDark: "#36b37e",
    danger: "#FC0E36",
    softDanger: "#FED9DB",
    softSuccess: "#D7f0E5",
    warning: "#FCC246",
    info: "#3366FF"
  },
  rounded: {
    brandRadius: "20px"
  }
};