jenil / bulmaswatch

Themes for Bulma

👋 Hi, I’m @jenil

bulmaswatch's Issues

Recommended customization method

Thanks for a great project. Sorry if this is a stupid question, but what's the recommended method for customizing a swatch, with an eye towards Bulma and BulmaSwatch updates? So far I've been tweaking _variables.scss & _overrides.scss.

Possible problem with the notifications in some of the themes

Hi,

First, thank you for this repo. I use your themes in my project and they add a great value.

There is one problem that I noticed with the notification class in three of the themes: cerulean, simplex and spacelab. In these themes the notification class is transparent, making the notification class unusable in some cases. Do you think that this is something that you would consider addressing?

This is an example from Cerulean:

Adi.

Pagination link text is hardly visible in Darkly theme

Hi,

In the current version (0.7.1), the text of Darkly themed pagination links is difficult to read, as the text color is a similar shade of grey to the background.

This seems to affect:

• pagination-link (without is-current class)
• pagination-previous
• pagination-next

An example can be seen here: https://jenil.github.io/bulmaswatch/darkly/#pagination

Bulma 0.4.1

Hi there, awesome work on the themes! Much appreciated. I like bulma for the fact that it is just a css file, and being able to replace that file with one of these for themes makes it just too easy 😄

I was just wondering, any plans on upgrading to Bulma 0.4.1? While most of the style works just fine, some things are missing, like the new field element

Cheers

Problem when using with bulma installed by yarn

Hello,

thanks for your package. It is really great. I have a question:
when I'm installing both bulma and bulmaswatch with yarn the imports of bulma do not work, see e.g.
https://github.com/jenil/bulmaswatch/blob/gh-pages/default/bulmaswatch.scss#L3

Replacing the import
@import "bulma";
by
@import "~bulma";
solves the problem but this is probably not the best solution.

Is there a way how to handle this in a more elegant way?

Best,
Dennis

Tab colors

Are these white background colors on the tabs intentional or a bug?

I took this screenshot straight from here: http://jenil.github.io/bulmaswatch/cyborg/

Would it be possible to make the fonts in the themes optional?

I'm using Journal which has this font in _overrides.scss

@import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700);

But I also want to use this font that I include through my HTML.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:200,300">

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.

Links in hamburgermenu gets same color as background

When using the "hamburgermenu", the text-color on the links is the same as the links in the main-menu. Resulting in a ex. white links on white background.

Do you take PRs?

I was working on a Bulma theme using this repo as a a starting point, would you take a PR with a new theme?

If so, do you have criteria for themes that "pass muster"?

Move navbar out of hero-header

Thanks for your great work on Bulmaswatch. It's a big attraction of integrating with Bulma. I'm currently working on adding support for Bulmaswatch to a Drupal theme.

Some challenges I'm hitting relate to display of the navbar component. I know you've done work as noted in #8. Still, in several themes I'm finding the nav item text is invisible (same colour as the background) in my case.

This arises from two issues:

• Some CSS is limited to .nav-item rather than .navbar-item.
• Some CSS assumes the navbar is in a .hero wrapper.

This compiled CSS rule from the solar theme shows both issues:

.hero.is-primary .nav-item a:not(.button), .hero.is-primary a.nav-item {
    color: #fff;
}

An alternative would be:

• In the example pages:
  • Switch from the deprecated nav to the navbar element.
  • Pull the navbar out of the .hero and instead place it in its own <div class="container"> as an immediate child of <body>, as is done on bulma.io.
• In the SCSS for the navbar:
  • Where a background color is set, apply it directly rather than relying on the color applied to the .hero.

While it would require some changes, this would complete the upgrade from nav to navbar while making the Bulmaswatch navbar more flexible.

Darkly preview on website is broken

As you can see, the text is black-on-black.

Update swatches to 0.7.5?

Hi,

I really love the swatches, because I love Bulma. I often do not have the time to create my own theme, so it's very practical to use those swatches for fast prototyping. I just noticed that the swatches are still on version 0.7.2, Bulma already has 0.7.5, which provides some nice enhancements. Are there any plans to push the swatches to the current version?

Regards, Thomas

Text of some disabled form elements is hardly visible in Darkly theme

Hi,

In the current version (0.7.1), the text of some Darkly themed elements that have the disabled attribute is difficult or impossible to read. This seems to affect elements that do not have a color modifier (e.g. is-primary). For example:

• input placeholder text
• button text

Examples can be seen here: https://jenil.github.io/bulmaswatch/darkly/#form (under the 'Disabled' section)

Add support for new navbar component

Bulma 2.4 introduced the navbar which will eventually replace nav -
http://bulma.io/documentation/components/navbar/

The following link provides the relevant variables that need to be redefined for each theme:
https://github.com/jgthms/bulma/blob/master/sass/components/navbar.sass

Feature request: Provide a non-minified version for each theme

Although the .map file is available having a non-minified .css file can be handy while developing or when your CMS is alredy applying minification of the files.

I also noticed that bootswatch also provides this.

Pagination link text is hardly visible in Superhero theme

Similar to issue #40, pagination buttons are the same color as the background.

See for example: https://jenil.github.io/bulmaswatch/superhero/#pagination

Using the disabled attribute on a button while using the Slate theme makes the button unreadable

Description

The text of a disabled button in the slate theme is not readable

Steps to reproduce

• Load the slate theme
• Use the following HTML code

<div class="field has-addons">
  <div class="control">
    <button class="button" disabled>
      <div class="icon">
        <i class="fa fa-play"></i>
      </div>
      Hello World
    </button>
  </div>
</div>

Navbar default border + has-shadow class = thick ugly gray line

I'm wondering why the navbar here has a 1px solid border while the default theme has no border.

The navbar is supposed to have a light/subtle shadow but in this image it becomes a thick gray line.

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:

<span class="select level-item">
<select><option>And</option><option>Or</option></select>
</span>

Am I doing something wrong?

Add to cdnjs

Hello,

Great work! These themes are excellent. A few months ago I was looking for exactly this but could only find bulmathemes, which doesn't seem finished.

Anyways, I was looking to use this project to showcase various themed bulma templates and I was wondering if you had considered submitting your project to cdnjs so I could easily include the latest version of each theme.

Cheers

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/

Can't view theme names on demo pages

This may be related to #29, but I can't view the theme names - unless they are hovered - on the demo page.
Just browsing themes it occurs to me that in addition to the dropdown it would be useful to have a page showing all the themes.

A set of cards with the main colours/typography visible would allow a user to pick and choose rather than running through the whole set of dropdown options page by page.

thanks,
Anita

Icon sizes wrong

I think there is something wrong with the icons sizes:

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; }

Progress bars without color modifier are not visible in Darkly theme

Hi,

Thank you for this great project!

In the current version (0.7.1), Darkly themed progress bars without a color modifier (e.g. is-primary) do not display progress. An example can be seen here: https://jenil.github.io/bulmaswatch/darkly/#progress

I believe this is because $grey is used for both the background and default bar color.

Module build failed: Undefined variable: "$button-focus-border".

Trying to even get this started and I am getting this.

On app.scss:

// Bulma
@import "~bulmaswatch/lux/_variables.scss";
@import "~bulma/bulma.sass";
@import "~bulmaswatch/lux/_overrides.scss";

Gives me:

 error  in ./resources/assets/sass/app.scss

Module build failed: ModuleBuildError: Module build failed:
undefined
                              ^
      Undefined variable: "$button-focus-border".
      in ~/code/project/node_modules/bulmaswatch/lux/_overrides.scss (line 36, column 32)

journal theme: inconsistency in link color

I noticed that there is an inconsistency when it comes to link colors. In bulmaswatch the headers ("# 14" and "# 16"), which are also links, are blue ($blue) while in bootswatch they're red (the $primary for this theme).

Bulmaswatch left, bootswatch on the right

I can provide a pr if this is a desired fix, but I would like to know how to go about fixing it. There is certain incompatibility because bootstrap doesn't have a "link" color, it just uses its "primary" for links. Bulma, on the other hand, separates link and primary into different colors. Should I just set $link: $primary !default;?

update dependencies with deprecation warnings

Some packages are deprecated. A warning is displayed on package installation. Is this something that can be fixed quickly? 🐛

$ npm install
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: express 2.x series is deprecated
npm WARN deprecated [email protected]: connect 1.x series is deprecated
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.

I built something pretty cool!

Bulma swatches as a react hook and a component.

https://github.com/hipstersmoothie/bulma-swatch-hook

Would you be okay with adding this to the readme? It makes theming with bulmaswatch a breeze.

Error when compiling lumen

When compiling lumen with webpack I get File to import not found or unreadable: sass/utilities/initial-variables.sass

https://github.com/jenil/bulmaswatch/blob/gh-pages/lumen/_variables.scss#L4

Update to 0.4.3

is it possible to update themes to bulma version (missing things like breadcrumb)

Update to Bulma 0.7.4

https://github.com/jgthms/bulma/releases/tag/0.7.4

box element scss variables not present

can't set any of the scss variables for the Element Box when including the bulmaswatch overrides.

for example: $box-background-color is not present, so I can't match that color easily in my scss

should I add them to the _variables.scss file?

Also, shouldn't that variable be used in the _overrides file? it looks like $black-ter is being used instead which is part of the nuclear variables and not the theme variables

Not working with new navbar

The themes do not work correctly with the new bulma navbar (navbar-* classes) as explained in the docs:
http://bulma.io/documentation/components/navbar/

Issue with File input size and has-addons

Here's how it looks with default theme (not latest bulma, but the default from bulmaswatch) :

Using Darkly theme :

Left part is a file input with a FA, right part is some other buttons, all inside a has-addons thingie.
Here is an example html.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://unpkg.com/bulmaswatch/default/bulmaswatch.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
</head>
<body>
<div class="field level-item has-addons">
    <div class="file is-info control has-name is-medium">
        <label class="file-label">
            <input class="file-input" type="file" id="file_input" onchange="">
            <span class="file-cta">
              <span class="file-icon">
                <i class="fas fa-upload"></i>
              </span>
            </span>
            <span class="file-name">
                <img id="file_preview"
                     src="https://use.fontawesome.com/releases/v5.0.12/svgs/regular/question-circle.svg"
                     style="height: 1.5em">
            </span>
        </label>
    </div>
    <div class="control">
        <a class="button is-success is-medium">
            <i class="fas fa-check"></i>
        </a>
    </div>
    <div class="control">
        <a class="button is-medium">
            <i class="fab fa-discord"></i>
            &nbsp;Use Discord Avatar
        </a>
    </div>
</div>
</body>
</html>

I tried all themes, with these conclusions :
default worked fine
nuclear, simplex, spacelab, superhero had right sizes, but has-addons wasn't working right
All other ones had both wrong.

I am too new to web-related stuff (especially all those css, sass etc stuff) so can't really try to fix the themes myself :x

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

Update to Bulma 0.5.1

Bulma Changelog

With 0.5.0, Bulma did some major variable renaming and things don't compile well with the current 0.4.3 swatch SCSS.

0.7.2 release

Update to Bulma 0.8.0

https://github.com/jgthms/bulma/releases/tag/0.8.0

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.

Upgrade to latest Bulma

We really love the themes you have created. Is there a schedule or process to keep bulmaswatch updated to the latest version of Bulma?

Solar Theme

Good morning everyone. one question about solar theme. After the last update to 0.5.0 the table has white background color and its doesn't take 100% width of its parent. is it meant to be like this ? Also the button text color has change. I notice also many changes on menu colors . The changed colors are too dark for the rest of the theme.

Contact

Hi @jenil,

I've created lots of extension for bulma and templates too. I alos created https://creativbeulma.net marketplace and I'd like to share an opportunity with you. Can you please contact me at [email protected] so I'll be able to give you more details about it.

Regards,

Slate and Superhero problem overrides

Im build a little module that dynamically load bulma swatches into a website. I en up having to cache the css files all on the page. So a one point I may have all the different style sheets loaded but only the one at the bottom is the one in use. This works well expect for two swatches: slate and superhero. they both do something unique that the other sheets dont do.

background-color: $body-background-color;

i removed this in browser and it doesn't effect anything because the body background is the same color.

would it be safe to remove these unique overrides? darkly is also a dark theme and does not have this problem

https://github.com/jenil/bulmaswatch/search?q=background-color%3A+%24body-background-color%3B&unscoped_q=background-color%3A+%24body-background-color%3B

Sandstone input with button bug

I notice a bug in input with attach button. when you set input to large size and to button as well the sizes do not match. i test it on small size too and there is also a difference there.

Thank you in advance.

"Error: Undefined variable: $button-focus-border" in _overrides.scss for Darkly

Hi, I'm having an issue importing Bulmaswatch's Darkly into my project.

Here's the error:

"Error: Undefined variable: "$button-focus-border"
on line 39 of _overrides.scss"

I'm using Bulmaswatch 0.4.3, Bulma 0.4.3

Is this variable needed at all?

npm install currently fails for 0.7.3 and 0.7.4

According to the commit log, 0.7.4 shouldn't even be available if I'm not mistaken but that's the version npm shows both when running npm install in an empty dir and on the package site.

0.7.3 fails for the same reason:

$ npm install bulmaswatch

> [email protected] install ...\bulmaswatch-test\node_modules\bulmaswatch
> bundle install

Der Befehl "bundle" ist entweder falsch geschrieben oder
konnte nicht gefunden werden.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: `bundle install`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

0.7.3

$ npm install [email protected]

> [email protected] install ...\bulmaswatch-test\node_modules\bulmaswatch
> bundle install

Der Befehl "bundle" ist entweder falsch geschrieben oder
konnte nicht gefunden werden.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: `bundle install`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
...

Getting an overflow in .media-content

Bug

Expected behaviour

No overflow at all

Suggested edit

.media-content {
    overflow: hidden;
}

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:

overflow-x: auto
overflow-y: hidden;

Solution

I haven't checked if it worked only through the developer tools. This was done by unmarking overflow: auto and adding overflow-y: hidden

Feature request: generate css for Bulma extensions

I find it very handy to have a version of a theme available as css using CDN but this has the issue that, when using a Bulma extension, the widgets from the extension don't get the new theme. I was wondering, if you're using some automated procedure to generate the bulmaswatch.min.css files, whether it would be possible to also generate css for the Bulma extensions (or show in the docs what's a procedure to do that).

Flatley Navbar Rounder Corners

Don't like the rounded corners on the Flatley navbar. Most navbars are square. Not sure if this was intentional.

I changed the border-radius to 0 in my project to fix.