surprisetalk/elm-bulma

Elm library for the Bulma front-end framework

elm-bulma's Issues

Accessibility, by default

I'd love to make this project web-accessible out-of-the-box.
Fortunately, there's a wonderful package called elm-html-a11y to help us out with this!

Example in README.md doesn't work

hey there ! beautiful project <3

In the read me you put this code

module Example exposing (..)

import Browser
import Bulma.CDN exposing (..)
import Bulma.Modifiers exposing (..)
import Bulma.Elements exposing (..)
import Bulma.Columns exposing (..)
import Bulma.Layout exposing (..)
import Html exposing ( Html, main_, text )

type alias Model = {}

main : Program () Model Msg
main
  = Browser.sandbox
    { init = {}
    , view = view
    , update = \msg -> \model -> model
    }

view : Model -> Html msg
view model 
  = main_ []
    [ stylesheet
    , exampleHero
    , exampleColumns
    ]

exampleHero : Html msg
exampleHero 
  = hero { heroModifiers | size = Medium, color = Primary } []
    [ heroBody []
      [ container []
          [ title H1 [] [ text "Hero Title" ]
          , title H2 [] [ text "Hero Subtitle" ]
          ]
      ]
    ]

exampleColumns : Html msg
exampleColumns 
  = section NotSpaced []
    [ container []
      [ columns columnsModifiers []
        [ column columnModifiers [] [ text "First Column" ]
        , column columnModifiers [] [ text "Second Column" ]
        , column columnModifiers [] [ text "Third Column" ]
        ]
      ]
    ]

elm complains that at line 13 main : Program () Model Msg Msg is not defined
Im a beginner at elm so i can't help ^^'

Example code in readme is elm 0.18 code

I'm pretty sure the 0.18 code in the readme will not work with 0.19 :)

Fix package documentation for connectedFields

In the Elm package documentation, the example code for the connectedFields function specifies fields rather than connectedFields.

Currently:

myFields : Html msg
myFields
  = fields Centered []
    [ controlInput myControlInputModifiers [] [] [] 
    , control myControlModifiers []
      [ button myButtonModifiers [] []
      ]
    ]

Should be:

myFields : Html msg
myFields
  = connectedFields Centered []
    [ controlInput myControlInputModifiers [] [] [] 
    , control myControlModifiers []
      [ button myButtonModifiers [] []
      ]
    ]

Demo Site

I have been playing around with Elm and wanted to use using elm-bulma after migrating away from elm-mdl.

I had found the demo site to be very helpful at elm-mdl (https://debois.github.io/elm-mdl)

I started to build one for elm-bulma, and wanted you thought of this before i built out more and created a PR.

you can view the initial site: https://glennular.github.io/elm-bulma/demo/index.html
code: https://github.com/glennular/elm-bulma/tree/master/demo

Ideally there would be more examples that are model based. I haven't extended out the model to each sub page yet.

I wanted to mirror the Buma doc page (https://bulma.io/documentation/overview/start/)

This may be helpful as the new version that you are working on is being built/tested.

Improve function consistency

I'd like to make functions more predictable. In this library, I feel like it's a bit hard to remember what each function expects.
I'm thinking of "forcing" each function to be of the type modifiers -> List (Attribute msg) -> List (Html msg) -> Html msg.
Let me know what you think!

convert existing bulma theme to elm-bulma?

I have come accross this bulma based theme.

Bulkit

and also this
any advise on converting this theme to elm-bulma, without the Javascript. i just want to use CSS with ELM/.

Remove `elm-bulma-classes` dependency

Unfortunately, elm-bulma-classes is no longer being maintained.
I'm thinking that we should make an equivalent, either in this package or a separate one.
We're open to suggestions!

Package documentation needs to be updated?

The record field name and type of gapless in ColumnsModifiers needs to be updated.
https://package.elm-lang.org/packages/surprisetalk/elm-bulma/latest/Bulma-Columns#columnsModifiers

I think the following is correct for v6.1.4:

type ColumnsModifiers =
  { multiline : Bool
  , gap : Gap  -- not gapless : Bool
  , display : Display
  , centered : Bool
  }

Thanks in advance.

any plan to add carousel?

https://wikiki.github.io/components/carousel/

This one looks good for fancy pages, any plan to add it?

Thanks

Table row is always selected

elm-bulma/src/Bulma/Elements.elm

Lines 723 to 728 in 3c2f6b4

	tableRow highlighted
	= node "tr" []
	[ case highlighted of
	True -> bulma.table.row.state.isSelected
	False -> bulma.table.row.state.isSelected
	]

Please update to Bulma 0.6.0

Please update to Bulma 0.6.0. Thanks.

Make modifiers easier to use

In this library, we have a lot of different modifiers! I'd like to make them simpler and/or easier to use.
Let me know if you have any suggestions!

Form.controlSelect and Small size

I wrote like below.

controlSelect { controlSelectModifiers | size = Small } [] []
              [ option [] [ text "Dropdown" ]
              ]

It generate:

<p class="control">
  <span class="select">
    <select class="is-small   ">
      <option>Dropdown</option>
    </select>
  </span>
</p>

But should be:

<p class="control">
  <span class="select is-small">
    <select>
      <option>Dropdown</option>
    </select>
  </span>
</p>

Example code in documentation for navbarBurger contains a syntax error

This code is missing the prototype and parameter for the isMenuOpen Boolean

myNavbarBurger : Html Msg
myNavbarBurger 
  = navbarBurger isMenuOpen []
    [ span [] []
    , span [] []
    , span [] []
    ]

Example doesn't work without changes

I'm getting all sorts of errors when trying to follow https://github.com/surprisetalk/elm-bulma#getting-started regarding to the code example

Update demo to elm 0.19

Why is there no `Width12` in Width type?

Hi
Currently, Width type has Auto , Width1 ~ Width11 .
However, Bulma supports is-12 . Why is there no Width12 in Width type?
Please tell me if there is a workaround you do not need.

Remove the "easy" functions

I like the "easy" functions, I'm thinking that they'd be better as snippets within the documentation for each function. That way, people can copy/paste easily, and edit the examples as they wish.
In the meantime, I'd love to hear people's opinions! Should we keep them or remove them?

adding our SASS customisation

Thanks for the great effort to bring this project up,

I have been looking for something like this for ages. Is there a possibility to add our own SAAS customization in order to generate new template flavor? what are the guides?

<a> elements without `href` cause page reloads with `Browser.application` in Elm 0.19

This is because "empty" links will cause a UrlRequest with Browser.External "".

My solution is to pattern match on this and just do nothing. You'll most likely pattern match on the UrlRequest anyway to get at the contents of it, so it's a small change, but not terribly obvious. So it might be a good idea to warn of this in the documentation.

Unless there are better solutions that can be implemented in the library to avoid the user dealing with this entirely, but I do not think there is.

a little issue with NavbarDropdown

There is a css / javascrpt interfering with the dropdown. I can't click to activate the drop down menu.

can you please have a look?

module Main exposing (..)

import Browser
import Bulma.CDN exposing (..)
import Bulma.Columns exposing (..)
import Bulma.Components exposing (..)
import Bulma.Elements exposing (..)
import Bulma.Layout exposing (..)
import Bulma.Modifiers exposing (..)
import Html exposing (Html, img, main_, span, text)
import Html.Attributes exposing (src)

type alias Model = {}

main : Program () Model msg
main
  = Browser.sandbox
    { init = {}
    , view = view
    , update = \msg -> \model -> model
    }

view : Model -> Html msg
view model
  = main_ []
    [ stylesheet
    , myHero
    ]



myNavbarBurger : Html msg
myNavbarBurger
  = navbarBurger False []
    [ span [] []
    , span [] []
    , span [] []
    ]

myNavbarLink : Html msg
myNavbarLink
  = navbarLink []
    [ text "More Junk"
    ]

myNavbar : Bool -> Bool -> Html msg
myNavbar isMenuOpen isMenuDropdownOpen
  = navbar navbarModifiers []
    [ navbarBrand [] myNavbarBurger
      [ navbarItem True []
        [ img [ src "https://bulma.io/images/bulma-logo.png" ] []
        ]
      ]
    , navbarMenu isMenuOpen []
      [ navbarStart []
        [ navbarItemLink False [] [ text "Home"  ]
        , navbarItemLink False [] [ text "Blog"    ]
        , navbarItemLink True  [] [ text "Carrots" ]
        , navbarItemLink False [] [ text "About"   ]
        ]
      , navbarEnd []
        [ navbarItemDropdown isMenuDropdownOpen Down [] myNavbarLink
          [ navbarDropdown True Left []
            [ navbarItemLink False [] [ text "Crud"     ]
            , navbarItemLink False [] [ text "Detritus" ]
            , navbarItemLink True  [] [ text "Refuse"   ]
            , navbarItemLink False [] [ text "Trash"    ]
            ]
          ]
        ]
      ]
    ]



exampleHero : Html msg
exampleHero
  = hero { heroModifiers | size = Medium, color = Primary } []
    [ heroBody []
      [ container []
          [ title H1 [] [ text "Hero Title" ]
          , title H2 [] [ text "Hero Subtitle" ]
          ]
      ]
    ]

exampleColumns : Html msg
exampleColumns
  = section NotSpaced []
    [ container []
      [ columns columnsModifiers []
        [ column columnModifiers [] [ text "First Column" ]
        , column columnModifiers [] [ text "Second Column" ]
        , column columnModifiers [] [ text "Third Column" ]
        ]
      ]
    ]




myHeroModifiers : HeroModifiers
myHeroModifiers
  = { bold  = False
    , size  = Large
    , color = Primary
    }

myHero : Html msg
myHero
  = easyHero myHeroModifiers []
    { head = heroHead [] [myNavbar True False]
    , body = heroBody [] [text "head"]
    , foot = heroFoot [] [text "head"]
    }

Consider Exposing Bulma.Classes

Currently, we have a messy module called Bulma.Classes.
With a little documentation and organization, it could be published alongside the other modules.

Let me know if there's any interest in using this package, and I'll clean it up and publish it!

Hero layout and Small size

The hero layout with a modifier with a size Small is generate without is-small class.

In src/Bulma/Layout.elm#L373

Currently:

hero : HeroModifiers -> List (Attribute msg) -> List (HeroPartition msg) -> Hero msg
hero {bold,size,color}
....
    , case size of
        Small    -> B.none
....

Should be:

hero : HeroModifiers -> List (Attribute msg) -> List (HeroPartition msg) -> Hero msg
hero {bold,size,color}
....
    , case size of
        Small    -> B.isSmall
....

Can we get the navbar added

Spec is here
http://bulma.io/documentation/components/navbar/

Would be great to have this added. I'd create a PR but I'm very new to Bulma.

If you like I can open a PR with my guess at what needs to happen.

Thanks

Reason for anchors as buttons

I noticed it was very intentional in d3cf314, but why did this happen? Obviously you had something in mind so I might just be missing something.

Mainly, I keep encountering #17 which is easily work-around-able, but with a button tag it wouldn't even be an issue in a lot of cases.

Thanks for the great work! I love the library so far.