Bulmaswatch
Themes for Bulma, inspired by Bootswatch.
Get started
Read the instructions here.
Development
Assuming you already have Node.js (v10), Yarn and Bundler
yarn install # or npm install
bundler install
yarn start
Credits
- @jgthms for Bulma
- @thomaspark for Bootswatch
Copyright and License
Copyright 2017 - Present Jenil Gogari.
Code released under the MIT License.
Dropdown color variables
There seems to be some variables that are either missing or not overridden for dropdowns.
Specifically hover color and hover background color.
For reference I'm using Cyborg theme. Hovered dropdown items have black text on dark gray backgrounds and have the exact same hover background. You probably only need to do this for dark themes.
Bulma file: https://github.com/jgthms/bulma/blob/master/sass/components/dropdown.sass
0.6.1 update
Bulma recently moved to 0.6 and there are a few updates.
The biggest changes that will effect Bulmaswatch is the new blue
link
color, and the navbar markup changed.https://bulma.io/2017/10/09/roses-are-red-links-are-blue/
Ability to turn off direct font import in CSS
Closes #45
I named the variable
$bulmaswatch-import-font
so that its namespaced.This solution only disables the hardcoded
@import
, it doesn't make the font configurable.By disabling this, the user should know that they either need to import it through other means such as the
<link>
tag or override all instances offont-family
manually.EDIT:
PR #31 seems to try to solve the same problem but they only edited Flatly. I went through all the themes.
Their solution would be more ideal since it gives the user full control of the font, however they didn't put in the work to update all the themes.
Maybe you could implement it that way eventually, but for now I think this PR is a good enough solution to some of the problems caused by the hardcoded
@import
.Warning text color
Hi,
Some themes have a light/yellow warning background color with dark text. Other themes, such as Darkly and Flatly have light warning text.
If I enter the yellow color from one of those themes (#F1B70E) into this contrast checker tool: https://webaim.org/resources/contrastchecker/ it suggests that dark text is more accessible.
Would it be possible to make the fonts in the themes optional?
I'm using Journal which has this font in
_overrides.scss
But I also want to use this font that I include through my HTML.
I would much rather have them both be in the link tag but News Cycle is hard coded into the overrides.
Possible solutions:
Sass has control structures right? Can you add a boolean variable + an if-statement to conditionally include this font.
That way I can remove/disable it from my css and then combine it with Raleway in my link tag.
A simpler solution might be to add another scss file to the themes with custom fonts.
Add a
_theme-font.scss
file, it should contain just one line, the@import url(...)
.This allows me to do the same thing in a different way.
Select dropdown arrow over the select content
Just found bulmswatch today. Thanks for your hard work.
I was using the current
0.4.2
CDN version of Bulma, like this:<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.css">
When I have a select styled, it looks like this (correct):
If I switch over to a bulmaswatch CSS (minified download version), I get this:
My select style looks like this:
Am I doing something wrong?
Use the variable $control-height to set height of form element.
Hi,
It may be more simple to use the variable $control-height instead of overwrite all form element. It seems all were good after these changes.
If there is a problem, I will correct.
Thanks for reading
Input text is hardly visible in dark themes by default
Hi!
First of all, thank you for putting this together.
Input text is hardly visible in dark themes by default. For example, look at the cyborg theme
Not sure if this is intended or not.
select with is-multiple in the cerulean swatch has a bug
Here, I've created a codepen to demonstrate the issue.
It seems the issue is with this:
.button,.control.has-icons-left .icon,.control.has-icons-right .icon,.input,.pagination-ellipsis,.pagination-link,.pagination-next,.pagination-previous,.select,.select select,.textarea{height:2.375em}
This is my fix:
.select, .select select { height: auto!important; }
Getting an overflow in .media-content
Bug
Expected behaviour
No overflow at all
Suggested edit
Things I checked
I've compared it to standard Bulma as well as the Superhero style both of them didn't have the bug. When I look in the element styles:
overflow: auto
Opening it says:Solution
I haven't checked if it worked only through the developer tools. This was done by unmarking
overflow: auto
and addingoverflow-y: hidden
Module build failed: Undefined variable: "$button-focus-border".
Trying to even get this started and I am getting this.
On
app.scss
:Gives me:
New tagged release?
Hi! Looking at the history there are a few commits since the v0.8.1 tag on Apr 26, 2020. Reading the issues it looks like there's some work needed (PRs welcome?) to bring Bulmaswatch up to fully supporting the Bulma 0.9.x release series, but it'd be great to have a v0.8.2 tag in the meantime to be able to pin sites to and capture the latest fixes.
Thanks for the great themes!
build(deps): 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.
bookmarklet use
in order to use the bookmarklet we had to make some minor modifications, thought you might like to see that, i would of rather been able to import the bookmarklet with a crossorigin script tag and avoided maintaining this file (minor issue) ;) thank you for the bookmarklet
https://github.com/ddupas/msfish/blob/main/bookmarklet.js
How is the status of `@imort` deprecation and replace to @use/@forward?
I mainly use the npm version of bulmaswatch. With
@import
being deprecated in Dart Sass, bulmaswatch should be replaced with@use
and@forward
. However, at this time, the bulmaswatch source is so dependent on@import
that we may have to consider discontinuing its use. Are there any plans for bulmaswatch to support the obsoletion of@import
?I have used bulmaswatch conveniently in the development of several WebView applications. It has been especially useful in implementing the Dark/Light mode switching. Thank you!
build(deps): bump postcss from 7.0.17 to 7.0.39
Bumps postcss from 7.0.17 to 7.0.39.
Release notes
Sourced from postcss's releases.
... (truncated)
Changelog
Sourced from postcss's changelog.
... (truncated)
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.