for more information visit the package's GitHub page
Package contains the following modules:
This is an incompatible fork from rundis/elm-bootstrap that is compatible with rtfeldman/elm-css.
Elm Bootstrap is a comprehensive library package that aims to make it pleasant and reasonably type safe to use Twitter Bootstrap 4 CSS Framework in Elm applications.
Twitter Bootstrap is one of the most popular CSS (with some JS) frameworks for building responsive, mobile first web sites. Version 4 is fully embracing flexbox, which provides much better control and flexibility.
rundis/elm-bootstrap
to your elm-package.json
module Main exposing (..)
import Bootstrap.CDN as CDN
import Bootstrap.Grid as Grid
view : Model -> Html Msg
view model =
Grid.container [] -- Responsive fixed width container
[ CDN.stylesheet -- Inlined Bootstrap CSS for use with reactor
, navbar model -- Interactive and responsive menu
, mainContent model
]
-- ... etc
Twitter Bootstrap is something that I have been using in non-Elm projects extensively. I researched what was out there for Elm, but couldn't find anything that was quite as ambitious as I was looking for.
To a large extent, Twitter Bootstrap is just a bunch of CSS classes that can be applied to appropriate elements. Though Bootstrap can be used with just the vanilla Elm HTML library, it is very easy to get class strings wrong, apply the wrong classes to the wrong elements, or even nest elements in ways that will break the styling. This package aims to alleviate these issues by providing a higher degree of type safety.
This API tries to balance the wish for type safety with factors like - usability - need for flexibility / escape hatches - limitations in the type system (and/or just my lack of experience/knowledge about it)?
Twitter Bootstrap also consists of a few interactive elements. The interactivety is provided through the use of JavaScript. Elm Bootstrap can't have any of that obviously so the package will provide similar interactivity through the use of pure Elm.
To be completely honest, the main reason I created this was probably to learn Elm more deeply and to see what it would take to design a library and an API using it. You got to start somewhere right?
elm-bootstrapify
- Supports Bootstrap 3, not as extensive but might suit your needs.elm-mdl
is of course the most obvious alternative, if you aren't fond of Bootstrap. It's very impressive and has been a great source of inspiration for elm-bootstrap.This package is still in its early stages and I would greatly appreciate feedback on usability, design, features, etc.
There's a bunch of work left to do, especially when it comes to documentation and examples. If anyone is interested in helping out, either by submitting pull requests or maybe even joining me in making this a top-notch and useful package, don't hesitate to get in touch. (@mrundberget on the Elm slack btw)
5.0.0 Elm 0.19 Upgrade. Contains a few breaking changes. Please consult release notes on the releases tab on GitHub. No further maintenance is planned for an 0.18 compatible version.
4.0.0 Updated to support Twitter Bootstrap 4.0 release version
elm-package diff
for details. For a large part the breaking changes are caused by major changes from Twitter Bootstrap Alpha 6 to Twitter Bootstrap 4 release. Since it was going to be breaking changes regardless, we took the liberty of refactoring some modules to improve the API as well.Special mention: TWBS changed how labels and checkboxes and radios need to be composed. You'll need to/really should provide an id (Checkbox.id
or Radio.id
)
3.0.0
customInitialState
providing the tabitem id/hash. Checkout the Tabs module page in https://github.com/rundis/elm-bootstrap.infoattr
removed in favor of attrs
functionwrapperAttrs
functionThe BSD 3 Clause License