• Stars
    star
    128
  • Rank 281,044 (Top 6 %)
  • Language
    CSS
  • License
    MIT License
  • Created over 9 years ago
  • Updated about 8 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

Slate [Deprecated]

Note Slate has been deprecated, and superseded by Clay.

Bower

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

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 >

Via Bower

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

bower install pebble-slate

Zepto.js

Slate is also bundled with Zepto.js, 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

Additionally, the example app used in the video can be found here, while a second example implementation can be found here.

Documentation

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

Paragraphs

paragraph

<div class="item-container">
  <div class="item-container-content">
    <div class="item">
      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.
    </div>
  </div>
</div>

Headers, Footers, and Items

header, footer, and item

<div class="item-container">
  <div class="item-container-header">Single Item</div>
  <div class="item-container-content">
    <label class="item">
      Example Item
      <input type="checkbox" class="item-toggle" name="toggle-1" checked>
    </label>
  </div>
  <div class="item-container-footer">
    Comfort reached gay perhaps chamber his six detract besides add. Moonlight
    newspaper up he it enjoyment agreeable depending. Timed
    <a href="#">voice share</a> led his widen noisy young.
  </div>
</div>

Toggles and Selects

toggles and select

<div class="item-container">
  <div class="item-container-header">Multiple Items</div>
  <div class="item-container-content">
    <label class="item">
      Example Item
      <input type="checkbox" class="item-toggle" name="toggle-2" checked>
    </label>
    <label class="item">
      Example Item
      <input type="checkbox" class="item-toggle" name="toggle-3">
    </label>
    <label class="item">
      Example Item
      <select name="select-1" dir='rtl' class="item-select">
        <option class="item-select-option">Both</option>
        <option class="item-select-option" selected>Major only</option>
        <option class="item-select-option">Minor only</option>
      </select>
    </label>
  </div>
</div>

Checkboxes

checkboxes

<div class="item-container">
  <div class="item-container-header">Checkboxes</div>
  <div class="item-container-content">
    <label class="item">
      Example Item
      <input type="checkbox" class="item-checkbox" name="checkbox-1">
    </label>
    <label class="item">
      Example Item
      <input type="checkbox" class="item-checkbox" name="checkbox-2" checked>
    </label>
  </div>
</div>

Radio Buttons

radio buttons

<div class="item-container">
  <div class="item-container-header">Radio Buttons</div>
  <div class="item-container-content">
    <label class="item">
      Example Item
      <input type="radio" class="item-radio" name="radio-1" value="a">
    </label>
    <label class="item">
      Example Item
      <input type="radio" class="item-radio" name="radio-1" value="b">
    </label>
    <label class="item">
      Example Item
      <input type="radio" class="item-radio" name="radio-1" value="c" checked>
    </label>
  </div>
</div>

Date, Time, and Colorpickers

date, time, and colorpickers

<div class="item-container">
  <div class="item-container-header">Date, Time, Colorpickers</div>
  <div class="item-container-content">
    <label class="item">
      Example Item
      <input type="time" class="item-time" name="time-1" value="18:35">
    </label>
    <label class="item">
      Example Item
      <input type="date" class="item-date" name="date-1" value="2015-02-12">
    </label>
     <label class="item">
      Normal Color Picker
      <input type="text" class="item-color item-color-normal" name="color-1" value="#000000">
    </label>
    <label class="item">
      Sunny Color Picker
      <input type="text" class="item-color item-color-sunny" name="color-2" value="#000000">
    </label>
  </div>
</div>

Input Fields

input field

<div class="item-container">
  <div class="item-container-header">Input Field</div>
  <div class="item-container-content">
    <label class="item">
      <div class="item-input-wrapper">
        <input type="text" class="item-input" name="input-1" placeholder="Input field">
      </div>
    </label>
  </div>
</div>

Input Fields with Buttons

input field with button

<div class="item-container">
  <div class="item-container-header">Input Field + Send Button</div>
  <div class="item-container-content">
    <label class="item">
      <div class="item-input-wrapper item-input-wrapper-button">
        <input type="text" class="item-input" name="input-2" placeholder="Input field">
      </div>
      <input type="button" class="item-button item-input-button" value="SEND">
    </label>
  </div>
</div>

Tab Buttons

tab buttons

<div class="item-container">
  <div class="item-container-header">Tab Buttons</div>
  <div class="item-container-content">
    <div class="item tab-buttons">
      <a name="tab-1" class="tab-button active">Both</a>
      <a name="tab-1" class="tab-button">Celcius</a>
      <a name="tab-1" class="tab-button">Fahrenheit</a>
    </div>
  </div>
</div>

Sliders

slider

<div class="item-container">
  <div class="item-container-header">Slider</div>
  <div class="item-container-content">
    <label class="item">
      <input type="range" class="item-slider" name="slider-1" value="50">
      <div class="item-input-wrapper item-slider-text">
        <input type="text" class="item-input" name="slider-1" value="50">
      </div>
    </label>
  </div>
</div>

Draggable Lists

draggable list

<div class="item-container">
  <div class="item-container-header">draggable Items</div>
  <div class="item-container-content">
    <div class="item-draggable-list">
      <label class="item">Example Item 1</label>
      <label class="item">Example Item 2</label>
      <label class="item">Example Item 3</label>
    </ul>
  </div>
</div>

Lists

list

<div class="item-container">
  <div class="item-container-header">Item List</div>
  <div class="item-container-content">
    <div class="item-dynamic-list">
      <label class="item">Example Item A</label>
      <label class="item">Example Item B</label>
    </div>
  </div>
</div>

Buttons

button

<div class="item-container">
  <div class="button-container">
    <input type="button" class="item-button" value="SEND">
  </div>
</div>

More Repositories

1

pebble-sdk-examples

Examples for Pebble SDK
Objective-C
373
star
2

rockyjs

JS Powered Pebbles in Your Browser
JavaScript
250
star
3

cloudpebble

CloudPebble source. Here be dragons.
Python
211
star
4

pebble-3d

3D drawings of Pebble
166
star
5

clay

Pebble Config Framework
JavaScript
121
star
6

pebble-android-sdk

Android PebbleKit SDK to talk to the Pebble via Bluetooth
Java
119
star
7

pebble-ios-sdk

iOS PebbleKit SDK to talk to the Pebble via Bluetooth
HTML
112
star
8

qemu

Pebble fork of qemu
C
98
star
9

libpebble2

The library portion of the successor to libpebble
Python
64
star
10

pebble-api-node

Pebble API client for Node.js
JavaScript
53
star
11

joi-objectid

A MongoDB ObjectId validator for Joi
JavaScript
43
star
12

event-loop-lag

Measure Node.js event loop lag.
JavaScript
42
star
13

yieldb

Simple, expressive and yieldable MongoDB
JavaScript
40
star
14

ArduinoPebbleSerial

Arduino library for communicating with Pebble Time via the Smartstrap port
C++
32
star
15

community-resources

Submit your Pebble tools and examples!
29
star
16

pypkjs

Python implementation of PebbleKit JS
Python
29
star
17

pebble-tool

The pebble tool that goes with libpebble2
Python
23
star
18

cloudpebble-composed

Local development setup for CloudPebble
Shell
21
star
19

homebrew-pebble-sdk

Pebble Homebrew Tap
Ruby
16
star
20

pybluetooth

Python Bluetooth Library
Python
13
star
21

goodthink

The happiness measuring app
C
12
star
22

joi-router-swagger-docs

Swagger doc generator for koa-joi-router
JavaScript
10
star
23

keen-cache

A node js caching proxy for keen.io
JavaScript
9
star
24

github-digest

Report on github pull request activity
Go
8
star
25

lambda-aws-pagerduty-alerts

Make AWS alerts to PagerDuty behave nicer by flowing them through a lambda function
Python
7
star
26

flotilla

Lightweight alternative to fleet, optimized for AWS.
Python
7
star
27

docker-cloudwatch-stats

Docker container that posts memory/disk stats from an EC2 instance to Cloudwatch
Shell
5
star
28

cloudpebble-qemu-controller

Controls qemus.
Python
5
star
29

pyv8

Pebble fork of PyV8
Python
5
star
30

airbrite-ruby

Ruby bindings for the Airbrite API.
Ruby
5
star
31

pebble-waf-tools

A collection of waf tools for use with the Pebble SDK
Python
5
star
32

hackmit-2013

Presentation and example project for #HackMIT 2013
C
4
star
33

docker-aws-cli

A simple docker that allows you to pass through aws-cli commands
4
star
34

cloudpebble-buildpack

Heroku buildpack for CloudPebble
Shell
3
star
35

has-own

A safer .hasOwnProperty() where property name comes first: `hasOwn(name, obj)`
JavaScript
3
star
36

qemu-tintin-images

3
star
37

cloudpebble-nameserver

Very simple DNS server for pebble-sockets.com
Python
3
star
38

cloudpebble-ycmd-proxy

Handles communication with the autocompletion daemon(s) on behalf of CloudPebble clients.
Python
3
star
39

mongodb-tailor

Tail your mongodb collections with style
JavaScript
3
star
40

toilet-time

Arduino/Web/Pebble Application for determining the optimal time to use the toilet
Swift
3
star
41

qemu-binaries

QEMU Binaries for the Pebble emulator
3
star
42

qdog

Module used for adding and reading from SQS and eventually Redis
JavaScript
2
star
43

pyv8-prebuilt

Prebuilt versions of pyv8
Python
2
star
44

openocd

Openocd fork with support for our modified version of freertos
C
2
star
45

lambda-queue-worker

An infinitely scalable and cheap queue worker template for NodeJS functions.
JavaScript
2
star
46

spacel-provision

Space Elevator provisioner
Python
2
star
47

fastly-log

Fluentd Dockerfile to forward fastly events to TreasureData
2
star
48

eslint-config-pebble

eslint shareable config for pebble
JavaScript
2
star
49

jsconf2015-schedule

Example Application that populates a Pebble Timeline Topic with a schedule of events.
JavaScript
1
star
50

rocky-repl

Super hacky REPL, entirely implementing using only public API
JavaScript
1
star
51

spacel-agent

Space Elevator Agent
Python
1
star
52

cloudpebble-ws-proxy-standalone

Cloudpebble developer connection websocket proxy
JavaScript
1
star
53

joi-authorization-header

A request authorization header Joi validator
JavaScript
1
star
54

restrict-resource-webpack-plugin

Webpack plugin that returns an error message when a resource/module matches a given regular expression
JavaScript
1
star