├── .gitignore ├── README.md ├── elm-package.json ├── package.json ├── src ├── Bulma │ ├── Buttons.elm │ ├── Icons.elm │ ├── Notifications.elm │ └── icons.txt ├── Main.elm ├── index.html └── index.js └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | elm-stuff/ 2 | node_modules/ 3 | dist/ 4 | elm.js 5 | index.html 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | **NOT YET RELEASED** 2 | 3 | ___ // _ __ / __ // _ __ ___ 4 | //___) ) // // ) ) ) ) ____ // ) ) // / / // // ) ) ) ) // ) ) 5 | // // // / / / / // / / // / / // // / / / / // / / 6 | ((____ // // / / / / ((___/ / ((___( ( // // / / / / ((___( ( 7 | 8 | # Elm Bulma Wrapper 9 | 10 | This package wraps the CSS flex framework [Bulma.io](http://bulma.io) by 11 | sroviding functions that are close to Bulma vocabulary but in slightly more 12 | human readable way. 13 | 14 | ## Getting started 15 | 16 | Install the package 17 | 18 | elm-package install mblarsen/elm-bulma 19 | 20 | Make sure that you include the Bulma CSS files or build them from the SASS 21 | source files included in the framework. 22 | 23 | Note: If you want to make use of `Bulma.Icons` you also have to include [Font 24 | Awesome](http://fontawesome.io) 25 | 26 | ## Usage 27 | 28 | See package documentation for usage. 29 | -------------------------------------------------------------------------------- /elm-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.1.0", 3 | "summary": "Elm wrapper of the CSS framework bulma.io", 4 | "repository": "https://github.com/mblarsen/elm-bulma.git", 5 | "license": "BSD3", 6 | "source-directories": [ 7 | "src" 8 | ], 9 | "exposed-modules": [ 10 | "Bulma", 11 | "Bulma.Buttons", 12 | "Bulma.Icons", 13 | "Bulma.Notifications" 14 | ], 15 | "dependencies": { 16 | "elm-lang/core": "4.0.1 <= v < 5.0.0", 17 | "elm-lang/html": "1.0.0 <= v < 2.0.0" 18 | }, 19 | "elm-version": "0.17.0 <= v < 0.18.0" 20 | } 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "elm-bulma", 3 | "version": "0.1.0", 4 | "description": "Elm wrapper of the CSS framework bulma.io", 5 | "main": "index.js", 6 | "scripts": { 7 | "api": "node api.js", 8 | "build": "webpack", 9 | "watch": "webpack --watch", 10 | "dev": "webpack-dev-server --port 3000" 11 | }, 12 | "keywords": [ 13 | "elm", 14 | "bulma", 15 | "css", 16 | "grid", 17 | "flex" 18 | ], 19 | "author": "Michael Bøcker-Larsen", 20 | "license": "BSD3", 21 | "devDependencies": { 22 | "elm-webpack-loader": "^3.0.6", 23 | "file-loader": "^0.9.0", 24 | "url-loader": "^0.5.7", 25 | "webpack": "^1.13.2", 26 | "webpack-dev-middleware": "^1.8.1", 27 | "webpack-dev-server": "^1.16.1" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/Bulma/Buttons.elm: -------------------------------------------------------------------------------- 1 | module Bulma.Buttons 2 | exposing 3 | ( ButtonType(..) 4 | , ButtonModifier(..) 5 | , button 6 | , buttonWithIcon 7 | , buttonGroup 8 | , buttonAddonGroup 9 | --------------------------------------------------- 10 | , defaultButton 11 | , primaryButton 12 | , infoButton 13 | , successButton 14 | , warningButton 15 | , dangerButton 16 | , linkButton 17 | , lightButton 18 | --------------------------------------------------- 19 | , defaultButtonWithIcon 20 | , primaryButtonWithIcon 21 | , infoButtonWithIcon 22 | , successButtonWithIcon 23 | , warningButtonWithIcon 24 | , dangerButtonWithIcon 25 | , linkButtonWithIcon 26 | , lightButtonWithIcon 27 | ) 28 | 29 | {-| Buttons 30 | # Types 31 | @docs ButtonType, ButtonModifier 32 | 33 | # Buttons 34 | @docs button, defaultButton, primaryButton, infoButton, successButton, warningButton, dangerButton, linkButton, lightButton 35 | 36 | # Buttons with icons 37 | @docs buttonWithIcon, defaultButtonWithIcon, primaryButtonWithIcon, infoButtonWithIcon, successButtonWithIcon, warningButtonWithIcon, dangerButtonWithIcon, linkButtonWithIcon, lightButtonWithIcon 38 | 39 | # Groups 40 | @docs buttonGroup, buttonAddonGroup 41 | -} 42 | 43 | import Html exposing (..) 44 | import Html.Attributes exposing (class) 45 | import String 46 | import Bulma.Icons exposing (Icon(..), IconSize(..)) 47 | 48 | 49 | type RenderStyle 50 | = RenderAsButton 51 | | RenderAsAnchorIconAfter 52 | | RenderAsAnchorIconBefore 53 | 54 | 55 | {-| Button types 56 | -} 57 | type ButtonType 58 | = BtnDefault 59 | | BtnPrimary 60 | | BtnInfo 61 | | BtnSuccess 62 | | BtnWarning 63 | | BtnDanger 64 | | BtnWhite 65 | | BtnLight 66 | | BtnDark 67 | | BtnBlack 68 | | BtnLink 69 | 70 | 71 | {-| Button modifiers. A button may have several modifiers, however some are 72 | incompatible. 73 | -} 74 | type ButtonModifier 75 | = BtnSmall 76 | | BtnNormal 77 | | BtnMedium 78 | | BtnLarge 79 | | BtnOutlined 80 | | BtnInverted 81 | | BtnLoading 82 | | BtnActive 83 | | BtnDisabled 84 | | BtnIconAfter 85 | 86 | 87 | {-| Default button 88 | -} 89 | defaultButton : List ButtonModifier -> List (Attribute msg) -> String -> Html msg 90 | defaultButton modifiers attributes buttonText = 91 | button BtnDefault modifiers attributes buttonText 92 | 93 | 94 | {-| Default button with icon 95 | -} 96 | defaultButtonWithIcon : List ButtonModifier -> List (Attribute msg) -> String -> Html msg -> Html msg 97 | defaultButtonWithIcon modifiers attributes children anIcon = 98 | buttonWithIcon BtnDefault modifiers attributes children anIcon 99 | 100 | 101 | {-| Primary button 102 | -} 103 | primaryButton : List ButtonModifier -> List (Attribute msg) -> String -> Html msg 104 | primaryButton modifiers attributes buttonText = 105 | button BtnPrimary modifiers attributes buttonText 106 | 107 | 108 | {-| Primary button with icon 109 | -} 110 | primaryButtonWithIcon : List ButtonModifier -> List (Attribute msg) -> String -> Html msg -> Html msg 111 | primaryButtonWithIcon modifiers attributes children anIcon = 112 | buttonWithIcon BtnPrimary modifiers attributes children anIcon 113 | 114 | 115 | {-| Info button 116 | -} 117 | infoButton : List ButtonModifier -> List (Attribute msg) -> String -> Html msg 118 | infoButton modifiers attributes buttonText = 119 | button BtnInfo modifiers attributes buttonText 120 | 121 | 122 | {-| Info button with icon 123 | -} 124 | infoButtonWithIcon : List ButtonModifier -> List (Attribute msg) -> String -> Html msg -> Html msg 125 | infoButtonWithIcon modifiers attributes children anIcon = 126 | buttonWithIcon BtnInfo modifiers attributes children anIcon 127 | 128 | 129 | {-| Success button 130 | -} 131 | successButton : List ButtonModifier -> List (Attribute msg) -> String -> Html msg 132 | successButton modifiers attributes buttonText = 133 | button BtnSuccess modifiers attributes buttonText 134 | 135 | 136 | {-| Success button with icon 137 | -} 138 | successButtonWithIcon : List ButtonModifier -> List (Attribute msg) -> String -> Html msg -> Html msg 139 | successButtonWithIcon modifiers attributes children anIcon = 140 | buttonWithIcon BtnSuccess modifiers attributes children anIcon 141 | 142 | 143 | {-| Warning button 144 | -} 145 | warningButton : List ButtonModifier -> List (Attribute msg) -> String -> Html msg 146 | warningButton modifiers attributes buttonText = 147 | button BtnWarning modifiers attributes buttonText 148 | 149 | 150 | {-| Warning button with icon 151 | -} 152 | warningButtonWithIcon : List ButtonModifier -> List (Attribute msg) -> String -> Html msg -> Html msg 153 | warningButtonWithIcon modifiers attributes children anIcon = 154 | buttonWithIcon BtnWarning modifiers attributes children anIcon 155 | 156 | 157 | {-| Danger button 158 | -} 159 | dangerButton : List ButtonModifier -> List (Attribute msg) -> String -> Html msg 160 | dangerButton modifiers attributes buttonText = 161 | button BtnDanger modifiers attributes buttonText 162 | 163 | 164 | {-| Danger button with icon 165 | -} 166 | dangerButtonWithIcon : List ButtonModifier -> List (Attribute msg) -> String -> Html msg -> Html msg 167 | dangerButtonWithIcon modifiers attributes children anIcon = 168 | buttonWithIcon BtnDanger modifiers attributes children anIcon 169 | 170 | 171 | {-| Link button 172 | -} 173 | linkButton : List ButtonModifier -> List (Attribute msg) -> String -> Html msg 174 | linkButton modifiers attributes buttonText = 175 | button BtnLink modifiers attributes buttonText 176 | 177 | 178 | {-| Link button with icon 179 | -} 180 | linkButtonWithIcon : List ButtonModifier -> List (Attribute msg) -> String -> Html msg -> Html msg 181 | linkButtonWithIcon modifiers attributes children anIcon = 182 | buttonWithIcon BtnLink modifiers attributes children anIcon 183 | 184 | 185 | {-| Light button 186 | -} 187 | lightButton : List ButtonModifier -> List (Attribute msg) -> String -> Html msg 188 | lightButton modifiers attributes buttonText = 189 | button BtnLight modifiers attributes buttonText 190 | 191 | 192 | {-| Light button with icon 193 | -} 194 | lightButtonWithIcon : List ButtonModifier -> List (Attribute msg) -> String -> Html msg -> Html msg 195 | lightButtonWithIcon modifiers attributes children anIcon = 196 | buttonWithIcon BtnLight modifiers attributes children anIcon 197 | 198 | 199 | 200 | --------------------------------------------------- 201 | 202 | 203 | {-| Groups several buttons together. 204 | -} 205 | buttonGroup : List (Html msg) -> List (Attribute msg) -> Html msg 206 | buttonGroup buttons attributes = 207 | div 208 | ((class "control is-grouped") 209 | :: attributes 210 | ) 211 | (List.map (\b -> p [ class "control" ] [ b ]) buttons) 212 | 213 | 214 | {-| Groups several buttons together. 215 | -} 216 | buttonAddonGroup : List (Html msg) -> List (Attribute msg) -> Html msg 217 | buttonAddonGroup buttons attributes = 218 | div 219 | ((class "control has-addons") 220 | :: attributes 221 | ) 222 | buttons 223 | 224 | 225 | 226 | -- (List.map (\b -> p [ class "control" ] [ b ]) buttons) 227 | 228 | 229 | {-| Creates button of ButtonType 230 | -} 231 | button : ButtonType -> List ButtonModifier -> List (Attribute msg) -> String -> Html msg 232 | button type' modifiers attributes buttonText = 233 | let 234 | combinedAttributes = 235 | (buttonClass type' modifiers) :: attributes 236 | in 237 | render RenderAsButton combinedAttributes buttonText Nothing 238 | 239 | 240 | {-| Creates button of ButtonType and insert icon. Use `BtnIconAfter` modifier 241 | to move icon to the right. 242 | -} 243 | buttonWithIcon : ButtonType -> List ButtonModifier -> List (Attribute msg) -> String -> Html msg -> Html msg 244 | buttonWithIcon type' modifiers attributes buttonText icon = 245 | let 246 | combinedAttributes = 247 | (buttonClass type' modifiers) :: attributes 248 | in 249 | render (determineRenderStyle modifiers) combinedAttributes buttonText (Just icon) 250 | 251 | 252 | determineRenderStyle : List ButtonModifier -> RenderStyle 253 | determineRenderStyle modifiers = 254 | let 255 | hasAfterModifier = 256 | List.filter (\m -> m == BtnIconAfter) modifiers 257 | in 258 | case List.head hasAfterModifier of 259 | Just _ -> 260 | RenderAsAnchorIconAfter 261 | 262 | Nothing -> 263 | RenderAsAnchorIconBefore 264 | 265 | 266 | buttonClass : ButtonType -> List ButtonModifier -> Attribute msg 267 | buttonClass type' modifiers = 268 | (typeToString type') 269 | :: List.map modifierToString modifiers 270 | |> (::) "button" 271 | |> String.join " " 272 | |> class 273 | 274 | 275 | render : RenderStyle -> List (Attribute msg) -> String -> Maybe (Html msg) -> Html msg 276 | render element attributes buttonText maybeIcon = 277 | case element of 278 | RenderAsButton -> 279 | Html.button attributes [ text buttonText ] 280 | 281 | RenderAsAnchorIconAfter -> 282 | a attributes 283 | [ span [] [ text buttonText ], Maybe.withDefault (text "Icon missing") maybeIcon ] 284 | 285 | RenderAsAnchorIconBefore -> 286 | a attributes 287 | [ Maybe.withDefault (text "Icon missing") maybeIcon, span [] [ text buttonText ] ] 288 | 289 | 290 | modifierToString : ButtonModifier -> String 291 | modifierToString modifier = 292 | case modifier of 293 | BtnSmall -> 294 | "is-small" 295 | 296 | BtnNormal -> 297 | "is-normal" 298 | 299 | BtnMedium -> 300 | "is-medium" 301 | 302 | BtnLarge -> 303 | "is-large" 304 | 305 | BtnOutlined -> 306 | "is-outlined" 307 | 308 | BtnInverted -> 309 | "is-inverted" 310 | 311 | BtnLoading -> 312 | "is-loading" 313 | 314 | BtnActive -> 315 | "is-active" 316 | 317 | BtnDisabled -> 318 | "is-disabled" 319 | 320 | BtnIconAfter -> 321 | "" 322 | 323 | 324 | typeToString : ButtonType -> String 325 | typeToString type' = 326 | case type' of 327 | BtnDefault -> 328 | "" 329 | 330 | BtnPrimary -> 331 | "is-primary" 332 | 333 | BtnInfo -> 334 | "is-info" 335 | 336 | BtnSuccess -> 337 | "is-success" 338 | 339 | BtnWarning -> 340 | "is-warning" 341 | 342 | BtnDanger -> 343 | "is-danger" 344 | 345 | BtnWhite -> 346 | "is-white" 347 | 348 | BtnLight -> 349 | "is-light" 350 | 351 | BtnDark -> 352 | "is-dark" 353 | 354 | BtnBlack -> 355 | "is-black" 356 | 357 | BtnLink -> 358 | "is-link" 359 | -------------------------------------------------------------------------------- /src/Bulma/Icons.elm: -------------------------------------------------------------------------------- 1 | module Bulma.Icons 2 | exposing 3 | ( Icon(..) 4 | , icon 5 | , normalIcon 6 | , smallIcon 7 | , mediumIcon 8 | , largeIcon 9 | ) 10 | 11 | {-| Bulma is compatible with Font Awesome icons. 12 | 13 | Make sure to include [Font Awesome](http://fontawesome.io/). 14 | 15 | @docs Icon, icon, normalIcon, smallIcon, mediumIcon, largeIcon 16 | -} 17 | 18 | import Html exposing (..) 19 | import Html.Attributes exposing (class) 20 | import String 21 | 22 | 23 | {-| Icon type 24 | -} 25 | type Icon 26 | = IconSmall 27 | | IconNormal 28 | | IconMedium 29 | | IconLarge 30 | 31 | 32 | {-| Creates a normal icon 33 | -} 34 | normalIcon : String -> List (Attribute msg) -> Html msg 35 | normalIcon anIcon attributes = 36 | icon IconNormal anIcon attributes 37 | 38 | 39 | {-| Creates a small icon 40 | -} 41 | smallIcon : String -> List (Attribute msg) -> Html msg 42 | smallIcon anIcon attributes = 43 | icon IconSmall anIcon attributes 44 | 45 | 46 | {-| Creates a small icon 47 | -} 48 | mediumIcon : String -> List (Attribute msg) -> Html msg 49 | mediumIcon anIcon attributes = 50 | icon IconMedium anIcon attributes 51 | 52 | 53 | {-| Creates a small icon 54 | -} 55 | largeIcon : String -> List (Attribute msg) -> Html msg 56 | largeIcon anIcon attributes = 57 | icon IconLarge anIcon attributes 58 | 59 | 60 | {-| Creates an icon 61 | The base function for creating icons. E.g. 62 | 63 | icon IconSmall IconShoppingCart [] 64 | -} 65 | icon : Icon -> String -> List (Attribute msg) -> Html msg 66 | icon size anIcon attributes = 67 | span [ sizeClass size ] 68 | [ i [ iconClass anIcon ] [] 69 | ] 70 | 71 | 72 | sizeClass : Icon -> Attribute msg 73 | sizeClass size = 74 | let 75 | sizeString = 76 | case size of 77 | IconSmall -> 78 | "is-small" 79 | 80 | IconNormal -> 81 | "" 82 | 83 | IconMedium -> 84 | "is-medium" 85 | 86 | IconLarge -> 87 | "is-large" 88 | in 89 | class ("icon " ++ sizeString) 90 | 91 | 92 | iconClass : String -> Attribute msg 93 | iconClass anIcon = 94 | class ("fa fa-" ++ anIcon) 95 | -------------------------------------------------------------------------------- /src/Bulma/Notifications.elm: -------------------------------------------------------------------------------- 1 | module Bulma.Notifications exposing (notification, NotificationType(..)) 2 | 3 | {-| Bold notification blocks, to alert your users of something. 4 | 5 | @docs notification 6 | -} 7 | 8 | import Html exposing (..) 9 | import Html.Attributes exposing (class) 10 | import String 11 | 12 | 13 | type NotificationType 14 | = NotificationDefault 15 | | NotificationPrimary 16 | | NotificationInfo 17 | | NotificationSuccess 18 | | NotificationWarning 19 | | NotificationDanger 20 | 21 | 22 | {-| Create notification 23 | -} 24 | notification : NotificationType -> List (Attribute msg) -> List (Attribute msg) -> List (Html msg) -> Html msg 25 | notification aType closeButtonAtrributes attributes children = 26 | div ((notificationClass aType) :: attributes) 27 | ((button (class "delete" :: closeButtonAtrributes) []) 28 | :: children 29 | ) 30 | 31 | 32 | notificationClass : NotificationType -> Attribute msg 33 | notificationClass aType = 34 | let 35 | typeClass = 36 | case aType of 37 | NotificationDefault -> 38 | "" 39 | 40 | NotificationPrimary -> 41 | "is-primary" 42 | 43 | NotificationInfo -> 44 | "is-info" 45 | 46 | NotificationSuccess -> 47 | "is-success" 48 | 49 | NotificationWarning -> 50 | "is-warning" 51 | 52 | NotificationDanger -> 53 | "is-danger" 54 | in 55 | class ("notification " ++ typeClass) 56 | -------------------------------------------------------------------------------- /src/Bulma/icons.txt: -------------------------------------------------------------------------------- 1 | fa-adjust 2 | fa-adn 3 | fa-align-center 4 | fa-align-justify 5 | fa-align-left 6 | fa-align-right 7 | fa-ambulance 8 | fa-anchor 9 | fa-android 10 | fa-angellist 11 | fa-angle-double-down 12 | fa-angle-double-left 13 | fa-angle-double-right 14 | fa-angle-double-up 15 | fa-angle-down 16 | fa-angle-left 17 | fa-angle-right 18 | fa-angle-up 19 | fa-apple 20 | fa-archive 21 | fa-area-chart 22 | fa-arrow-circle-down 23 | fa-arrow-circle-left 24 | fa-arrow-circle-o-down 25 | fa-arrow-circle-o-left 26 | fa-arrow-circle-o-right 27 | fa-arrow-circle-o-up 28 | fa-arrow-circle-right 29 | fa-arrow-circle-up 30 | fa-arrow-down 31 | fa-arrow-left 32 | fa-arrow-right 33 | fa-arrow-up 34 | fa-arrows 35 | fa-arrows-alt 36 | fa-arrows-h 37 | fa-arrows-v 38 | fa-asterisk 39 | fa-at 40 | fa-automobile 41 | fa-backward 42 | fa-ban 43 | fa-bank 44 | fa-bar-chart 45 | fa-bar-chart-o 46 | fa-barcode 47 | fa-bars 48 | fa-bed 49 | fa-beer 50 | fa-behance 51 | fa-behance-square 52 | fa-bell 53 | fa-bell-o 54 | fa-bell-slash 55 | fa-bell-slash-o 56 | fa-bicycle 57 | fa-binoculars 58 | fa-birthday-cake 59 | fa-bitbucket 60 | fa-bitbucket-square 61 | fa-bitcoin 62 | fa-bold 63 | fa-bolt 64 | fa-bomb 65 | fa-book 66 | fa-bookmark 67 | fa-bookmark-o 68 | fa-briefcase 69 | fa-btc 70 | fa-bug 71 | fa-building 72 | fa-building-o 73 | fa-bullhorn 74 | fa-bullseye 75 | fa-bus 76 | fa-buysellads 77 | fa-cab 78 | fa-calculator 79 | fa-calendar 80 | fa-calendar-o 81 | fa-camera 82 | fa-camera-retro 83 | fa-car 84 | fa-caret-down 85 | fa-caret-left 86 | fa-caret-right 87 | fa-caret-square-o-down 88 | fa-caret-square-o-left 89 | fa-caret-square-o-right 90 | fa-caret-square-o-up 91 | fa-caret-up 92 | fa-cart-arrow-down 93 | fa-cart-plus 94 | fa-cc 95 | fa-cc-amex 96 | fa-cc-discover 97 | fa-cc-mastercard 98 | fa-cc-paypal 99 | fa-cc-stripe 100 | fa-cc-visa 101 | fa-certificate 102 | fa-chain 103 | fa-chain-broken 104 | fa-check 105 | fa-check-circle 106 | fa-check-circle-o 107 | fa-check-square 108 | fa-check-square-o 109 | fa-chevron-circle-down 110 | fa-chevron-circle-left 111 | fa-chevron-circle-right 112 | fa-chevron-circle-up 113 | fa-chevron-down 114 | fa-chevron-left 115 | fa-chevron-right 116 | fa-chevron-up 117 | fa-child 118 | fa-circle 119 | fa-circle-o 120 | fa-circle-o-notch 121 | fa-circle-thin 122 | fa-clipboard 123 | fa-clock-o 124 | fa-close 125 | fa-cloud 126 | fa-cloud-download 127 | fa-cloud-upload 128 | fa-cny 129 | fa-code 130 | fa-code-fork 131 | fa-codepen 132 | fa-coffee 133 | fa-cog 134 | fa-cogs 135 | fa-columns 136 | fa-comment 137 | fa-comment-o 138 | fa-comments 139 | fa-comments-o 140 | fa-compass 141 | fa-compress 142 | fa-connectdevelop 143 | fa-copy 144 | fa-copyright 145 | fa-credit-card 146 | fa-crop 147 | fa-crosshairs 148 | fa-css3 149 | fa-cube 150 | fa-cubes 151 | fa-cut 152 | fa-cutlery 153 | fa-dashboard 154 | fa-dashcube 155 | fa-database 156 | fa-dedent 157 | fa-delicious 158 | fa-desktop 159 | fa-deviantart 160 | fa-diamond 161 | fa-digg 162 | fa-dollar 163 | fa-dot-circle-o 164 | fa-download 165 | fa-dribbble 166 | fa-dropbox 167 | fa-drupal 168 | fa-edit 169 | fa-eject 170 | fa-ellipsis-h 171 | fa-ellipsis-v 172 | fa-empire 173 | fa-envelope 174 | fa-envelope-o 175 | fa-envelope-square 176 | fa-eraser 177 | fa-eur 178 | fa-euro 179 | fa-exchange 180 | fa-exclamation 181 | fa-exclamation-circle 182 | fa-exclamation-triangle 183 | fa-expand 184 | fa-external-link 185 | fa-external-link-square 186 | fa-eye 187 | fa-eye-slash 188 | fa-eyedropper 189 | fa-facebook 190 | fa-facebook-f 191 | fa-facebook-official 192 | fa-facebook-square 193 | fa-fast-backward 194 | fa-fast-forward 195 | fa-fax 196 | fa-female 197 | fa-fighter-jet 198 | fa-file 199 | fa-file-archive-o 200 | fa-file-audio-o 201 | fa-file-code-o 202 | fa-file-excel-o 203 | fa-file-image-o 204 | fa-file-movie-o 205 | fa-file-o 206 | fa-file-pdf-o 207 | fa-file-photo-o 208 | fa-file-picture-o 209 | fa-file-powerpoint-o 210 | fa-file-sound-o 211 | fa-file-text 212 | fa-file-text-o 213 | fa-file-video-o 214 | fa-file-word-o 215 | fa-file-zip-o 216 | fa-files-o 217 | fa-film 218 | fa-filter 219 | fa-fire 220 | fa-fire-extinguisher 221 | fa-flag 222 | fa-flag-checkered 223 | fa-flag-o 224 | fa-flash 225 | fa-flask 226 | fa-flickr 227 | fa-floppy-o 228 | fa-folder 229 | fa-folder-o 230 | fa-folder-open 231 | fa-folder-open-o 232 | fa-font 233 | fa-forumbee 234 | fa-forward 235 | fa-foursquare 236 | fa-frown-o 237 | fa-futbol-o 238 | fa-gamepad 239 | fa-gavel 240 | fa-gbp 241 | fa-ge 242 | fa-gear 243 | fa-gears 244 | fa-genderless 245 | fa-gift 246 | fa-git 247 | fa-git-square 248 | fa-github 249 | fa-github-alt 250 | fa-github-square 251 | fa-gittip 252 | fa-glass 253 | fa-globe 254 | fa-google 255 | fa-google-plus 256 | fa-google-plus-square 257 | fa-google-wallet 258 | fa-graduation-cap 259 | fa-gratipay 260 | fa-group 261 | fa-h-square 262 | fa-hacker-news 263 | fa-hand-o-down 264 | fa-hand-o-left 265 | fa-hand-o-right 266 | fa-hand-o-up 267 | fa-hdd-o 268 | fa-header 269 | fa-headphones 270 | fa-heart 271 | fa-heart-o 272 | fa-heartbeat 273 | fa-history 274 | fa-home 275 | fa-hospital-o 276 | fa-hotel 277 | fa-html5 278 | fa-ils 279 | fa-image 280 | fa-inbox 281 | fa-indent 282 | fa-info 283 | fa-info-circle 284 | fa-inr 285 | fa-instagram 286 | fa-institution 287 | fa-ioxhost 288 | fa-italic 289 | fa-joomla 290 | fa-jpy 291 | fa-jsfiddle 292 | fa-key 293 | fa-keyboard-o 294 | fa-krw 295 | fa-language 296 | fa-laptop 297 | fa-lastfm 298 | fa-lastfm-square 299 | fa-leaf 300 | fa-leanpub 301 | fa-legal 302 | fa-lemon-o 303 | fa-level-down 304 | fa-level-up 305 | fa-life-bouy 306 | fa-life-buoy 307 | fa-life-ring 308 | fa-life-saver 309 | fa-lightbulb-o 310 | fa-line-chart 311 | fa-link 312 | fa-linkedin 313 | fa-linkedin-square 314 | fa-linux 315 | fa-list 316 | fa-list-alt 317 | fa-list-ol 318 | fa-list-ul 319 | fa-location-arrow 320 | fa-lock 321 | fa-long-arrow-down 322 | fa-long-arrow-left 323 | fa-long-arrow-right 324 | fa-long-arrow-up 325 | fa-magic 326 | fa-magnet 327 | fa-mail-forward 328 | fa-mail-reply 329 | fa-mail-reply-all 330 | fa-male 331 | fa-map-marker 332 | fa-mars 333 | fa-mars-double 334 | fa-mars-stroke 335 | fa-mars-stroke-h 336 | fa-mars-stroke-v 337 | fa-maxcdn 338 | fa-meanpath 339 | fa-medium 340 | fa-medkit 341 | fa-meh-o 342 | fa-mercury 343 | fa-microphone 344 | fa-microphone-slash 345 | fa-minus 346 | fa-minus-circle 347 | fa-minus-square 348 | fa-minus-square-o 349 | fa-mobile 350 | fa-mobile-phone 351 | fa-money 352 | fa-moon-o 353 | fa-mortar-board 354 | fa-motorcycle 355 | fa-music 356 | fa-navicon 357 | fa-neuter 358 | fa-newspaper-o 359 | fa-openid 360 | fa-outdent 361 | fa-pagelines 362 | fa-paint-brush 363 | fa-paper-plane 364 | fa-paper-plane-o 365 | fa-paperclip 366 | fa-paragraph 367 | fa-paste 368 | fa-pause 369 | fa-paw 370 | fa-paypal 371 | fa-pencil 372 | fa-pencil-square 373 | fa-pencil-square-o 374 | fa-phone 375 | fa-phone-square 376 | fa-photo 377 | fa-picture-o 378 | fa-pie-chart 379 | fa-pied-piper 380 | fa-pied-piper-alt 381 | fa-pinterest 382 | fa-pinterest-p 383 | fa-pinterest-square 384 | fa-plane 385 | fa-play 386 | fa-play-circle 387 | fa-play-circle-o 388 | fa-plug 389 | fa-plus 390 | fa-plus-circle 391 | fa-plus-square 392 | fa-plus-square-o 393 | fa-power-off 394 | fa-print 395 | fa-puzzle-piece 396 | fa-qq 397 | fa-qrcode 398 | fa-question 399 | fa-question-circle 400 | fa-quote-left 401 | fa-quote-right 402 | fa-ra 403 | fa-random 404 | fa-rebel 405 | fa-recycle 406 | fa-reddit 407 | fa-reddit-square 408 | fa-refresh 409 | fa-remove 410 | fa-renren 411 | fa-reorder 412 | fa-repeat 413 | fa-reply 414 | fa-reply-all 415 | fa-retweet 416 | fa-rmb 417 | fa-road 418 | fa-rocket 419 | fa-rotate-left 420 | fa-rotate-right 421 | fa-rouble 422 | fa-rss 423 | fa-rss-square 424 | fa-rub 425 | fa-ruble 426 | fa-rupee 427 | fa-save 428 | fa-scissors 429 | fa-search 430 | fa-search-minus 431 | fa-search-plus 432 | fa-sellsy 433 | fa-send 434 | fa-send-o 435 | fa-server 436 | fa-share 437 | fa-share-alt 438 | fa-share-alt-square 439 | fa-share-square 440 | fa-share-square-o 441 | fa-shekel 442 | fa-sheqel 443 | fa-shield 444 | fa-ship 445 | fa-shirtsinbulk 446 | fa-shopping-cart 447 | fa-sign-in 448 | fa-sign-out 449 | fa-signal 450 | fa-simplybuilt 451 | fa-sitemap 452 | fa-skyatlas 453 | fa-skype 454 | fa-slack 455 | fa-sliders 456 | fa-slideshare 457 | fa-smile-o 458 | fa-soccer-ball-o 459 | fa-sort 460 | fa-sort-alpha-asc 461 | fa-sort-alpha-desc 462 | fa-sort-amount-asc 463 | fa-sort-amount-desc 464 | fa-sort-asc 465 | fa-sort-desc 466 | fa-sort-down 467 | fa-sort-numeric-asc 468 | fa-sort-numeric-desc 469 | fa-sort-up 470 | fa-soundcloud 471 | fa-space-shuttle 472 | fa-spinner 473 | fa-spoon 474 | fa-spotify 475 | fa-square 476 | fa-square-o 477 | fa-stack-exchange 478 | fa-stack-overflow 479 | fa-star 480 | fa-star-half 481 | fa-star-half-empty 482 | fa-star-half-full 483 | fa-star-half-o 484 | fa-star-o 485 | fa-steam 486 | fa-steam-square 487 | fa-step-backward 488 | fa-step-forward 489 | fa-stethoscope 490 | fa-stop 491 | fa-street-view 492 | fa-strikethrough 493 | fa-stumbleupon 494 | fa-stumbleupon-circle 495 | fa-subscript 496 | fa-subway 497 | fa-suitcase 498 | fa-sun-o 499 | fa-superscript 500 | fa-support 501 | fa-table 502 | fa-tablet 503 | fa-tachometer 504 | fa-tag 505 | fa-tags 506 | fa-tasks 507 | fa-taxi 508 | fa-tencent-weibo 509 | fa-terminal 510 | fa-text-height 511 | fa-text-width 512 | fa-th 513 | fa-th-large 514 | fa-th-list 515 | fa-thumb-tack 516 | fa-thumbs-down 517 | fa-thumbs-o-down 518 | fa-thumbs-o-up 519 | fa-thumbs-up 520 | fa-ticket 521 | fa-times 522 | fa-times-circle 523 | fa-times-circle-o 524 | fa-tint 525 | fa-toggle-down 526 | fa-toggle-left 527 | fa-toggle-off 528 | fa-toggle-on 529 | fa-toggle-right 530 | fa-toggle-up 531 | fa-train 532 | fa-transgender 533 | fa-transgender-alt 534 | fa-trash 535 | fa-trash-o 536 | fa-tree 537 | fa-trello 538 | fa-trophy 539 | fa-truck 540 | fa-try 541 | fa-tty 542 | fa-tumblr 543 | fa-tumblr-square 544 | fa-turkish-lira 545 | fa-twitch 546 | fa-twitter 547 | fa-twitter-square 548 | fa-umbrella 549 | fa-underline 550 | fa-undo 551 | fa-university 552 | fa-unlink 553 | fa-unlock 554 | fa-unlock-alt 555 | fa-unsorted 556 | fa-upload 557 | fa-usd 558 | fa-user 559 | fa-user-md 560 | fa-user-plus 561 | fa-user-secret 562 | fa-user-times 563 | fa-users 564 | fa-venus 565 | fa-venus-double 566 | fa-venus-mars 567 | fa-viacoin 568 | fa-video-camera 569 | fa-vimeo-square 570 | fa-vine 571 | fa-vk 572 | fa-volume-down 573 | fa-volume-off 574 | fa-volume-up 575 | fa-warning 576 | fa-wechat 577 | fa-weibo 578 | fa-weixin 579 | fa-whatsapp 580 | fa-wheelchair 581 | fa-wifi 582 | fa-windows 583 | fa-won 584 | fa-wordpress 585 | fa-wrench 586 | fa-xing 587 | fa-xing-square 588 | fa-yahoo 589 | fa-yelp 590 | fa-yen 591 | fa-youtube 592 | fa-youtube-play 593 | fa-youtube-square 594 | -------------------------------------------------------------------------------- /src/Main.elm: -------------------------------------------------------------------------------- 1 | module Main exposing (..) 2 | 3 | import Html exposing (Html, div, text, h1) 4 | import Html.Attributes exposing (id, class, style) 5 | import Html.Events exposing (onClick) 6 | import Html.App as Html 7 | import Bulma.Buttons exposing (..) 8 | import Bulma.Icons exposing (..) 9 | import Bulma.Notifications exposing (..) 10 | 11 | 12 | main : Program Never 13 | main = 14 | Html.program 15 | { init = init 16 | , view = view 17 | , update = update 18 | , subscriptions = subscriptions 19 | } 20 | 21 | 22 | 23 | -- MODEL 24 | 25 | 26 | type alias Model = 27 | Int 28 | 29 | 30 | initialModel : Model 31 | initialModel = 32 | 0 33 | 34 | 35 | init : ( Model, Cmd Msg ) 36 | init = 37 | ( initialModel, Cmd.none ) 38 | 39 | 40 | 41 | -- UPDATE 42 | 43 | 44 | type Msg 45 | = NoOp 46 | | Increment 47 | 48 | 49 | update : Msg -> Model -> ( Model, Cmd Msg ) 50 | update msg model = 51 | case msg of 52 | Increment -> 53 | ( model + 1, Cmd.none ) 54 | 55 | NoOp -> 56 | ( model, Cmd.none ) 57 | 58 | 59 | 60 | -- SUBSCRIPTIONS 61 | 62 | 63 | subscriptions : Model -> Sub Msg 64 | subscriptions model = 65 | Sub.none 66 | 67 | 68 | 69 | -- VIEW 70 | 71 | 72 | view : Model -> Html Msg 73 | view model = 74 | div [] 75 | [ h1 [ class "title" ] [ text "Demo" ] 76 | , buttonGroup 77 | [ defaultButton [] [] "Click me" 78 | , button BtnPrimary [] [] "Click me" 79 | , defaultButtonWithIcon [] [] "Click me" (smallIcon "lock" []) 80 | , buttonWithIcon BtnPrimary [] [] "Click me" (smallIcon "lock" []) 81 | ] 82 | [] 83 | , buttonAddonGroup 84 | [ defaultButtonWithIcon [] [] "left" (smallIcon "align-left" []) 85 | , defaultButtonWithIcon [] [] "center" (smallIcon "align-center" []) 86 | , defaultButtonWithIcon [] [] "right" (smallIcon "align-right" []) 87 | ] 88 | [] 89 | , buttonGroup 90 | [ button BtnPrimary [] [] "I'm dangerous" 91 | , defaultButton [] [] "Not like me" 92 | , button BtnLink [] [] "Not like me" 93 | , button BtnLink [] [] "Especially not like me" 94 | , button BtnLink [ BtnActive ] [] "Active" 95 | , button BtnLink [ BtnDisabled ] [] "Disabled" 96 | , button BtnLink [ BtnLoading ] [] "Loading" 97 | , button BtnLink [ BtnInverted ] [] "Inverted" 98 | , button BtnLink [ BtnOutlined ] [] "Outlined" 99 | , buttonWithIcon BtnLight [ BtnIconAfter ] [] "Outlined" (smallIcon "times" []) 100 | ] 101 | [] 102 | , buttonGroup 103 | [ button BtnDanger [] [] "I'm dangerous" 104 | , warningButton [] [] "Not like me" 105 | , button BtnLink [] [] "Not like me" 106 | , button BtnDanger [] [] "Especially not like me" 107 | , button BtnDanger [ BtnActive ] [] "Active" 108 | , button BtnDanger [ BtnDisabled ] [] "Disabled" 109 | , button BtnDanger [ BtnLoading ] [] "Loading" 110 | , button BtnDanger [ BtnInverted ] [] "Inverted" 111 | , button BtnDanger [ BtnOutlined ] [] "Outlined" 112 | ] 113 | [] 114 | , buttonGroup 115 | [ warningButtonWithIcon [] [] "Unlock" (smallIcon "lock" []) 116 | , dangerButtonWithIcon [ BtnSmall, BtnIconAfter ] [] "Delete" (smallIcon "times" []) 117 | , buttonWithIcon BtnSuccess [ BtnLarge, BtnOutlined ] [] "" (normalIcon "shopping-cart" []) 118 | ] 119 | [] 120 | , div [] 121 | [ largeIcon "shopping-cart" [] 122 | , mediumIcon "shopping-cart" [] 123 | , normalIcon "shopping-cart" [] 124 | , smallIcon "shopping-cart" [] 125 | , icon IconSmall "shopping-cart" [] 126 | ] 127 | , div [] [ dangerButton [ BtnLarge ] [] ("Clicks: " ++ (toString model)) ] 128 | , div [ style [ ( "background-color", "white" ) ] ] 129 | [ notification NotificationDefault [ onClick Increment ] [] [ text "Click close button to test onClick" ] 130 | , notification NotificationInfo [] [ onClick Increment ] [ text "Click me to test onClick" ] 131 | , notification NotificationSuccess [] [] [ text "lorem ipsum dolor sit amet" ] 132 | , notification NotificationDanger [] [] [ text "lorem ipsum dolor sit amet" ] 133 | ] 134 | ] 135 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // Require index.html so it gets copied to dist 4 | require('./index.html') 5 | 6 | // Embed Elm 7 | var Elm = require('./Main.elm') 8 | var mountNode = document.getElementById('main') 9 | var app = Elm.Main.embed(mountNode) 10 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require("path") 2 | 3 | module.exports = { 4 | entry: { 5 | app: [ 6 | './src/index.js' 7 | ] 8 | }, 9 | 10 | output: { 11 | path: path.resolve(__dirname + '/dist'), 12 | filename: '[name].js', 13 | }, 14 | 15 | module: { 16 | loaders: [ 17 | { 18 | test: /\.html$/, 19 | exclude: /node_modules/, 20 | loader: 'file?name=[name].[ext]', 21 | }, 22 | { 23 | test: /\.elm$/, 24 | exclude: [/elm-stuff/, /node_modules/], 25 | loader: 'elm-webpack', 26 | }, 27 | ], 28 | 29 | noParse: /\.elm$/, 30 | }, 31 | 32 | devServer: { 33 | inline: true, 34 | stats: { colors: true }, 35 | }, 36 | 37 | }; 38 | --------------------------------------------------------------------------------