Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/supermacro/elm-antd
The official Ant Design UI Kit for Elm
https://github.com/supermacro/elm-antd
ant-design antd components design-systems elm fp functional-programming hacktoberfest ui-kit
Last synced: 3 months ago
JSON representation
The official Ant Design UI Kit for Elm
- Host: GitHub
- URL: https://github.com/supermacro/elm-antd
- Owner: supermacro
- License: mit
- Created: 2020-04-21T02:02:01.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T17:20:00.000Z (about 2 years ago)
- Last Synced: 2024-10-30T05:27:06.211Z (3 months ago)
- Topics: ant-design, antd, components, design-systems, elm, fp, functional-programming, hacktoberfest, ui-kit
- Language: Elm
- Homepage:
- Size: 1.21 MB
- Stars: 58
- Watchers: 3
- Forks: 11
- Open Issues: 62
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Elm Ant Design
[](https://circleci.com/gh/supermacro/elm-antd) [](https://percy.io/Elm-Antd-Open-Source-Project/elm-antd)
> **[Component Gallery](https://elm-antd.netlify.app)**
> **[API Documentation](https://package.elm-lang.org/packages/supermacro/elm-antd/latest/)**
Bringing the amazing [Ant Design](https://ant.design) kit to Elm!
Styled entirely using `elm-css`! No external stylesheet needed. Just `elm install supermacro/elm-antd` and you're all good to go!
**Early Development Notice:**
> Elm Ant Design is not fully implemented and in a early / exploratory phase. A lot of APIs may not work yet (in the event that this is the case, please report it as an issue - which I will prioritize). The current API is subject to frequent change, but because Elm is super cool 😎, any breaking changes are guaranteed to be released under a Major release (as per semver).
## Installation
```
elm install supermacro/elm-antd
```
## Usage
#### Render stylesheet at the root of your Elm project
Elm Antd has a stylesheet implemented in Elm that you must hook up at the root of your elm project. You must use one of `Ant.Css.defaultStyles` or `Ant.Css.createThemedStyles customTheme` (see [official docs](https://package.elm-lang.org/packages/supermacro/elm-antd/latest/) to learn about theming).
```elm
import Ant.Css
view : Model -> Html Msg
view model =
div []
[ Ant.Css.defaultStyles
, viewApp model
]
```
#### Apply Normalize Css
Elm Ant Design is built with normalize.css as its blank canvas.
You should add normalize.css to your project or else the components may not look as expected.
You have three options:
- Add normalize.css as a `link` tag to your html directly
```html
```
- Add normizlize.css as a Elm module using [elm-css-modern-normalize](https://package.elm-lang.org/packages/hmsk/elm-css-modern-normalize/latest)
```elm
import Css.ModernNormalize as ModernNormalize
view : Model -> Html Msg
view _ =
[ ModernNormalize.globalHtml
, Ant.Css.defaultStyles
-- Your application view comes here
]
```
- Use a bundler for NodeJS to load normalize into your app at build-time.
npm module Link: https://www.npmjs.com/package/normalize
```javascript
require('normalize')
```
#### [Optional] - Add Extra animations
There are additional animations you can add to your `elm-antd` project by adding JS event handlers to your app.
You can add them in one of two ways:
- Add the following `script` tag to the `head` of your html file:
```html
```
- install `elm-antd-extras` npm package and use a bundling tool like webpack, gulp, etc in order to include the code into your html file
## Contributing
Want to help out?
- Check out the [issues](https://github.com/supermacro/elm-antd/issues), and search for "good first issue" or "help wanted"!
- Check out the [CONTRIBUTING](https://github.com/supermacro/elm-antd/blob/master/CONTRIBUTING.md) doc
## Inspiration:
- https://github.com/aforemny/elm-mdc
- https://github.com/EdutainmentLIVE/elm-bootstrap
- https://github.com/NoRedInk/noredink-ui