# sky-labels **Repository Path**: mirrors_thoughtbot/sky-labels ## Basic Information - **Project Name**: sky-labels - **Description**: Fun, Compact & Accessible Forms - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-08-18 - **Last Updated**: 2026-05-23 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README SkyLabels.js ====== ### Fun, Compact & Accessible Forms [Try out a live demo](http://thoughtbot.github.io/sky-labels/) ## Why SkyLabels.js? * Customizable through CSS. Changes animations, styles, etc. * Accessible (uses a label element). * Doesn't require that you change your layout. The labels slide above all other content. * Easy to read the labels even when the input is focused. ## Getting Started If you are using Rails, check out [sky-labels-rails](https://github.com/thoughtbot/sky-labels-rails). Otherwise, read the following. 1. Download JavaScript & CSS files. Get them from [/dist/sky-labels.min.js](dist/sky-labels.min.js) and [/dist/sky-labels.css](/dist/sky-labels.css). 2. Put JavaScript & CSS files in your CSS and JavaScript directories. 3. Link to the JavaScript in your `` tag or near the end of the `` tag. Be sure to add `sky-labels.min.js` below jQuery. 4. Wrap inputs & labels in a `
`, `
` or other block level element with the class `sky-label`. Be sure the label has a `for` that matches the input. 5. Call `setupSkyLabels()` during the `domready` event or right after you include the `sky-labels.min.js`. 6. Customize the CSS to your liking! You can change how it animates, colors, size, etc. #### Example HTML ```html ``` ```html
``` Check out the [example HTML](https://github.com/thoughtbot/slider/blob/gh-pages/index.html) from the SkyLabels.js website ## Styling and animating your SkyLabels SkyLabels.js adds and removes styles from the element with the class `sky-label` so that you can customize every step of the slide. The class are applied as follows * `sky-label-focused` when the input has been focused * `sky-label-has-text` when the input has text You can apply styles and animations based on these two classes. See the [example CSS](https://github.com/thoughtbot/slider/blob/gh-pages/stylesheets/_slider.scss) from the SkyLabels.js website. ## For Developers You need [node](http://nodejs.org/). Then, in your shell: ```bash git clone https://github.com/thoughtbot/sky-labels.git cd sky-labels npm install -g grunt-cli npm install grunt # This compiles and minifies the JavaScript and Sass into dist/ ``` #### Using Tests Sky Labels uses Jasmine for testing. Add new specs to the `spec` folder. To run tests: `open spec/runner.html`