Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/pebble/slate

[Deprecated] Front-end framework for developing Pebble mobile configuration pages.
https://github.com/pebble/slate

Last synced: 3 months ago
JSON representation

[Deprecated] Front-end framework for developing Pebble mobile configuration pages.

Awesome Lists containing this project

README

        

Slate [Deprecated]
=====

> **Note** Slate has been deprecated, and superseded by [Clay](https://github.com/pebble/clay).

![Bower](https://img.shields.io/bower/v/pebble-slate.svg)

Slate is a front-end framework for developing Pebble mobile configuration pages.
It's the fastest way to make a clean UI for a Pebble app's mobile configuration
page.

![screenshot](https://raw.githubusercontent.com/pebble/slate/master/docs/assets/screenshot.png)

Getting Started
---------------

### Getting Slate

There are only four files that makeup the Slate framework, a CSS file and a
JavaScript file, and two fonts.

There are two quick ways to getting started with Slate.

#### Via Download

The CSS and JS files and fonts are also available via download.

[Download Slate 0.0.3 >](https://github.com/pebble/slate/archive/v0.0.3.zip)

#### Via Bower

The CSS and JS files and fonts are also avaliable via Bower.

```bash
bower install pebble-slate
```

### Zepto.js

Slate is also bundled with [Zepto.js](https://github.com/madrobby/zepto), which
is "a minimalist JavaScript library for modern browsers with a largely
jQuery-compatible API."

Video Tutorial
--------------

A detailed live demo tutorial was given at the Pebble SF Meetup, and can be
watched in full below.

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/TtP7z6wceqI/0.jpg)](http://www.youtube.com/watch?v=TtP7z6wceqI)

Additionally, the example app used in the video
[can be found here](https://github.com/pebble-hacks/slate-watchface-template),
while a second example implementation
[can be found here](https://github.com/pebble-examples/slate-config-example).

Documentation
-------------

Here is a list of the different components you can create with Slate.

### Paragraphs

![paragraph](https://raw.githubusercontent.com/pebble/slate/master/docs/assets/slate-paragraph.png)

```html




Abilities or he perfectly pretended so strangers be exquisite. Oh to
another chamber pleased imagine do in. Went me rank at last loud shot an
draw. Excellent so to no sincerity smallness. Removal request delight if
on he we. Unaffected in we by apartments astonished to decisively
themselves. Offended ten old consider speaking.



```

### Headers, Footers, and Items

![header, footer, and item](https://raw.githubusercontent.com/pebble/slate/master/docs/assets/slate-header-content-footer.png)

```html


Single Item



Example Item





```

### Toggles and Selects

![toggles and select](https://raw.githubusercontent.com/pebble/slate/master/docs/assets/slate-toggle.png)

```html


Multiple Items



Example Item



Example Item



Example Item

Both
Major only
Minor only




```

### Checkboxes

![checkboxes](https://raw.githubusercontent.com/pebble/slate/master/docs/assets/slate-checkbox.png)

```html


Checkboxes



Example Item



Example Item




```

### Radio Buttons

![radio buttons](https://raw.githubusercontent.com/pebble/slate/master/docs/assets/slate-radio.png)

```html


Radio Buttons



Example Item



Example Item



Example Item




```

### Date, Time, and Colorpickers

![date, time, and colorpickers](https://raw.githubusercontent.com/pebble/slate/master/docs/assets/slate-date-time-colorpickers.png)

```html


Date, Time, Colorpickers



Example Item



Example Item



Normal Color Picker



Sunny Color Picker




```

### Input Fields

![input field](https://raw.githubusercontent.com/pebble/slate/master/docs/assets/slate-input.png)

```html


Input Field









```

### Input Fields with Buttons

![input field with button](https://raw.githubusercontent.com/pebble/slate/master/docs/assets/slate-input-button.png)

```html


Input Field + Send Button










```

### Tab Buttons

![tab buttons](https://raw.githubusercontent.com/pebble/slate/master/docs/assets/slate-tab-button.png)

```html


Tab Buttons



```

### Sliders

![slider](https://raw.githubusercontent.com/pebble/slate/master/docs/assets/slate-slider.png)

```html


Slider










```

### Draggable Lists

![draggable list](https://raw.githubusercontent.com/pebble/slate/master/docs/assets/slate-draggable.png)

```html


draggable Items



Example Item 1
Example Item 2
Example Item 3



```

### Lists

![list](https://raw.githubusercontent.com/pebble/slate/master/docs/assets/slate-list.png)

```html


Item List



Example Item A
Example Item B



```

### Buttons

![button](https://raw.githubusercontent.com/pebble/slate/master/docs/assets/slate-button.png)

```html






```