dragma / styled-bootstrap-grid Goto Github PK
View Code? Open in Web Editor NEWFull Twitter Bootstrap v4 grid system implementation
License: MIT License
Full Twitter Bootstrap v4 grid system implementation
License: MIT License
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;
` }
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:
!important
is used in these cases?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)
Is there a way to set max-width
for <Container fluid>
?
If not, it would be nice to have an option.
Thanks
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.
This is awesome. However I found 2 issues regarding breakpoint
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
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>
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
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>
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 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
upgrade boostrap css from v4.0.0 to v4.1.3
Upgrading from 1x => 3x here —
Thanks!
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
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)
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!
It would be great to be able to show / hide Col's based on screen size.
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'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)
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.
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.
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 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>
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.
When a value for offset={}
is provided in <Col>
, all the other breakpoints will not work.
<Row>
<Col col={12} lg={9} lgOffset={3}>
<Pre>Item</Pre>
</Col>
</Row>
<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.
The broken example should work too since the offset={}
should not affect lg={}
.
CodeSandBox: resize the window to see changes.
Reproducible in the latest version 3.1.0
.
I m creating 3 column. But third column goes into bottom instead of same row.
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?
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.
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.
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
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?
Is there any way to customize the amount of columns your want to use? For example: 24 or even 30?
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
.
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.
Is there a reason for a peerDependency to react ^16.0.0-0?
Forcing install on 17 seems to work fine.
Is it possible to to overwrite the default gutter and breakpoint values?
I'd like to be able to pass in my own configuration
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?
Setup basic react project with library example.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.