https://github.com/twilson63/material-hyperscript

Material Design Lite meets Hyperscript
https://github.com/twilson63/material-hyperscript

Last synced: about 1 month ago
JSON representation

Material Design Lite meets Hyperscript

• Host: GitHub
• URL: https://github.com/twilson63/material-hyperscript
• Owner: twilson63
• Created: 2016-05-19T19:31:24.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-08-06T20:59:39.000Z (over 8 years ago)
• Last Synced: 2024-08-03T19:09:10.383Z (5 months ago)
• Language: JavaScript
• Size: 12.7 KB
• Stars: 11
• Watchers: 4
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# Material Hyperscript

Material Design Lite is a project that implements the Material Design:

> Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible. Get started now.

This project uses MDL to implement `hyperscript` components for `mdl`

Hyperscript can be used in several frameworks: CycleJS, Mercury, React - or stand-alone.

## Example

``` js

var { h, create, diff, patch } = require('virtual-dom')

var {layout, header, headerRow, title,

  spacer, nav, navLink, content} = require('material-hyperscript')(h)

document.body.appendChild(

  create(

    layout([

      header([

        headerRow([

          title('Hello World'),

          spacer(),

          nav([

            navLink(['Link 1']),

            navLink(['Link 2'])

          ])

        ])

      ]),

      content([

        h('h1', ['Hello World'])

      ])

    ])

  )

)

```

## Install

```

npm install material-design-lite --save

npm install material-hyperscript --save

```

## Setup

index.html - head

``` html

```

## Documentation

[TODO]

Changelog

----

material-hyperscript follows [semantic versioning](http://semver.org/). To see a changelog with all material-hyperscript releases, check out the [Github releases page](https://github.com/twilson63/material-hyperscript/releases).

For a concise list of breaking changes, there's the [wiki list of breaking changes](https://github.com/twilson63/material-hyperscript/wiki/Breaking-changes).

Contributing

------------

We're always looking for new contributors! If you'd like to try your hand at writing code, writing documentation, designing the website, writing a blog post, or answering [questions on StackOverflow](http://stackoverflow.com/search?tab=newest&q=material-hyperscript), then we'd love to have your input.

If you have a pull request that you'd like to submit, please read the [contributing guide](https://github.com/twilson63/material-hyperscript/blob/master/CONTRIBUTING.md) for info on style, commit message format, and other (slightly!) nitpicky things like that. Material-hyperscript is heavily tested, so you'll also want to check out the [testing guide](https://github.com/twilson63/material-hyperscript/blob/master/TESTING.md).