Letting the Elm compiler prevent Bulma class name typos

By Anton Strömkvist
Last update: Nov 16, 2021
Comments: 6

Description

A simple library for using the Bulma CSS library classes. It's simply a module exposing all classes at top level, putting the burden of not making typos on the compiler. Nothing fancy.

Usage

Example usage:

import Html
import Html.Attributes as Attributes
import Bulma.Classes as Bulma

view =
    Html.div
        [ Attributes.class Bulma.columns ]
        [ Html.div
            [ Attributes.class Bulma.column ]
            [ Html.text "column 1" ]
        , Html.div
            [ Attributes.class Bulma.column ]
            [ Html.text "column 2" ]
        ]

Why?

"Why? There's already a bunch of Bulma libraries" you might say, and that is a valid question. Well, as of writing there are three other Elm libraries with bulma in their name - surprisetalk/elm-bulma, jmackie4/elm-bulma, and danielnarey/elm-bulma-classes.

jmackie4/elm-bulma says it's a WIP in the readme, and the GitHub repo no longer exists, so we can safely disregard that.

surprisetalk/elm-bulma seems both active and useful, but ultimately tries to achieve a different goal than this library by providing an entire framework for using Bulma (check it out, seems pretty darn cool).

The one that's most like (and an inspiration for) this library is danielnarey/elm-bulma-classes. The core difference is that danielnarey/elm-bulma-classes exposes a single record containing a nested structure that ultimately branches out into all available classes. This structure (probably) works pretty well if you've got a (semi-)sophisticated code completion setup, but since I don't, I had to constantly look up which branches in the source code to get the class name I knew I wanted; with this library, I'm replacing some of the safety of grouping related classes with ease-of-use by exposing them all at the top level, essentially just letting the Elm compiler check my typos. Also, unfortunately, Daniel's library has been deprecated and not been updated since Bulma 0.4.2. This flatter structure should hopefully make it a lot easier to keep up-to-date.

Github

https://github.com/ahstro/elm-bulma-classes

Comments(6)

1

Bump node-fetch from 2.6.1 to 3.1.1
Bumps node-fetch from 2.6.1 to 3.1.1.
Release notes

Sourced from node-fetch's releases.
v3.1.1

Security patch release

Recommended to upgrade, to not leak sensitive cookie and authentication header information to 3th party host while a redirect occurred

What's Changed
- core: update fetch-blob by @jimmywarting in node-fetch/node-fetch#1371
- docs: Fix typo around sending a file by @jimmywarting in node-fetch/node-fetch#1381
- core: (http.request): Cast URL to string before sending it to NodeJS core by @jimmywarting in node-fetch/node-fetch#1378
- core: handle errors from the request body stream by @mdmitry01 in node-fetch/node-fetch#1392
- core: Better handle wrong redirect header in a response by @tasinet in node-fetch/node-fetch#1387
- core: Don't use buffer to make a blob by @jimmywarting in node-fetch/node-fetch#1402
- docs: update readme for TS @types/node-fetch by @adamellsworth in node-fetch/node-fetch#1405
- core: Fix logical operator priority to disallow GET/HEAD with non-empty body by @maxshirshin in node-fetch/node-fetch#1369
- core: Don't use global buffer by @jimmywarting in node-fetch/node-fetch#1422
- ci: fix main branch by @dnalborczyk in node-fetch/node-fetch#1429
- core: use more node: protocol imports by @dnalborczyk in node-fetch/node-fetch#1428
- core: Warn when using data by @jimmywarting in node-fetch/node-fetch#1421
- docs: Create SECURITY.md by @JamieSlome in node-fetch/node-fetch#1445
- core: don't forward secure headers to 3th party by @jimmywarting in node-fetch/node-fetch#1449
New Contributors
- @mdmitry01 made their first contribution in node-fetch/node-fetch#1392
- @tasinet made their first contribution in node-fetch/node-fetch#1387
- @adamellsworth made their first contribution in node-fetch/node-fetch#1405
- @maxshirshin made their first contribution in node-fetch/node-fetch#1369
- @JamieSlome made their first contribution in node-fetch/node-fetch#1445
Full Changelog: https://github.com/node-fetch/node-fetch/compare/v3.1.0...v3.1.1

v3.1.0

What's Changed
- fix(Body): Discourage form-data and buffer() by @jimmywarting in node-fetch/node-fetch#1212
- fix: Pass url string to http.request by @serverwentdown in node-fetch/node-fetch#1268
- Fix octocat image link by @lakuapik in node-fetch/node-fetch#1281
- fix(Body.body): Normalize Body.body into a node:stream by @jimmywarting in node-fetch/node-fetch#924
- docs(Headers): Add default Host request header to README.md file by @robertoaceves in node-fetch/node-fetch#1316
- Update CHANGELOG.md by @jimmywarting in node-fetch/node-fetch#1292
- Add highWaterMark to cloned properties by @davesidious in node-fetch/node-fetch#1162
- Update README.md to fix HTTPResponseError by @thedanfernandez in node-fetch/node-fetch#1135
- docs: switch url to URL by @dhritzkiv in node-fetch/node-fetch#1318
- fix(types): declare buffer() deprecated by @dnalborczyk in node-fetch/node-fetch#1345
- chore: fix lint by @dnalborczyk in node-fetch/node-fetch#1348
- refactor: use node: prefix for imports by @dnalborczyk in node-fetch/node-fetch#1346
- Bump data-uri-to-buffer from 3.0.1 to 4.0.0 by @dependabot in node-fetch/node-fetch#1319
- Bump mocha from 8.4.0 to 9.1.3 by @dependabot in node-fetch/node-fetch#1339
- Referrer and Referrer Policy by @tekwiz in node-fetch/node-fetch#1057
- Add typing for Response.redirect(url, status) by @c-w in node-fetch/node-fetch#1169
- chore: Correct stuff in README.md by @Jiralite in node-fetch/node-fetch#1361
- docs: Improve clarity of "Loading and configuring" by @serverwentdown in node-fetch/node-fetch#1323
- feat(Body): Added support for BodyMixin.formData() and constructing bodies with FormData by @jimmywarting in node-fetch/node-fetch#1314
... (truncated)
Changelog

Sourced from node-fetch's changelog.
Changelog

All notable changes will be recorded here.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

What's Changed
- core: update fetch-blob by @jimmywarting in node-fetch/node-fetch#1371
- docs: Fix typo around sending a file by @jimmywarting in node-fetch/node-fetch#1381
- core: (http.request): Cast URL to string before sending it to NodeJS core by @jimmywarting in node-fetch/node-fetch#1378
- core: handle errors from the request body stream by @mdmitry01 in node-fetch/node-fetch#1392
- core: Better handle wrong redirect header in a response by @tasinet in node-fetch/node-fetch#1387
- core: Don't use buffer to make a blob by @jimmywarting in node-fetch/node-fetch#1402
- docs: update readme for TS @types/node-fetch by @adamellsworth in node-fetch/node-fetch#1405
- core: Fix logical operator priority to disallow GET/HEAD with non-empty body by @maxshirshin in node-fetch/node-fetch#1369
- core: Don't use global buffer by @jimmywarting in node-fetch/node-fetch#1422
- ci: fix main branch by @dnalborczyk in node-fetch/node-fetch#1429
- core: use more node: protocol imports by @dnalborczyk in node-fetch/node-fetch#1428
- core: Warn when using data by @jimmywarting in node-fetch/node-fetch#1421
- docs: Create SECURITY.md by @JamieSlome in node-fetch/node-fetch#1445
- core: don't forward secure headers to 3th party by @jimmywarting in node-fetch/node-fetch#1449
New Contributors
- @mdmitry01 made their first contribution in node-fetch/node-fetch#1392
- @tasinet made their first contribution in node-fetch/node-fetch#1387
- @adamellsworth made their first contribution in node-fetch/node-fetch#1405
- @maxshirshin made their first contribution in node-fetch/node-fetch#1369
- @JamieSlome made their first contribution in node-fetch/node-fetch#1445
Full Changelog: https://github.com/node-fetch/node-fetch/compare/v3.1.0...v3.1.2

3.1.0

What's Changed
- fix(Body): Discourage form-data and buffer() by @jimmywarting in node-fetch/node-fetch#1212
- fix: Pass url string to http.request by @serverwentdown in node-fetch/node-fetch#1268
- Fix octocat image link by @lakuapik in node-fetch/node-fetch#1281
- fix(Body.body): Normalize Body.body into a node:stream by @jimmywarting in node-fetch/node-fetch#924
- docs(Headers): Add default Host request header to README.md file by @robertoaceves in node-fetch/node-fetch#1316
- Update CHANGELOG.md by @jimmywarting in node-fetch/node-fetch#1292
- Add highWaterMark to cloned properties by @davesidious in node-fetch/node-fetch#1162
- Update README.md to fix HTTPResponseError by @thedanfernandez in node-fetch/node-fetch#1135
- docs: switch url to URL by @dhritzkiv in node-fetch/node-fetch#1318
- fix(types): declare buffer() deprecated by @dnalborczyk in node-fetch/node-fetch#1345
- chore: fix lint by @dnalborczyk in node-fetch/node-fetch#1348
- refactor: use node: prefix for imports by @dnalborczyk in node-fetch/node-fetch#1346
- Bump data-uri-to-buffer from 3.0.1 to 4.0.0 by @dependabot in node-fetch/node-fetch#1319
- Bump mocha from 8.4.0 to 9.1.3 by @dependabot in node-fetch/node-fetch#1339
- Referrer and Referrer Policy by @tekwiz in node-fetch/node-fetch#1057
- Add typing for Response.redirect(url, status) by @c-w in node-fetch/node-fetch#1169
... (truncated)
Commits
- 36e47e8 3.1.1 release (#1451)
- 5304f3f Don't change relative location header on manual redirect (#1105)
- f5d3cf5 fix(Headers): don't forward secure headers to 3th party (#1449)
- f2c3d56 Create SECURITY.md (#1445)
- 4ae3538 core: Warn when using data (#1421)
- 41f53b9 fix: use more node: protocol imports (#1428)
- f674875 ci: fix main branch (#1429)
- 1493d04 core: Don't use global buffer (#1422)
- eb33090 Chore: Fix logical operator priority (regression) to disallow GET/HEAD with n...
- 7ba5bc9 update readme for TS @type/node-fetch (#1405)
- Additional commits viewable in compare view
Maintainer changes

This version was pushed to npm by endless, a new releaser for node-fetch since your current version.

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 language
You can disable automated security fix PRs for this repo from the Security Alerts page.

Css does not load on elm reactor

Hi @ahstro, I'm trying to implement your package because I'm a huge fan of Bulma but I'm running into some trouble. That's my elm.json file:

{
    "type": "application",
    "source-directories": [
        "src"
    ],
    "elm-version": "0.19.0",
    "dependencies": {
        "direct": {
            "ahstro/elm-bulma-classes": "3.1.0",
            "elm/browser": "1.0.1",
            "elm/core": "1.0.2",
            "elm/html": "1.0.0"
        },
        "indirect": {
            "elm/json": "1.1.3",
            "elm/time": "1.0.0",
            "elm/url": "1.0.0",
            "elm/virtual-dom": "1.0.2"
        }
    },
    "test-dependencies": {
        "direct": {},
        "indirect": {}
    }
}

When I launch the elm reactor command and try to visit the localhost, I can see the HTML structure but without all the styles from Bulma. I can't understand if I miss something so I hope you can help me.

Thank you.

3

Bump node-fetch from 2.6.0 to 2.6.1
Bumps node-fetch from 2.6.0 to 2.6.1.

Release notes

Sourced from node-fetch's releases.

v2.6.1

This is an important security release. It is strongly recommended to update as soon as possible.

See CHANGELOG for details.
Changelog

Sourced from node-fetch's changelog.
v2.6.1

This is an important security release. It is strongly recommended to update as soon as possible.
- Fix: honor the size option after following a redirect.
Commits
- b5e2e41 update version number
- 2358a6c Honor the size option after following a redirect and revert data uri support
- 8c197f8 docs: Fix typos and grammatical errors in README.md (#686)
- 1e99050 fix: Change error message thrown with redirect mode set to error (#653)
- 244e6f6 docs: Show backers in README
- 6a5d192 fix: Properly parse meta tag when parameters are reversed (#682)
- 47a24a0 chore: Add opencollective badge
- 7b13662 chore: Add funding link
- 5535c2e fix: Check for global.fetch before binding it (#674)
- 1d5778a docs: Add Discord badge
- Additional commits viewable in compare view
Maintainer changes

This version was pushed to npm by akepinski, a new releaser for node-fetch since your current version.

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 language
You can disable automated security fix PRs for this repo from the Security Alerts page.
4

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.
v0.2.2
- Prevent overwriting previously decoded tokens 980e0bf
https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

v0.2.1
- Switch to GitHub workflows 76abc93
- Fix issue where decode throws - fixes #6 746ca5d
- Update license (#1) 486d7e2
- Tidelift tasks a650457
- Meta tweaks 66e1c28
https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1
Commits
- a0eea46 0.2.2
- 980e0bf Prevent overwriting previously decoded tokens
- 3c8a373 0.2.1
- 76abc93 Switch to GitHub workflows
- 746ca5d Fix issue where decode throws - fixes #6
- 486d7e2 Update license (#1)
- a650457 Tidelift tasks
- 66e1c28 Meta tweaks
- See full diff in compare view
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 language
You can disable automated security fix PRs for this repo from the Security Alerts page.
5

Bump node-fetch from 2.6.1 to 2.6.7
Bumps node-fetch from 2.6.1 to 2.6.7.
Release notes

Sourced from node-fetch's releases.
v2.6.7

Security patch release

Recommended to upgrade, to not leak sensitive cookie and authentication header information to 3th party host while a redirect occurred

What's Changed
- fix: don't forward secure headers to 3th party by @jimmywarting in node-fetch/node-fetch#1453
Full Changelog: https://github.com/node-fetch/node-fetch/compare/v2.6.6...v2.6.7

v2.6.6

What's Changed
- fix(URL): prefer built in URL version when available and fallback to whatwg by @jimmywarting in node-fetch/node-fetch#1352
Full Changelog: https://github.com/node-fetch/node-fetch/compare/v2.6.5...v2.6.6

v2.6.2

fixed main path in package.json
Commits
- 1ef4b56 backport of #1449 (#1453)
- 8fe5c4e 2.x: Specify encoding as an optional peer dependency in package.json (#1310)
- f56b0c6 fix(URL): prefer built in URL version when available and fallback to whatwg (...
- b5417ae fix: import whatwg-url in a way compatible with ESM Node (#1303)
- 18193c5 fix v2.6.3 that did not sending query params (#1301)
- ace7536 fix: properly encode url with unicode characters (#1291)
- 152214c Fix(package.json): Corrected main file path in package.json (#1274)
- See full diff in compare view
Maintainer changes

This version was pushed to npm by endless, a new releaser for node-fetch since your current version.

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 language
You can disable automated security fix PRs for this repo from the Security Alerts page.

Consider changing classes from `String` to `Html.Attribute`

Hello!

I thought I'd continue the conversation from the other issue.

Let's take a look at the library as Strings:

stringExample = div [ class box ] []

If we want to add another class, we have a few obvious options:

stringsExample1 = div [ class box, class hasTextCentered ] []
stringsExample2 = div [ class <| box ++ " " ++ hasTextCentered ] []
stringsExample3 = div [ classList [ box, hasTextCentered ] ] []

And if we want to vary the alignment, we're looking at something like this:

empty = ""

stringsExample4 alignment
  = div [ class box
        , case alignment of
            Left   -> class empty
            Center -> class hasTextCentered
            Right  -> class hasTextRight
        ]
  [
  ]

By moving to Html.Attribute, we get something like this:

attrExample = div [ box ] []

Already much cleaner!

If we want to add another class, we have one straightforward path:

attrsExample = div [ box, hasTextCentered ] []

And to vary the alignment, we get something like this:

empty = class ""

stringsExample4 alignment
  = div [ box
        , case alignment of
            Left   -> empty
            Center -> hasTextCentered
            Right  -> hasTextRight
        ]
  [
  ]

For more on multiple class attributes, check out this issue.

So here's the tradeoff: moving to Html.Attribute will make most code much cleaner, but may make compound classes more difficult. Consider the following:

centeredBox = Html.Attribute
centeredBox = classList [ box, hasTextCentered ]

stringExample = div [ style [], centeredBox ] []

There's no way to transform multiple Html.Attributes into a single one, so we're stuck with the following:

centeredBox = List Html.Attribute
centeredBox = [ box, hasTextCentered ]

attrExample = div ( style [] :: centeredBox ) []

For me, this tradeoff is totally worth it -- which is why I've opened this issue!

Are there any problems that I'm overlooking?

Letting the Elm compiler prevent Bulma class name typos

Description

Usage

Why?

Github

Comments(6)

Bump node-fetch from 2.6.1 to 3.1.1

v3.1.1

Security patch release

What's Changed

New Contributors

v3.1.0

What's Changed

Changelog

What's Changed

New Contributors

3.1.0

What's Changed

Css does not load on elm reactor

Bump node-fetch from 2.6.0 to 2.6.1

v2.6.1

v2.6.1

Bump decode-uri-component from 0.2.0 to 0.2.2

v0.2.2

v0.2.1

Bump node-fetch from 2.6.1 to 2.6.7

v2.6.7

Security patch release

What's Changed

v2.6.6

What's Changed

v2.6.2

Consider changing classes from `String` to `Html.Attribute`

Popular Tag

Related