Skip to content
GUI components for batteries-css
CSS JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
screenshots
src
.gitignore
.travis.yml
LICENSE
README.md
gulpfile.js
index.html
package.json
yarn.lock

README.md

batteries-components Build Status

This repository contains experimental CSS components used as an extension to batteries-layout. The components try to resemble a style similar to Google's material design, however they don't require any JavaScript at all and look good even if a user doesn't allow websites to execute scripts.

Components

Button

Animated GIF showing buttons

Buttons look similar to the material design ones. They support various colors and an inverted mode.

<a href="#" class="red button">red button</a>
<a href="#" class="inverted deep orange button">deep orange button with white background</a>

Inputs

Range

Animated GIF showing ranges

Ranges support colors and a disabled state:

<input type="range" disabled>
<input type="range" class="teal range">

Floating text/password/number inputs

Animated GIF showing the inputs

Inputs can have a floating label, and also support colors:

<div class="teal floating label input">
  <input type="text" placeholder="e.g. 12345">
  <label>ZIP code</label>
</div>

In order to let the label float around, you will need to provide a placeholder. The inputs use the :placeholder-shown selector internally to decide whether to float or not to float (that's because we don't have a :dirty selector yet, and marking fields as required can break form UX with optional fields).

Quick start

  • Download a release
  • Clone the repository
    • then run yarn install to install the dependencies
    • and yarn build to build the components
    • or yarn start to start a development server

Bugs and feature requests

Remember that this project is an extension to an experiment, so there's no guarantee it will actually work in production. If you find a bug or you have an idea of how to improve batteries-components, just file a new issue.

License

All code in this repository is released under the MIT license.

You can’t perform that action at this time.