Blueprint CSS
A lightweight layout library for building great responsive mobile first UIs that work everywhere. Open Source, built with CSS Grid and Flexbox.
Download the single CSS file here.
Documentation
Check out the documentation here.
Changelog
View the Changelog to see details about updates and improvements.
Extensions
Blueprint CSS also has a VSCode snippets extension to make grids even easier. Download from the VSCode Extension Library.
Division via /
using the current sass version with a self-compiled blueprint.scss spams the following warning into the console:
their auto-migrator is pretty neat and running it once over here would prolly be a nice quickwin!
EDIT: forgot to add the current workaround... :p as in other similar issues also mentioned the best current workaround is to downgrade sass to v1.32.x (via
yarn add -D [email protected]
f.e.) since the warning came with v1.33.0 (version findable on the migrator link also)flex-row--stretch specifies justify-content
flex-row--stretch
specifiesjustify-content
which makes it override the spacing classes due to its position in the file.AIUI,
justify-content
should not be required foralign-items: stretch
to work, so I think it this may be fixed by just deletingjustify-content
from theshrink
helper, unless there's a reason it's necessary, in which case, just reordering would allow the spacing classes to take precedence.IE fallback issue?
When using multiple grids on the same page IE is not closing the div correctly and hence the following grids are becoming indented.
If I change your cleafix code to use "display: table;" (as suggested here https://css-tricks.com/snippets/css/clear-fix/) it works.
Is this a change you would consider implementing?
(Disclaimer: I am by no means a CSS guru so will leave to your best judgement, but currently it appears broken).
Below is the overrides I have added to my own code to resolve:
ignore div flag?
Is/Would it be possible to have a bp="ignore" (or something similar) so the parent div could be ignored from the responsiveness, but the child divs are still responsive?
An example case may be a div that is only used for a conditional show/hide container, but it is the child divs of that container that you need responsive. Currently they will not get responsive as the blueprint is only seeing the parent conditional container/div.
Or is there a workaround?
Docs: page horizontal scroll on Chrome on iOS
Hi there. On an iPhone 6 in Chrome the code blocks in the docs look like this and it pushes the body wider so you can horizontal scroll on the page (and not on the code blocks). Just figured you might want to know.
chore(deps): bump engine.io from 6.2.0 to 6.2.1 in /lib
Bumps engine.io from 6.2.0 to 6.2.1.
Release notes
Sourced from engine.io's releases.
Changelog
Sourced from engine.io's changelog.
Commits
24b847b
chore(release): 6.2.1425e833
fix: catch errors when destroying invalid upgrades (#658)99adb00
chore(deps): bump xmlhttprequest-ssl and engine.io-client in /examples/latenc...d196f6a
chore(deps): bump minimatch from 3.0.4 to 3.1.2 (#660)7c1270f
chore(deps): bump nanoid from 3.1.25 to 3.3.1 (#659)535a01d
ci: add Node.js 18 in the test matrix1b71a6f
docs: remove "Vanilla JS" highlight from README (#656)917d1d2
refactor: replace deprecatedString.prototype.substr()
(#646)020801a
chore: add changelog for version 3.6.0ed1d6f9
test: make test script work on Windows (#643)Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
chore(deps): bump engine.io from 6.2.0 to 6.2.1 in /docs
Bumps engine.io from 6.2.0 to 6.2.1.
Release notes
Sourced from engine.io's releases.
Changelog
Sourced from engine.io's changelog.
Commits
24b847b
chore(release): 6.2.1425e833
fix: catch errors when destroying invalid upgrades (#658)99adb00
chore(deps): bump xmlhttprequest-ssl and engine.io-client in /examples/latenc...d196f6a
chore(deps): bump minimatch from 3.0.4 to 3.1.2 (#660)7c1270f
chore(deps): bump nanoid from 3.1.25 to 3.3.1 (#659)535a01d
ci: add Node.js 18 in the test matrix1b71a6f
docs: remove "Vanilla JS" highlight from README (#656)917d1d2
refactor: replace deprecatedString.prototype.substr()
(#646)020801a
chore: add changelog for version 3.6.0ed1d6f9
test: make test script work on Windows (#643)Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
chore(deps): bump jszip from 3.2.2 to 3.10.1 in /docs
Bumps jszip from 3.2.2 to 3.10.1.
Changelog
Sourced from jszip's changelog.
... (truncated)
Commits
0f2f1e4
3.10.1cae5510
Updates for v3.10.1179c9a0
Update changelog for 3.10.161e1df5
Add Jekyll files to gitignoref299cce
Merge pull request #852 from Stuk/metadata-ts852887a
Consolidate metadata types and expose OnUpdateCallback5be00df
Add sponsorship filesdabe864
Update package-lock for benchmarkcc554da
Merge pull request #841 from stevennyman/patch-2caefbc0
Merge pull request #834 from Stuk/benchmarkDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
chore(deps): bump moment from 2.24.0 to 2.29.4 in /docs
Bumps moment from 2.24.0 to 2.29.4.
Changelog
Sourced from moment's changelog.
... (truncated)
Commits
000ac18
Build 2.24.4f2006b6
Bump version to 2.24.4536ad0c
Update changelog for 2.29.49a3b589
[bugfix] Fix redos in preprocessRFC2822 regex (#6015)6374fd8
Merge branch 'master' into developb4e6153
Revert "[bugfix] Fix redos in preprocessRFC2822 regex (#6015)"7aebb16
[bugfix] Fix redos in preprocessRFC2822 regex (#6015)57c9062
Build 2.29.3aaf50b6
Fixup release complaints26f4aef
Bump version to 2.29.3Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
chore(deps): bump @angular/core from 9.0.0 to 11.0.5 in /docs
Bumps @angular/core from 9.0.0 to 11.0.5.
Changelog
Sourced from
@angular/core
's changelog.... (truncated)
Commits
922f492
fix(core): setngDevMode
tofalse
when callingenableProdMode()
(#40124)0aa220b
fix(core): fix possible XSS attack in development through SSR. (#40136)f5aab2b
fix(compiler): handle strings inside bindings that contain binding characters...2fbb684
perf(core): usengDevMode
to tree-shakecheckNoChanges
(#39964)1e3534f
perf(core): usengDevMode
to tree-shake warnings (#39959)35309bb
fix(core): unsubscribe from theonError
when the root view is removed (#39940)3680ad1
fix(core): remove application from the testability registry when the root vie...37bb320
test(core): verifyonDestroy
callbacks are invoked when ComponentRef is des...75e22ab
fix(core): not invoking object's toString when rendering to the DOM (#39843)01c1bfd
fix(core): Ensure OnPush ancestors are marked dirty when events occur (#39833)Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
chore(deps): bump eventsource from 1.0.7 to 1.1.1 in /docs
Bumps eventsource from 1.0.7 to 1.1.1.
Changelog
Sourced from eventsource's changelog.
Commits
aa7a408
1.1.156d489e
chore: rebuild polyfill4a951e5
docs: update history for 1.1.1f9f6416
fix: strip sensitive headers on redirect to different origin9dd0687
1.1.049497ba
Update history for 1.1.0 (#146)3a38537
Update history for #13646fe04e
Merge pull request #136 from icy-fish/master9a4190f
Fix issue: reconnection only happends for 1 time after connection drops61e1b19
test: destroy both proxied request and response on closeDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Addition of other breakpoints
Is your feature request related to a problem? Please describe. In my case I need more than 4 breakpoints over sm, md, lg, xl
Describe the solution you'd like I'd like to declare an array of custom breakpoints
Hi it would be great if there were the possibility of adding as many breakpoints as you want and then automatically generate the columns.
For example in my case I have these breakpoints
But currently I only can use 4 of these
Customizing grid
Hi, I know this isn't the best way to ask for this, apologize in advance. I'm trying to integrate blueprintcss into a project but I need some customizations, what's the best way to do so? I need to edit some SCSS.
I receive an error about the bp attribute
Using React 17 and create-react-app with typescript template
i did
npm install blueprint-css
and imported usingimport "blueprint-css/dist/blueprint.min.css"
in the index.tsx fileBroken Demo
The Demo uses the styles.7da76b9a9ca9e0adee15.css file, which contains: normalize.css v8.0.1 Blueprint CSS v2.5.4 Blueprint CSS 3.1.1
but the last one is NOT identical to one hosted at https://unpkg.com/[email protected]/dist/blueprint.min.css or https://unpkg.com/[email protected]/dist/blueprint.css
The "demo" parts are missing, so you cannot reproduce the demo! (Without using the content of styles.7da76b9a9ca9e0adee15.css)
Container padding
If a want to create a full-page width element with a background (per example) And the content in a container there is no padding, so this causes that a mobile view (or screen size smaller than 1000px) will have the content on the edge of the screen
The basic container (bp="container") should have padding left and right
Other frameworks they do have it
Is there a reason not to? Is meant to be in another way?