Solved by Flexbox
A showcase of problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox.
Viewing the Site Locally
The Solved by Flexbox site can be built with Node.js. If you have Node.js installed on your system, you can run the following commands to build and serve a local copy.
# Clone the git repository and cd into the cloned directory.
git clone https://github.com/philipwalton/solved-by-flexbox.git
cd solved-by-flexbox
# Install the dependencies
npm install
# Build and serve the site at http://localhost:4000
npm start
This starts up a local server on port 4000. To view the site in your browser, navigate to http://localhost:4000. If you want to use a different port, you can pass the port number as an argument to npm start
:
npm start -- -p 8080
In addition to building the site and serving it locally, this will also listen for any changes and rebuild the site as needed. This allows you to play around with the code, refresh the browser, and see your changes instantly.
Translations
The following translations have been graciously provided by the community:
Please note that translations are unofficial and may be inaccurate or out of date. To submit your own translation, please submit a pull request or open an issue and link to your translated content.
Sticky footer doesn't work at all in IE11 and not well in Chrome
Took the demo code here: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ and observed a couple of things:
File to import not found or unreadable: CSS:normalize-css/normalize
Each time I do rake preview, it also returns this message regarding some of the CSS files not loading:
"Configuration file: /Users/akuhar/Development/solved-by-flexbox/_config.yml Source: /Users/akuhar/Development/solved-by-flexbox Destination: /Users/akuhar/Development/solved-by-flexbox/_site Generating... >>> Change detected at 15:52:45 to: style.scss error _sass/style.scss (Line 3: File to import not found or unreadable: CSS:normalize-css/normalize. Load paths: /Users/akuhar/Development/solved-by-flexbox/_sass /Users/akuhar/.rvm/gems/ruby-2.0.0-p353/gems/compass-0.12.2/frameworks/blueprint/stylesheets /Users/akuhar/.rvm/gems/ruby-2.0.0-p353/gems/compass-0.12.2/frameworks/compass/stylesheets Sass::CssImporter::Importer(/Users/akuhar/Development/solved-by-flexbox/bower_components) Compass::SpriteImporter) create css/style.css"
When viewing localhost:4000, the site loads, but none of the CSS has loaded with it. Has this happened to anybody else?
Also, my OS is Mavericks (10.9.1) -- I've ran into and seen a number of issues regarding Mavericks and Ruby, so maybe that's part of the problem as well.
Grid - Given CSS and demo's CSS do not tally
I'm really puzzled by how to use your grid system with the styles given on this page: http://philipwalton.github.io/solved-by-flexbox/demos/grids/.
Upon inspection of your demo, they are using a different set of CSS styles.
Add values for flex-shrink and flex-basis to sticky footer example code.
The sticky footer example should include explicit values for
flex-shrink
andflex-basis
, as the default values in some browsers cause the content of the main section of the site to be cut-off.no -webkit- prefix
for some reason the github pages branch's style.css has all the necessary -webkit- prefixes for the flexbox to function properly in safari, etc. but your master's scss files show no prefixing and the only website that your grid system functions properly on my local repo is chrome. where did you get the prefixes from?
for example this is `.Aligner' on your ghpages repo
And this is the same class in your master repo
i could replicate the features by handcoding but I know it would help more people if we resolved the issue here.
sticky-footer in IE + a few extras for #28
Hi Philip,
So here’s a PR with a possible fix on the “sticky footer” IE behaviour regarding issue #28.
The fix is specified in commit cdfade53413b43a6e0124282d2e0e0ba774d610f.
There are some few of extras too, including:
Let me know what you think.
issue with grid's gutter
any grid row container cannot be styled properly, as the negative top margin messes up the area taken by that element - just give the container a border or background
Requirements for fixed footer
I've spent 3 hours trying to make a fixed footer following your directions to the letter. Making it was simple enough, but the problem arose when the window was resized. The footer would not follow the bottom of the window if the window height was increased or decreased. However, on refresh, it would move to its appropriate position on refresh.
In _bass.scss you have
html {height: 100%;}
stated explicitly. This is crucial to the flexbox layout performing as requested, for the sticky footer example especially. I would submit my own pull request but I'm not on my git machine. If needed I can add to the CSS code to include the newhtml
height requirement to the sticky footer page.Holy Graid Layout advertisement area position when the article area has just a few words
I tried your layout and it looks very good. However when the content area is not multi-line (Just for example ten words) then I see the advertisement area does not stick to the right of the page.
Is there a way that you could make the advertisement area stick to the right when the content area is small and the screen width large? I think this is very important for people who have pages that do not have much content.
IE10/11 solutions seem to cause several side-effects
I have been trying to make
height: 100%
work for quite some time now - unfortunately - too many problems, especially if content is more than the visible fold.Compared your use case with mine, tried to simplify the layout by removing as many elements in the main content area as possible, nothing seems to work.
Ended up using
it's definitely not great, but it's better than the footer jumping in the middle of the screen.. and
height: 100%
adds way too many side-effects for it to be a viable solution.the sticky footer example only works because you have html {height: 100%;}
having min-height: 100%; instead of min-height: 100vh; only works in current chrome because you set html { height: 100%; }
This should be documented as requirement.
Site { display: flex; min-height: 100%; flex-direction: column; }
Bump decode-uri-component from 0.2.0 to 0.2.2
Bumps decode-uri-component from 0.2.0 to 0.2.2.
Release notes
Sourced from decode-uri-component's releases.
Commits
a0eea46
0.2.2980e0bf
Prevent overwriting previously decoded tokens3c8a373
0.2.176abc93
Switch to GitHub workflows746ca5d
Fix issue where decode throws - fixes #6486d7e2
Update license (#1)a650457
Tidelift tasks66e1c28
Meta tweaksDependabot 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.
Bump terser from 5.5.1 to 5.14.2
Bumps terser from 5.5.1 to 5.14.2.
Changelog
Sourced from terser's changelog.
... (truncated)
Commits
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.
Bump copy-props from 2.0.4 to 2.0.5
Bumps copy-props from 2.0.4 to 2.0.5.
Release notes
Sourced from copy-props's releases.
Changelog
Sourced from copy-props's changelog.
Commits
40b7974
2.0.52c738f5
Fix: Avoids prototype pollution (#7)4cac863
Merge: Transfer ownership to Gulp Team (#6)54a791d
Doc: Transfer ownership to Gulp Team196fc9e
Merge: Update dependencies and expand ci test versions (#5)e89907f
Test: Update npm to v4 when nodejs is v5 because of npm install error.e970322
Test: Run coveralls when nodejs >= 6 because of its supports063e534
Test: Add nodejs v11-v14 into ci test versions72270af
Doc: Update license yearsf60b928
Build: Update versions of dependenciesDependabot 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.
Bump minimist from 1.2.5 to 1.2.6
Bumps minimist from 1.2.5 to 1.2.6.
Commits
7efb22a
1.2.6ef88b93
security notice for additional prototype pollution issuec2b9819
isConstructorOrProto adapted from PRbc8ecee
test from prototype pollution PRDependabot 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.
Bump nanoid from 3.1.20 to 3.2.0
Bumps nanoid from 3.1.20 to 3.2.0.
Changelog
Sourced from nanoid's changelog.
Commits
23b1369
Release 3.2 version967788e
Remove TS test tools27eaa90
Simplify new binary toola9d9123
Update dependencies32b9bda
Allows passing size or custom alphabet via cli as args (#334)246d5f8
Update viteafdf9c9
doc: Fixed Typo (#335)90a446f
Update benchmark results8ba2319
bench: add@napi-rs/uuid
v4 (#333)f425778
Release 3.1.32 versionDependabot 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.
Bump shelljs from 0.8.4 to 0.8.5
Bumps shelljs from 0.8.4 to 0.8.5.
Release notes
Sourced from shelljs's releases.
Commits
70668a4
0.8.5d919d22
fix(exec): lockdown file permissions (#1060)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.