dragma / styled-bootstrap-grid Goto Github PK

Hey @dragma , I was just trying to run your example, but I'm facing a little technical issue. Here's what I get when I run npm start on the example

Module not found: Can't resolve './styled-bootstrap-grid'

Node version: v9.11.2
NPM version: v5.6.0

(The library is built)

I get An index signature parameter type cannot be a union type. Consider using a mapped object type instead. when trying to use this library with typescript.

Apparently, the issue is coming from the labels in the index.d.ts file for the media object (line 119).
Here there is a discussion about this --> microsoft/TypeScript#24220

Is it just me or am I missing something in the configuration?

I m creating 3 column. But third column goes into bottom instead of same row.

My build process has a sad time because it thinks styled-bootstrap-grid is a git submodule, it looks like a .git directory is included inside the node module :(

Aug 30 08:34:28 PM  npm ERR! path /opt/render/project/src/node_modules/styled-bootstrap-grid
Aug 30 08:34:28 PM  npm ERR! code EISGIT
Aug 30 08:34:28 PM  npm ERR! git /opt/render/project/src/node_modules/styled-bootstrap-grid: Appears to be a git repo or submodule.
Aug 30 08:34:28 PM  npm ERR! git     /opt/render/project/src/node_modules/styled-bootstrap-grid
Aug 30 08:34:28 PM  npm ERR! git Refusing to remove it. Update manually,
Aug 30 08:34:28 PM  npm ERR! git or move it out of the way first.

The issues is that console outputs debugging info such as {styledBootstrapGrid: {…}}.

With yesterday's changes I see console.log(myTheme) was introduced in src/ThemeProvider.jsx. It was for debugging purposes I guess.

It would be great to be able to show / hide Col's based on screen size.

Hello and thank you for your lib!

My problem that i need to activate some JS components only on some breakpoints.
Could you add class with current breakpoint (like media) for importing from styled-bootstrap-grid component?

Thank you for answer!

When a value for offset={} is provided in <Col>, all the other breakpoints will not work.

Example

Working

<Row>
    <Col col={12} lg={9} lgOffset={3}>
        <Pre>Item</Pre>
    </Col>
</Row>

Broken

<Row>
    <Col col={12} offset={0} lg={9} lgOffset={3}>
        <Pre>Item</Pre>
    </Col>
</Row>

In the broken example, the values for lg={} won't be respected.

Expected Result

The broken example should work too since the offset={} should not affect lg={}.

Reproducible Test Case

CodeSandBox: resize the window to see changes.

Reproducible in the latest version 3.1.0.

I cannot use styled-bootstrap-grid together with styled-components v4.

I am getting TypeError: (0 , _styledComponents.injectGlobal) is not a function error as injectGlobal was removed and replaced by createGlobalStyle in styled-components v4.

I would like to have different paddings between my rows for each breakpoint.
Currently only a fixed padding for rows/columns/containers can be set, which would require me to use no-gutters or to build my own styled-row-component with media querries to work around this, which seems counter-intuitive.

Would it be possible to allow something like the following for the gridTheme configuration?

    col: {
        padding: {
            xl: 72,
            lg: 72,
            md: 64,
            sm: 32,
            xs: 15,
        },
    },

Hi!

I having problem overriding the default breakpoints.
I'm using a GridThemeProvider and ${media.desktop...} in my styled components.

Shouldn't it be props.theme.styledBootstrapGrid instead of props.theme.grid here?
https://github.com/dragma/styled-bootstrap-grid/blob/master/src/styled/media.js#L17

When I have
< Col col={3} hiddenXlDown>...</ Col> < Col col={6} hiddenXlUp>...</ Col>
having xl breakpoint set to 1920
on the exact window width of 1920px none of the elements are showing.

I'm using styled-bootstrap-grid in a react application and when this app loads, first the grid has no css, and after a blink, the layout has he correct columns sizes.

There is a way to know if the provider is loaded in order to use a loading?

Url: https://esmuybrutal.puigmar.me/

Thanks

This is awesome. However I found 2 issues regarding breakpoint

1. xs and xxl breakpoints are not adding to generate css
2. when I tried to add extra breakpoints they are now adding to generated css.

const gridTheme = {
gridColumns: 12
breakpoints: {
xxxl: 1920,
xxl: 1440,
xl: 1200,
lg: 992,
md: 768,
sm: 640,
xs: 575,
},
}

it is great if we can get this fixed.

Thanks

https://getbootstrap.com/docs/4.0/layout/grid/#offset-classes

https://getbootstrap.com/docs/4.0/layout/grid/#all-breakpoints

Setup basic react project with library example.

Hi everyone,
I'm facing an issue with noGutter Col props.

It should apply
padding-left:0 padding-right:0
instead of
margin-left:0 margin-right:0

Here it's like is done on Bootstrap https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters

thank you

Steps to reproduce:

npx create-react-app baseCssTest
cd baseCssTest
yarn add styled-components styled-bootstrap-grid
<edit App.js to include <BaseCSS /> at root level>
yarn test

Tests do pass but a very long error about createStyleSheet is being shown in console.

Is there any way to customize the amount of columns your want to use? For example: 24 or even 30?

Is there a way to set max-width for <Container fluid>?
If not, it would be nice to have an option.
Thanks

https://getbootstrap.com/docs/4.0/layout/grid/#equal-width

https://getbootstrap.com/docs/4.0/layout/grid/#variable-width-content

Would be nice to have media as

xs-min
xs-max
sm-min
sm-max
md-min
md-max
lg-min
lg-max
xl-min
xl-max

so you can apply styles for example like:

${media.lg-min && media.lg-max`
    color: red;
` }

https://getbootstrap.com/docs/4.0/layout/grid/#stacked-to-horizontal

https://getbootstrap.com/docs/4.0/layout/grid/#setting-one-column-width

It would be nice to have "less than" functionality with the media api.

${media.lessThan.md``}  // @media (max-width: 768px)
${media.md``}  // @media (min-width: 768px)

Hi,

when I install version 3.0.3

I get the error

npm ERR! path /app/node_modules/styled-bootstrap-grid
npm ERR! code EISGIT
npm ERR! git /app/node_modules/styled-bootstrap-grid: Appears to be a git repo or submodule.
npm ERR! git /app/node_modules/styled-bootstrap-grid
npm ERR! git Refusing to remove it. Update manually,
npm ERR! git or move it out of the way first.

There is .git folder in node-modules which causes the problem.
Can you remove it please

If custom css is passed as follows:

const customCSS = `
  html, body {
     margin: 0;
  }
`;

<BaseCSS css={customCSS} />

It comes in output as

   .xyas html, xyas body {
     margin: 0;
  }

Where this random class name xyas came from? Obviously, it looks like styled-components has added the class, but then it is random in every refresh, how do I set it on my HTML? Because this custom CSS is not getting applied because of this.

Just in case if it helps
React & React DOM: 17.0.1
next: 10.0.5
styled-components: 5.2.1
styled-bootstrap-grid: 3.1.0

I tried using this package for an AMP page and noticed that I was getting errors related to the usage of !important in my styles. After doing some research I found out this was because the package uses !important for some of its stylings as you can see here

Question:

1. Is there any specific reason why !important is used in these cases?
2. Is there a workaround for this?

https://getbootstrap.com/docs/4.0/layout/grid/#order-classes

The problem is in this file, on lines 38, 39, 47, 48, 56, 57.

38 p.hiddenMdDown && `hidden-xs-down`,
39 p.hiddenMdUp && `hidden-xs-up`,
...
47  p.hiddenLgDown && `hidden-xs-down`,
48 p.hiddenLgUp && `hidden-xs-up`,
...
56 p.hiddenXlDown && `hidden-xs-down`,
57 p.hiddenXlUp && `hidden-xs-up`,

I'm not sure how this affects the code elsewhere, but from a quick glance I can see that the data-names are incorrect. The correct data-names should correctly reflect the Md, Lg and Xl properties instead of referencing xs all the time.

I could create a PR for this but I'm not sure if this is enough to solve the problem. Anyone care to elaborate?

It would be nice to have support for the Bootstrap 4 margin utilities.

For example, currently to push column to the right you have to something like this.

const LeftCol = styled(Col)`
  margin-right: auto;
`;

<Row>
  <LeftCol auto>on the left</LeftCol>
  <Col auto>pushed to the right</Col>
</Row>

Nicer syntax would be:

<Row>
  <Col auto mr-auto>on the left</Col>
  <Col auto>pushed to the right</Col>
</Row>

Hey, thanks for the library. Looks very good. Have you already make a pull request to @types?
Else why not include the declaration file in your package?

Is there a reason for a peerDependency to react ^16.0.0-0?
Forcing install on 17 seems to work fine.

upgrade boostrap css from v4.0.0 to v4.1.3

Hi. Your grid have hard-coded styles

${media.phone`
    max-width: 540px;
  `}

  ${media.tablet`
    max-width: 720px;
  `}

  ${media.desktop`
    max-width: 960px;
  `}

  ${media.giant`
    max-width: 1140px;
  `}

Please, make it configurable.

https://getbootstrap.com/docs/4.0/layout/grid/#mix-and-match

I'm getting this error. I'm simply importing the BaseCSS component and adding it to the App.js render function. Am I missing something here?

Uncaught TypeError: (0 , _styledComponents.createGlobalStyle) is not a function
    at Object../node_modules/styled-bootstrap-grid/dist/BaseCSS.js (BaseCSS.js:25)
    at __webpack_require__ (bootstrap 54c27fd1532ace9c0c1f:712)
    at fn (bootstrap 54c27fd1532ace9c0c1f:117)
    at Object../node_modules/styled-bootstrap-grid/dist/index.js (index.js:43)
    at __webpack_require__ (bootstrap 54c27fd1532ace9c0c1f:712)
    at fn (bootstrap 54c27fd1532ace9c0c1f:117)
    at Object.<anonymous> (App.js:3)
    at Object../www/events/App.js (events.bundle.js:3992)
    at __webpack_require__ (bootstrap 54c27fd1532ace9c0c1f:712)
    at fn (bootstrap 54c27fd1532ace9c0c1f:117)

In Bootstrap you can set the number of columns in a row like this:

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

I would like to see that supported by styled-bootstrap-grid. The example above would preferably translate to something like:

<Container>
  <Row cols={2}>
    <Col>Column</Col>
    <Col>Column</Col>
    <Col>Column</Col>
    <Col>Column</Col>
  </Row>
</Container> 

https://getbootstrap.com/docs/4.0/layout/grid/#vertical-alignment

https://getbootstrap.com/docs/4.0/layout/grid/#horizontal-alignment

Upgrading from 1x => 3x here —

• The 2.0.0 breaking change was forwardRef?
• The 3.0.0 breaking change was migrating to TypeScript (?) — what broke in this release?

Thanks!

Hello,
Is it possible to support other flex direction properties like column etc ?
Currently I'm overriding Row styles when I want to have direction other than row but would be great if library could support it.

I get a typescript error, because the GridThemeProvider doesn't have a children prop:

Property 'children' does not exist on type 'IntrinsicAttributes & ThemeProps'

<GridThemeProvider gridTheme={gridTheme}><ChildComponent /></GridThemeProvider>

According to the documentation, I should provide theme like this:

<GridThemeProvider gridTheme={theme}>

It does not work in this way. It works only if I use grittheme instead of gridTheme. Some typo?

Another issue is that it does not work at all if I provide partly configuration. I need to provide full theme which is kind of annoying.

Is it possible to to overwrite the default gutter and breakpoint values?

I'd like to be able to pass in my own configuration

https://github.com/dragma/styled-bootstrap-grid#basics

When I setup a basic example (without GridThemeProvider), I get an error

Uncaught TypeError: Cannot read property 'getContainerMaxWidth' of undefined at Container.js:45

It works when I wrap the Container in a GridThemeProvider.