public
Last active

A sample Proto project: https://github.com/droptype/proto

  • Download Gist
markup.jade
Jade
1 2 3 4 5 6 7 8 9 10 11 12
 
#sidebar
 
.sidebar-item.open
.title Item 1
.info
label Some controls
input(type='checkbox')
label More controls
input(type='checkbox')
label Other controls
input(type='checkbox')
notes.md
Markdown

Rollup test

Note: this is a sample Proto project. For more information, see this walkthrough.

I think the rollup works best at 0.25s. Any slower and it feels sluggish, and faster is too abrupt.

script.coffee
CoffeeScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14
 
$('.sidebar-item .title').on 'click', ->
$(this).parent().toggleClass('open')
 
$('label').each ->
$label = $(this)
console.log this
$label.on 'click', (e) ->
e.stopImmediatePropagation()
e.stopPropagation()
if $label.find('input').is(':checked')
$label.addClass('active')
else
$label.removeClass('active')
settings.json
JSON
1 2 3 4 5 6 7 8 9 10 11 12 13
{
"name": "sampleproto",
"proto_version": "0.0.4",
"script_libraries": [
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.1/underscore-min.js",
"https://cdnjs.cloudflare.com/ajax/libs/underscore.string/2.3.0/underscore.string.min.js",
"https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js",
"https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"
],
"style_libraries": [
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css"
]
}
style.styl
Stylus
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
transition(prop, dur)
-webkit-transition-property: prop
-webkit-transition-duration: dur
-moz-transition-property: prop
-moz-transition-duration: dur
-ms-transition-property: prop
-ms-transition-duration: dur
-o-transition-property: prop
-o-transition-duration: dur
transition-property: prop
transition-duration: dur
 
 
#sidebar
border: 1px solid #ccc
width: 300px
 
sidebar_item_height = 50px
sidebar_item_padding = 10px
.sidebar-item
height: sidebar_item_height
overflow: hidden
font-family: Helvetica
font-weight: 700
transition(height, 0.25s)
&.open
height: 200px
.title
font-size: 25px
height: sidebar_item_height + 1
padding: sidebar_item_padding
box-sizing: border-box
cursor: pointer
border-bottom: 1px solid #ccc
background-color: #eee
 
.info
 
label, input
cursor: pointer
 
label
display: block
padding: sidebar_item_padding
&:hover, &.active:hover
background-color: #eee
&.active
background-color: #dfd
&:active
background-color: #ddd
input
float: right

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.