Bootstrap Less
This is a Less port of Bootstrap v4, since Bootstrap now uses Sass for CSS preprocessing. This is purely a Sass→Less port: it doesn’t modify or build on the default Bootstrap styles in any way.
The code is currently aligned with Bootstrap v4.6.0. It requires Less v3.9.0 or above to compile. Note: For Less versions below v3.9.0, you can use v1.0.0 of the port, which is compatible with Less >=2.6.0.
Getting Started
Options for installing Bootstrap Less in your project (note that Less v3.9.0 or above is required):
- Install with npm:
npm install bootstrap-less-port
- Install with yarn:
yarn add bootstrap-less-port
- Install with bower (not recommended):
bower install bootstrap-less-port
- Clone the repo:
git clone https://github.com/seanCodes/bootstrap-less-port.git
- Download the latest release
Note that this code is only necessary if you want to use Less in your project and want to import and/or customize Bootstrap’s variables, mixins or styles. If you plan to use the CSS framework wholesale, you can get the compiled CSS files from the main Bootstrap repo, so there’s no need for this code.
Usage
To use these files in your project, simply import them into your main Less file. For example, if you’ve installed Bootstrap Less using npm or Yarn, you might have a file structure that looks like this:
your-project/
├─ less/
│ └─ custom.less
└─ node_modules/
└─ bootstrap-less-port/
└─ less/
└─ ...
In this case, you could then import what you need into custom.less
using module-relative paths:
// custom.less
// Required Files
@import "bootstrap-less-port/less/_functions";
@import "bootstrap-less-port/less/_variables";
@import "bootstrap-less-port/less/_mixins";
// Optional Files
@import "bootstrap-less-port/less/_reboot";
@import "bootstrap-less-port/less/_utilities";
@import "bootstrap-less-port/less/_type";
@import "bootstrap-less-port/less/_grid";
...
This approach is recommended since it will result in a smaller CSS file by omitting the styles you don’t need. (Just be aware that some files are dependent on others.)
Alternatively, you can get the entire framework by simply importing the package as a whole. (Or, if not using a package manager, importing bootstrap-less-port/less/bootstrap
instead.)
// custom.less
@import "bootstrap-less-port";
Theming
The recommended way of customizing Bootstrap is to override the default variables. To override a variable, copy and paste it from _variables.less
into your custom Less file and change its value.
// custom.less
@import "bootstrap-less-port";
// Variable Overrides
@body-bg: @black;
@body-color: @white;
Variable overrides can be included in any file as long as they are imported after the Bootstrap Less files; Less will use the last value assigned to a variable.
For a more in-depth guide to theming, see the Bootstrap docs.
JavaScript
This repo does not include the JavaScript component files from Bootstrap v4. If you’d like to use them the easiest way to do so is via Bootstrap CDN. Otherwise, you can get the files from the main Bootstrap repo by downloading it or installing it using a package manager.
Documentation
See the Bootstrap v4 docs for documentation.
Notes
This port attempts to mirror the source Sass files as closely as possible in order to make updating it straight-forward. This means that variable/mixin naming, custom functions and most code style match the original project with a few notable exceptions:
-
Mixins Mixins work the same as they did in previous Bootstrap versions with the exception that they now use ID selectors instead of class selectors (e.g.
.border-radius()
is now#border-radius()
). This was done to avoid potential collisions with the user’s class names.Variables within mixins are named the same as their Sass counterparts whenever possible, in order to make comparison with the Sass version easier.
-
Custom functions Sass allows for custom functions to be written in the sass files themselves, which isn’t possible in Less. All custom functions have been replaced with Less plugins that add equivalent functions to the language. These plugins are located in
less/plugins/
as JavaScript files.Plugins have also been added to duplicate some native Sass functions for simplicity.
Note: The plugins are included using the
@plugin
at-rule instead of as arguments to thelessc
CLI. This was intentionally done since most Less GUI compilers don’t allow you to customize the command-line arguments. -
Loops Where possible, Sass
@each
loops have been replaced with the Lesseach()
function. Sass@for
directives have been replaced byeach()
together with therange()
function.In order to make catching bugs easier, the Sass versions of most for/each loops have been kept in the code, commented, above the Less versions.
-
Placeholder selectors Since Less has no equivalent for Sass’ placeholder selectors, regular selectors are used instead. In order to prevent name clashes with selectors in users’ code, element selectors prefixed with an escaped
%
are used instead (for example\%grid-column
). -
Code style While the code style is mostly identical to that used by Bootstrap, a few changes have been made:
- Tabs are used instead of spaces
- Leading zeros have been added to decimal numbers for readability
- Spaces have been added between the values of comma-separated lists, also for readability
Contributing
For bugs, feature-requests, or issues with the compiled CSS, please create an issue in the main Bootstrap repo.
For errors or bugs related to the ported code, please submit a pull request or create an issue.
Credits and License
Bootstrap was created by Mark Otto and Jacob Thornton.
The original code copyright 2011-2019 the Bootstrap Authors and Twitter, Inc.
This port and the original code are released under the MIT License.
Module build failed (from ./node_modules/less-loader/dist/cjs.js):
I installed bootstrap less port into my Vue project. I updated less to 3.9.0 and less-loader to 3.9.0 and 5.0.0 as well.
Do you have any idea what's going on?
Getting parse errors in winless 1.9.1
Hi, thanks for putting this project together. However, I have downloaded the files and copies the less files. when I use the latest version of winless on a Windows 10 machine to compile a .css spreadsheet I receive a series of parse errors.
The first set appear to be resolved by placing a colon after every instance of @plugin in _functions.less.
I am struggling with another problem which appear to be do with string interpolation. On lines 91 and 94 of _buttons.less there is (@btn-active-box-shadow = ~"" ) and I get parse errors. These disappear when I replace the double quotes with single ones. However, I then get a parse error on line 56 of _forms.less which I am struggling to resolve.
Can you help? Have I done something wrong in downloading and copying and pasting the files, or what changes do I need to make to make your code work?
How to expand Breakpoints
Hello, thanks for your great work.
Sadly I have trouble to expand the existing breakpoints. I tryed to overwrite the existing, that did not work, than I tried to expand the original file, that dident work either. Can you help me?
`@grid-breakpoints: xs 0, sm 576px, md 768px, lg 992px, xl 1200px, xxl 1440px;
@container-max-widths: sm 540px, md 720px, lg 960px, xl 1140px, xxl 1770px;`
webpack with less-loader build fails with 2.x.x
build with less loader works fine with version 1.0.0, after upgrade webpack build fails with
packages used
invalid Grid row margin
I am using the bootstrap-less-port with Webpack and Less version
3.10.1
.My custom grid setup looks like this:
That works so far, but the generated css for the
.row
class looks like this:It seems, that the problem is the
-
which is outside of the parenthesis in the filemixins/_grid.less
in this code:As soon as moving it inside the parenthesis, the calculation is done correctly during compiling of the less code.
Any idea, am I doing something wrong with my custom setup?
Less 3.8
@seanCodes, this PR is 99% of the conversion to Less 3.7.
It's marked "Don't Merge" because there's a discrepancy in how certain
each()
loops execute vs SCSS's@each
, at the moment (see changes to bootstrap.css in b2837dfab23621bf09193d95c89fb55958711fde). I'll investigate that when I get a chance to put together a reduced test case and file a bug w/ Less.I'm opening this PR to claim #7 and because the 3.5+ syntax is exciting! :P
Cannot find module while using Parcel bundler
I have a simple .less file that contains
and I get errors such as
I tried tweaking around with those files and it looks like adding ".js" when mentioning plugin paths fixes the issue. For example
would cause an error while
would work.
Less 3.9
Replaces #9 and #12, and updates
#for-*
mixin loops witheach(range(@list))
allowed in 3.9. Also bumps required versions to 3.9. It bumps the npm package version to 0.4.0.Thanks to @matthew-dean for the updates to the README and package.json that I stole from his PR.
This also fixes the issue where
.table-responsive
was being output out-of-order.This changes the min required version of Less to v3.9 (to support
range()
).A few tips
Hi! I'm a contributor to Less. Great job on this port! I thought I would give you a few tips which might be helpful.
Since Less v3.0, a user isn't required to write
@import "../../node_modules/bootstrap-less-port/less/_functions";
. Theless-node
FileManager resolves against NPM. So you should be able to write@import "bootstrap-less-port/less/_functions";
For this: "Maps Less has no native concept of maps, which are used extensively in the Bootstrap Sass files..." Less v3.5 beta has just merged in support for re-purposing rulesets / mixins directly as map-like objects, by looking up their properties & values! It's much simpler than maps set / get syntax, and doesn't invent a new "map syntax" since rulesets, by their nature, are already map-like! Check out this PR and see what you think. https://github.com/less/less.js/pull/3242
"Loops Sass @for and @each loops have been replaced with Less’s method of looping which requires unique, named mixins for every loop. This is a bit clunky and means that the loops used in this port are verbose and difficult to read, but it’s the best we’ve got until I can figure out how to overcome this with a plugin." I don't disagree, and there's been various syntax proposals over the years of how to make mixin calls/guards simpler and be consistent with Less's syntax / declarative nature. See this thread: https://github.com/less/less.js/issues/2270. Any suggestions welcome.
Hope that helps!
Problems with @plugin in Magento 2
I'm trying to use this in our Magento 2 e-commerce projects. While compiling less i get the following error:
Magento is using php to compile less: https://github.com/oyejorge/less.php
Any Idea on how i can fix this?
.custom-select appearance cross-browser
Good morning,
I noticed something while I was on Firefox Quantum 60.0.
The custom-select display the caret while on css bootstrap version not. I just checked the css ouput of your less files and custom-select class doesn't have -webkit & -moz prefix for comptability.
bootstrap-less-port/less/_custom-forms.less ligne 181
the code is the same as scss version of bootstrap https://github.com/twbs/bootstrap/blob/v4-dev/scss/_custom-forms.scss#L180
for reference, this is the line of the css version: https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap.css#L3598
Could you take a look and get back to me ?
Thank you,
Ilan PARMENTIER
Bump qs from 6.5.2 to 6.5.3
Bumps qs from 6.5.2 to 6.5.3.
Changelog
Sourced from qs's changelog.
Commits
298bfa5
v6.5.3ed0f5dc
[Fix]parse
: ignore__proto__
keys (#428)691e739
[Robustness]stringify
: avoid relying on a globalundefined
(#427)1072d57
[readme] remove travis badge; add github actions/codecov badges; update URLs12ac1c4
[meta] fix README.md (#399)0338716
[actions] backport actions from main5639c20
Clean up license text so it’s properly detected as BSD-3-Clause51b8a0b
add FUNDING.yml45f6759
[Fix] fix for an impossible situation: when the formatter is called with a no...f814a7f
[Dev Deps] backport from mainDependabot 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 postcss from 7.0.27 to 7.0.39
Bumps postcss from 7.0.27 to 7.0.39.
Release notes
Sourced from postcss's releases.
Changelog
Sourced from postcss's changelog.
Commits
e17c1ef
Release 7.0.39 version6791bd3
Reduce npm package44c581a
Replace nanocolors with picocolors8ba21fd
Remove eslint-ci3994c4a
Release 7.0.38 version6944e1d
Remove development keys from package.json4dd0af0
Release 7.0.37 version8408eb4
Add compilation step0c68063
Move tests to GitHub Actions98b61ba
Replace chalk to nanocolorsDependabot 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 glob-parent from 5.1.0 to 5.1.2
Bumps glob-parent from 5.1.0 to 5.1.2.
Release notes
Sourced from glob-parent's releases.
Changelog
Sourced from glob-parent's changelog.
Commits
eb2c439
chore: update changelog12bcb6c
chore: release 5.1.2f923116
fix: eliminate ReDoS (#36)0b014a7
chore: add JSDoc returns information (#33)2b24ebd
chore: generate initial changelog9b6e874
chore: release 5.1.1749c35e
ci: try wrapping the JOB_ID in a string5d39def
ci: attempt to switch to published coveralls0b5b37f
ci: put the npm step back in for only Windows473f5d8
ci: update azure build imagesDependabot 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 browserslist from 4.11.1 to 4.20.2
Bumps browserslist from 4.11.1 to 4.20.2.
Changelog
Sourced from browserslist's changelog.
... (truncated)
Commits
69e60bf
Release 4.20.2 version733722b
Fix funding URL format14508ce
Release 4.20.1 version43914a8
Update CI config48d1142
Update dependencies90ead7a
Update package.funding1f6f218
README: clarify relative complement (#674)be2f1a5
Release 4.20 versionc293a99
Update dependencies51a1ad2
Addlast N node versions
(with major) support (#671)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 ansi-regex from 5.0.0 to 5.0.1
Bumps ansi-regex from 5.0.0 to 5.0.1.
Release notes
Sourced from ansi-regex's releases.
Commits
a9babce
5.0.14657833
fix incorrect formatc3c0b3f
Fix potential ReDoS (#37)178363b
Move to GitHub Actions (#35)0755e66
Add@Qix
- to funding.ymlDependabot 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.