Browse Source
Former-commit-id: f26044b2e215906e750c928c7e1cff2dc4bd6316 Former-commit-id: fa18ae6e051c9065b3d8d9b29b8ed8ac2f309415beta
Jack Lukic
12 years ago
22 changed files with 423 additions and 261 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1 +1 @@ |
|||||
a3848560f020b966457015eea91b3ca65d99f15b |
46a0a85305b2459fa4eb0b1d41e464e6c30a49eb |
||||
@ -0,0 +1,110 @@ |
|||||
|
--- |
||||
|
layout : 'default' |
||||
|
css : 'icon' |
||||
|
title : 'Icons' |
||||
|
type : 'Quirky Element' |
||||
|
--- |
||||
|
|
||||
|
<div class="segment"> |
||||
|
<div class="container"> |
||||
|
<h1 class="ui dividing header">Icon</h1> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="main container"> |
||||
|
|
||||
|
<div class="icon example"> |
||||
|
<h4 class="ui header">Icons</h4> |
||||
|
<div class="ui eight column grid"> |
||||
|
<div class="column"><i class="sketchy icon add"></i> Add</div> |
||||
|
<div class="column"><i class="sketchy icon alert"></i> Alert</div> |
||||
|
<div class="column"><i class="sketchy icon all"></i> All</div> |
||||
|
<div class="column"><i class="sketchy icon arrow eight"></i> Arrow Eight</div> |
||||
|
<div class="column"><i class="sketchy icon arrow eleven"></i> Arrow Eleven</div> |
||||
|
<div class="column"><i class="sketchy icon arrow fifteen"></i> Arrow Fifteen</div> |
||||
|
<div class="column"><i class="sketchy icon arrow five"></i> Arrow Five</div> |
||||
|
<div class="column"><i class="sketchy icon arrow four"></i> Arrow Four</div> |
||||
|
<div class="column"><i class="sketchy icon arrow fourteen"></i> Arrow Fourteen</div> |
||||
|
<div class="column"><i class="sketchy icon arrow left"></i> Arrow Left</div> |
||||
|
<div class="column"><i class="sketchy icon arrow nine"></i> Arrow Nine</div> |
||||
|
<div class="column"><i class="sketchy icon arrow one"></i> Arrow One</div> |
||||
|
<div class="column"><i class="sketchy icon arrow right"></i> Arrow Right</div> |
||||
|
<div class="column"><i class="sketchy icon arrow seven"></i> Arrow Seven</div> |
||||
|
<div class="column"><i class="sketchy icon arrow six"></i> Arrow Six</div> |
||||
|
<div class="column"><i class="sketchy icon arrow sixteen"></i> Arrow Sixteen</div> |
||||
|
<div class="column"><i class="sketchy icon arrow ten"></i> Arrow Ten</div> |
||||
|
<div class="column"><i class="sketchy icon arrow thirteen"></i> Arrow Thirteen</div> |
||||
|
<div class="column"><i class="sketchy icon arrow three"></i> Arrow Three</div> |
||||
|
<div class="column"><i class="sketchy icon arrow twelve"></i> Arrow Twelve</div> |
||||
|
<div class="column"><i class="sketchy icon arrow two"></i> Arrow Two</div> |
||||
|
<div class="column"><i class="sketchy icon browser"></i> Browser</div> |
||||
|
<div class="column"><i class="sketchy icon bullet one"></i> Bullet One</div> |
||||
|
<div class="column"><i class="sketchy icon bullet three"></i> Bullet Three</div> |
||||
|
<div class="column"><i class="sketchy icon bullet two"></i> Bullet Two</div> |
||||
|
<div class="column"><i class="sketchy icon camera"></i> Camera</div> |
||||
|
<div class="column"><i class="sketchy icon categories"></i> Categories</div> |
||||
|
<div class="column"><i class="sketchy icon category electronics"></i> Category Electronics</div> |
||||
|
<div class="column"><i class="sketchy icon category health"></i> Category Health</div> |
||||
|
<div class="column"><i class="sketchy icon category home"></i> Category Home</div> |
||||
|
<div class="column"><i class="sketchy icon category kitchen"></i> Category Kitchen</div> |
||||
|
<div class="column"><i class="sketchy icon category parenting"></i> Category Parenting</div> |
||||
|
<div class="column"><i class="sketchy icon category pets"></i> Category Pets</div> |
||||
|
<div class="column"><i class="sketchy icon category style"></i> Category Style</div> |
||||
|
<div class="column"><i class="sketchy icon category toys"></i> Category Toys</div> |
||||
|
<div class="column"><i class="sketchy icon category travel"></i> Category Travel</div> |
||||
|
<div class="column"><i class="sketchy icon checkmark"></i> Checkmark</div> |
||||
|
<div class="column"><i class="sketchy icon checkmark circle"></i> Checkmark Circle</div> |
||||
|
<div class="column"><i class="sketchy icon clock"></i> Clock</div> |
||||
|
<div class="column"><i class="sketchy icon comment"></i> Comment</div> |
||||
|
<div class="column"><i class="sketchy icon compare"></i> Compare</div> |
||||
|
<div class="column"><i class="sketchy icon dont"></i> Dont</div> |
||||
|
<div class="column"><i class="sketchy icon eval"></i> Eval</div> |
||||
|
<div class="column"><i class="sketchy icon expert"></i> Expert</div> |
||||
|
<div class="column"><i class="sketchy icon home"></i> Home</div> |
||||
|
<div class="column"><i class="sketchy icon idea"></i> Idea</div> |
||||
|
<div class="column"><i class="sketchy icon improve"></i> Improve</div> |
||||
|
<div class="column"><i class="sketchy icon influence"></i> Influence</div> |
||||
|
<div class="column"><i class="sketchy icon information"></i> Information</div> |
||||
|
<div class="column"><i class="sketchy icon invent"></i> Invent</div> |
||||
|
<div class="column"><i class="sketchy icon ip communication"></i> Ip Communication</div> |
||||
|
<div class="column"><i class="sketchy icon ip electronics"></i> Ip Electronics</div> |
||||
|
<div class="column"><i class="sketchy icon ip engine"></i> Ip Engine</div> |
||||
|
<div class="column"><i class="sketchy icon ip lighting"></i> Ip Lighting</div> |
||||
|
<div class="column"><i class="sketchy icon ip materials"></i> Ip Materials</div> |
||||
|
<div class="column"><i class="sketchy icon ip power"></i> Ip Power</div> |
||||
|
<div class="column"><i class="sketchy icon ip printing"></i> Ip Printing</div> |
||||
|
<div class="column"><i class="sketchy icon ip processes"></i> Ip Processes</div> |
||||
|
<div class="column"><i class="sketchy icon ip processing"></i> Ip Processing</div> |
||||
|
<div class="column"><i class="sketchy icon ip vehicles"></i> Ip Vehicles</div> |
||||
|
<div class="column"><i class="sketchy icon launch"></i> Launch</div> |
||||
|
<div class="column"><i class="sketchy icon location"></i> Location</div> |
||||
|
<div class="column"><i class="sketchy icon magnify"></i> Magnify</div> |
||||
|
<div class="column"><i class="sketchy icon name"></i> Name</div> |
||||
|
<div class="column"><i class="sketchy icon newest"></i> Newest</div> |
||||
|
<div class="column"><i class="sketchy icon pencil"></i> Pencil</div> |
||||
|
<div class="column"><i class="sketchy icon phase design"></i> Phase Design</div> |
||||
|
<div class="column"><i class="sketchy icon phase research"></i> Phase Research</div> |
||||
|
<div class="column"><i class="sketchy icon phase tagline"></i> Phase Tagline</div> |
||||
|
<div class="column"><i class="sketchy icon photos"></i> Photos</div> |
||||
|
<div class="column"><i class="sketchy icon piechart"></i> Piechart</div> |
||||
|
<div class="column"><i class="sketchy icon pinterest"></i> Pinterest</div> |
||||
|
<div class="column"><i class="sketchy icon play"></i> Play</div> |
||||
|
<div class="column"><i class="sketchy icon portfolio"></i> Portfolio</div> |
||||
|
<div class="column"><i class="sketchy icon price"></i> Price</div> |
||||
|
<div class="column"><i class="sketchy icon problem"></i> Problem</div> |
||||
|
<div class="column"><i class="sketchy icon profile"></i> Profile</div> |
||||
|
<div class="column"><i class="sketchy icon question"></i> Question</div> |
||||
|
<div class="column"><i class="sketchy icon question circle"></i> Question Circle</div> |
||||
|
<div class="column"><i class="sketchy icon rain cloud"></i> Rain Cloud</div> |
||||
|
<div class="column"><i class="sketchy icon share"></i> Share</div> |
||||
|
<div class="column"><i class="sketchy icon shop"></i> Shop</div> |
||||
|
<div class="column"><i class="sketchy icon timeline"></i> Timeline</div> |
||||
|
<div class="column"><i class="sketchy icon trash"></i> Trash</div> |
||||
|
<div class="column"><i class="sketchy icon twitter"></i> Twitter</div> |
||||
|
<div class="column"><i class="sketchy icon vote down"></i> Vote Down</div> |
||||
|
<div class="column"><i class="sketchy icon vote up"></i> Vote Up</div> |
||||
|
<div class="column"><i class="sketchy icon x"></i> X</div> |
||||
|
<div class="column"><i class="sketchy icon x circle"></i> X Circle</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
@ -1,56 +0,0 @@ |
|||||
--- |
|
||||
layout : 'default' |
|
||||
css : 'pagination' |
|
||||
|
|
||||
title : 'Pagination' |
|
||||
type : 'Quirky Element' |
|
||||
--- |
|
||||
|
|
||||
|
|
||||
<link rel="stylesheet" type="text/css" class="ui" href="/overrides/pagination.css"> |
|
||||
|
|
||||
<div class="segment"> |
|
||||
<div class="container"> |
|
||||
<h1 class="ui dividing header">Pagination</h1> |
|
||||
<p>An item view is a generic list of site content, and can be useful for displaying a wide variety of named image content.</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="main container"> |
|
||||
|
|
||||
<div class="peek"> |
|
||||
<div class="ui vertical pointing secondary menu"> |
|
||||
<a class="active item">Pagination</a> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<div class="example"> |
|
||||
<h4 class="ui header">Pagination</h4> |
|
||||
<p>A pagination menu is specially formatted to present links to pages of content</p> |
|
||||
<div class="ui pagination menu"> |
|
||||
<a class="icon item"> |
|
||||
<i class="icon left sketchy arrow"></i> |
|
||||
</a> |
|
||||
<a class="active item"> |
|
||||
1 |
|
||||
</a> |
|
||||
<div class="disabled item"> |
|
||||
... |
|
||||
</div> |
|
||||
<a class="item"> |
|
||||
10 |
|
||||
</a> |
|
||||
<a class="item"> |
|
||||
11 |
|
||||
</a> |
|
||||
<a class="item"> |
|
||||
12 |
|
||||
</a> |
|
||||
<a class="icon item"> |
|
||||
<i class="icon right sketchy arrow"></i> |
|
||||
</a> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
|
|
||||
|
|
||||
</div> |
|
||||
@ -0,0 +1,140 @@ |
|||||
|
--- |
||||
|
layout : 'default' |
||||
|
css : 'variations' |
||||
|
|
||||
|
title : 'UI Variations' |
||||
|
type : 'Quirky Element' |
||||
|
--- |
||||
|
|
||||
|
|
||||
|
<link rel="stylesheet" type="text/css" class="ui" href="/overrides/button.css"> |
||||
|
<link rel="stylesheet" type="text/css" class="ui" href="/overrides/menu.css"> |
||||
|
<link rel="stylesheet" type="text/css" class="ui" href="/overrides/segment.css"> |
||||
|
<link rel="stylesheet" type="text/css" class="ui" href="/overrides/steps.css"> |
||||
|
|
||||
|
<div class="segment"> |
||||
|
<div class="container"> |
||||
|
<h1 class="ui dividing header">UI Variations</h1> |
||||
|
<p>These are overrides of elements used for Quirky.com</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="main container"> |
||||
|
|
||||
|
<div class="peek"> |
||||
|
<div class="ui vertical pointing secondary menu"> |
||||
|
<a class="active item">Pagination</a> |
||||
|
<a class="item">Steps</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<h3 class="ui dividing header">Pagination</h3> |
||||
|
<div class="example"> |
||||
|
<div class="ui pagination menu"> |
||||
|
<a class="icon item"> |
||||
|
<i class="icon left sketchy arrow"></i> |
||||
|
</a> |
||||
|
<a class="active item"> |
||||
|
1 |
||||
|
</a> |
||||
|
<div class="disabled item"> |
||||
|
... |
||||
|
</div> |
||||
|
<a class="item"> |
||||
|
10 |
||||
|
</a> |
||||
|
<a class="item"> |
||||
|
11 |
||||
|
</a> |
||||
|
<a class="item"> |
||||
|
12 |
||||
|
</a> |
||||
|
<a class="icon item"> |
||||
|
<i class="icon right sketchy arrow"></i> |
||||
|
</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<h3 class="ui dividing header">Menu</h3> |
||||
|
|
||||
|
<div class="example"> |
||||
|
<h4 class="ui header">Pointing</h4> |
||||
|
<div class="ui pointing menu"> |
||||
|
<a class="active item"> |
||||
|
<i class="home icon"></i> Home |
||||
|
</a> |
||||
|
<a class="item"> |
||||
|
<i class="mail icon"></i> Messages |
||||
|
</a> |
||||
|
<a class="item"> |
||||
|
<i class="community icon"></i> Browse |
||||
|
</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<h3 class="ui dividing header">Segment</h3> |
||||
|
<div class="example"> |
||||
|
<h4 class="ui header">Segment</h4> |
||||
|
<div class="ui segment"> |
||||
|
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="example"> |
||||
|
<h4 class="ui header">Piled Segment</h4> |
||||
|
<div class="ui piled segment"> |
||||
|
<h2>A header</h2> |
||||
|
<p>Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.</p> |
||||
|
|
||||
|
<p>Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.</p> |
||||
|
|
||||
|
<p>Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu per, quas minimum postulant per id.</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<h3 class="ui dividing header">Steps</h3> |
||||
|
<div class="example"> |
||||
|
<div class="ui steps"> |
||||
|
<div class="ui active step"> |
||||
|
Shipping |
||||
|
</div> |
||||
|
<div class="ui disabled step"> |
||||
|
Billing |
||||
|
</div> |
||||
|
<div class="ui disabled step"> |
||||
|
Confirm Order |
||||
|
</div> |
||||
|
<div class="ui disabled step"> |
||||
|
Complete |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="another example"> |
||||
|
<p>A vertical text menu</p> |
||||
|
<div class="ui vertical text menu"> |
||||
|
<div class="header item">Sort By</div> |
||||
|
<a class="active item"> |
||||
|
<i class="sketchy newest icon"></i>Newest |
||||
|
</a> |
||||
|
<a class="item"> |
||||
|
<i class="sketchy clock icon"></i>Ending Soon |
||||
|
</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
<div class="example"> |
||||
|
<h4 class="ui header">Text</h4> |
||||
|
<div class="ui text menu"> |
||||
|
<a class="active item"> |
||||
|
<i class="home icon"></i> Home |
||||
|
</a> |
||||
|
<a class="item"> |
||||
|
<i class="mail icon"></i> Messages |
||||
|
</a> |
||||
|
<a class="item"> |
||||
|
<i class="community icon"></i> Browse |
||||
|
</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
</div> |
||||
@ -1 +1 @@ |
|||||
a93cfa01200f17d8313cf20e9bf7df3c08e68ba1 |
a19cd552f0a37c770e0a35ca95fa2dccaf83c1d5 |
||||
@ -1 +1 @@ |
|||||
592819fdbfe8770df7b298d901247fa8a235ed7c |
667f96f411bb6c2aa1f3503527341acef7597a7a |
||||
@ -1 +1 @@ |
|||||
18caccb4270789a21705a7ed8e95dbe5919380e8 |
237266b0b8a6cb44a7c75a11f819a7ddf7e19be2 |
||||
Binary file not shown.
@ -0,0 +1,8 @@ |
|||||
|
.ui.text.menu .header { |
||||
|
font-size: 1.5em; |
||||
|
color: #5D6266; |
||||
|
} |
||||
|
|
||||
|
.ui.text.menu .item { |
||||
|
color: #5D6266; |
||||
|
} |
||||
@ -0,0 +1,14 @@ |
|||||
|
.ui.segment { |
||||
|
-webkit-box-shadow: |
||||
|
0px 0px 0px 1px rgba(0, 0, 0, 0.1), |
||||
|
0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset |
||||
|
; |
||||
|
-moz-box-shadow: |
||||
|
0px 0px 0px 1px rgba(0, 0, 0, 0.1), |
||||
|
0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset |
||||
|
; |
||||
|
box-shadow: |
||||
|
0px 0px 0px 1px rgba(0, 0, 0, 0.1), |
||||
|
0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset |
||||
|
; |
||||
|
} |
||||
Loading…
Reference in new issue