THE CSS
of the
INTERNET
OF THINGS
LUIS DANIEL RODRIGUEZ 7/2014
Anatomy of Web
Projects
photo credit http://blog.kjempekjekt.com/2012/12/23/ferris-gjr-event-sourcing-i-ui-luke-23-2012/
Physical Object
+
Controller, Sensor and Actuators
+
Internet
=
Internet of Things
Anatomy of IoT
Projects
photo credit Ad...
Internet-enabling
expected product feature
“Ecosystem”
photo credit http://www.techpolicydaily.com/wp-content/uploads/2013/11/IoT-shutterstock-e1384998049279.jpg
Small UIs
data sent from microcontrollers
Embedded or
Remote HTML/JS
control physical world with web based UI!
Embedded or
Remote HTML/JS
control physical world with web based UI!
Embedded or
Remote HTML/JS
control physical world with web based UI!
Embedded or
Remote HTML/JS
control physical world with web based UI!
void indexCmd(HTTPServer &server, HTTPServer::MethodType type, char *, bool) {
server.httpSuccess();
P(indexHTML) =
"<!DOC...
client.println("<link rel="stylesheet" type="text/css"
href="http://arduino-autohome.googlecode.
com/svn/trunk/autohome.cs...
<style type="text/css">
button {
display: block;
margin: 5px 5px 5px 5px;
width: 160px;
height: 45px;
font-size: 24pt;
fon...
Real Needs
CSS rules to change colors, size (box-model)
and layout
#gpio7. LOW {
background-color: White;
}
#gpio7. HIGH {...
Embedded or Remote
1. Files can be served off of an SD
card - Not terribly fast, but so
far seems to work.
2. Local networ...
Embedded CSS Problems
1. Try to embed CSS into microcontroller and
does not compile
2. Use image links as buttons or Style...
Handcrafted
V.S.
Online Generated
Interactive TVs
“Websites are never going to look that great on a TV
unless they are designed for their resolutions...”
CN...
e.g. Google TV Design Principles
source: https://developers.google.com/tv/web/docs/design_for_tv
Layout
1. achieve “intended layout”
using float, calc() or flex box
2. resolutions (720p or 1080i/p)
div {
border: solid 1...
Scrollbars
1. overflow: hidden on the body
2. use JS to move content into
view
<script type="text/javascript">
function Mo...
CSS Zoom property
1. impacts quality and
performance
2. design expecting white
space around pages
img {
zoom: 1;
*/ normal...
div {
border: solid 1px;
float: left;
margin: 1em;
padding: 0 1em;
width: calc(100%/10 - 9em);
}
..
div:nth-child(8), div:...
Browser Specific
1. Check HTML5 Rocks
2. Browser specific support
3. *Others: OperaTV Browser,
Kylo
div {
-webkit-transfor...
HTML5
Elements
<button> & <canvas>
<button>
“use a button element. They can be beautifully styled,
have in-built keyboard support and various states, and
the...
Basic <button>
http://codepen.io/uxcodeine/pen/49df74d9e8b8e49ea4e18a95624e655f
button {
padding: 10px 20px;
background: #...
Basic <button>
http://codepen.io/uxcodeine/pen/49df74d9e8b8e49ea4e18a95624e655f
button {
padding: 10px 20px;
background: #...
Basic <button>
http://codepen.io/uxcodeine/pen/49df74d9e8b8e49ea4e18a95624e655f
button {
padding: 10px 20px;
background: #...
Basic <button>
http://codepen.io/uxcodeine/pen/49df74d9e8b8e49ea4e18a95624e655f
button {
padding: 10px 20px;
background: #...
Basic <button>
http://codepen.io/uxcodeine/pen/49df74d9e8b8e49ea4e18a95624e655f
button {
padding: 10px 20px;
background: #...
Basic <button>
http://codepen.io/uxcodeine/pen/49df74d9e8b8e49ea4e18a95624e655f
button {
padding: 10px 20px;
background: #...
button {
display: inline-block;
vertical-align: top;
height: 55px;
line-height: 1.87em;
margin: 5px 0;
padding: 12px 18px;...
<button> with icons
http://codepen.io/uxcodeine/pen/655873a063437bc3160296e30b63a84f
button {
display: inline-block;
verti...
<button> with icons
http://codepen.io/uxcodeine/pen/655873a063437bc3160296e30b63a84f
button {
display: inline-block;
verti...
button {
display: inline-block;
vertical-align: top;
height: 55px;
line-height: 1.87em;
margin: 5px 0;
padding: 12px 18px;...
button {
display: inline-block;
vertical-align: top;
height: 55px;
line-height: 1.87em;
margin: 5px 0;
padding: 12px 18px;...
<button> group
http://codepen.io/uxcodeine/pen/0974f2c3c80965e2a03e7f12c0986266
button {
margin: 0 !important;
}
button:fi...
<button> group
http://codepen.io/uxcodeine/pen/0974f2c3c80965e2a03e7f12c0986266
button {
margin: 0 !important;
}
button:fi...
<button> group
http://codepen.io/uxcodeine/pen/0974f2c3c80965e2a03e7f12c0986266
button {
margin: 0 !important;
}
button:fi...
<button> group
http://codepen.io/uxcodeine/pen/0974f2c3c80965e2a03e7f12c0986266
button {
margin: 0 !important;
}
button:fi...
<button> group
http://codepen.io/uxcodeine/pen/0974f2c3c80965e2a03e7f12c0986266
button {
margin: 0 !important;
}
button:fi...
“doesn’t look like” <button>
http://codepen.io/uxcodeine/pen/3db6c2dddca7d3aba2f02b74c117ff20
button {
background-color: n...
“doesn’t look like” <button>
http://codepen.io/uxcodeine/pen/3db6c2dddca7d3aba2f02b74c117ff20
button {
background-color: n...
“doesn’t look like” <button>
http://codepen.io/uxcodeine/pen/3db6c2dddca7d3aba2f02b74c117ff20
button {
background-color: n...
“doesn’t look like” <button>
http://codepen.io/uxcodeine/pen/3db6c2dddca7d3aba2f02b74c117ff20
button > span {
display: inl...
“doesn’t look like” <button>
http://codepen.io/uxcodeine/pen/3db6c2dddca7d3aba2f02b74c117ff20
button > span {
display: inl...
“doesn’t look like” <button>
http://codepen.io/uxcodeine/pen/3db6c2dddca7d3aba2f02b74c117ff20
button > span {
display: inl...
“doesn’t look like” <button>
http://codepen.io/uxcodeine/pen/3db6c2dddca7d3aba2f02b74c117ff20
button > span {
display: inl...
<canvas>
“Because the canvas is an HTML element, you can use
CSS styles to modify its position, assign it a background
col...
<canvas> cont’d
http://codepen.io/uxcodeine/pen/1c56ce3b66893c1d766e9eb40940fde1
canvas {
display: block;
margin: 0 auto;
...
<canvas> cont’d
http://codepen.io/uxcodeine/pen/1c56ce3b66893c1d766e9eb40940fde1
canvas {
display: block;
margin: 0 auto;
...
<canvas> cont’d
http://codepen.io/uxcodeine/pen/1c56ce3b66893c1d766e9eb40940fde1
canvas {
display: block;
margin: 0 auto;
...
<canvas> cont’d
http://codepen.io/uxcodeine/pen/1c56ce3b66893c1d766e9eb40940fde1
canvas {
display: block;
margin: 0 auto;
...
Data Acquisition
Systems
Require
Data
Visualizations
Presenting Information, driving complex analysis
CSS Based
Data Visualizations
make it easier for users to grasp data
e.g. line graphs, gauges, cards & notifications
SVG
“SVG content styled with CSS [CSS2]:
CSS is a widely implemented declarative language for
assigning styling properties...
SVG cont’d
“The ‘class’ attribute assigns one or more class names
to an element. The element may be said to belong to
thes...
Line graphs
http://codepen.io/uxcodeine/pen/0b031026f6fb91301098eced10d32749
path {
stroke: white;
stroke-width: 1;
fill: ...
Line graphs
http://codepen.io/uxcodeine/pen/0b031026f6fb91301098eced10d32749
path {
stroke: white;
stroke-width: 1;
fill: ...
Line graphs
http://codepen.io/uxcodeine/pen/0b031026f6fb91301098eced10d32749
path {
stroke: white;
stroke-width: 1;
fill: ...
Line graphs
http://codepen.io/uxcodeine/pen/0b031026f6fb91301098eced10d32749
path {
stroke: white;
stroke-width: 1;
fill: ...
Gauges
http://codepen.io/uxcodeine/pen/ae0c6bd7334bce98e92d9c53351fa2b0
figure {
width: 20em;
}
div {
display:inline-block...
Gauges
http://codepen.io/uxcodeine/pen/ae0c6bd7334bce98e92d9c53351fa2b0
figure {
width: 20em;
}
div {
display:inline-block...
Gauges
http://codepen.io/uxcodeine/pen/ae0c6bd7334bce98e92d9c53351fa2b0
figure {
width: 20em;
}
div {
display:inline-block...
Gauges
http://codepen.io/uxcodeine/pen/ae0c6bd7334bce98e92d9c53351fa2b0
div:before {
position:absolute;
display:block;
con...
Gauges
http://codepen.io/uxcodeine/pen/ae0c6bd7334bce98e92d9c53351fa2b0
span {
position:absolute;
display:inline-block;
op...
Gauges
http://codepen.io/uxcodeine/pen/ae0c6bd7334bce98e92d9c53351fa2b0
<figure>
<div>
<span></span>
</div>
<figcaption>Me...
Cards & Notifications
http://codepen.io/uxcodeine/pen/8896cb36229f0f5512c539fd9153e3ae
<div class="notification">
<span cl...
Cards & Notifications
http://codepen.io/uxcodeine/pen/8896cb36229f0f5512c539fd9153e3ae
.notification {
display: block;
cle...
Cards & Notifications
http://codepen.io/uxcodeine/pen/8896cb36229f0f5512c539fd9153e3ae
.notification {
display: block;
cle...
Cards & Notifications
http://codepen.io/uxcodeine/pen/8896cb36229f0f5512c539fd9153e3ae
.message {
width: 144px;
float: lef...
Experimental
bleeding edge videos & projects
Arduino Light Animation
http://vimeo.com/79962595
based on CSS
animation properties
http://www.jamesmillerportfolio.co.uk/using-arduino-to-interact-with-websites-via-javascript/
“Change CSS with Arduino”
3D Printing from CSS 3D Transforms
#tridiv {
perspective: 800px;
position: absolute;
overflow: hidden;
width: 100%;
height...
Design Principles
Resources
V.S.
Maintenance
V.S.
Memory
Modularity
Easily swappable standardized
components form the different
user interfaces
http://codepen.io/uxcodeine/pen/f3d...
Efficiency
Support flow (DOM) with
lessened friction
http://codepen.io/uxcodeine/pen/KkEax
component02= #CCC
article
for d...
Responsiveness
Adaptable layouts, not pixel
perfect!
http://codepen.io/uxcodeine/pen/nyuDE
div:first-child {
width: 99.5%;...
Flexibility
Support design iterations with
less code
http://codepen.io/uxcodeine/pen/znLdc
students = [["Matthew", "Ash", ...
#IoT needs more CSS!
“… The expertise required to make an Internet ‘thing’ is
vast. However, this means that the playing f...
THE CSS
of the
INTERNET
OF THINGS
THANK YOU!
Get in touch:
twitter: @uxcodeline
email: luis@teknolog.io
Additional credits...
Upcoming SlideShare
Loading in...5
×

The CSS of the Internet of Things

7,966

Published on

Write the stylesheets of tomorrow today by preparing for a plethora of screens and devices.
Expand the influence of CSS in a smart world by focusing on writing stylesheets for interactive TVs and the HTML5 native elements canvas and buttons.
This session will demonstrate best practices of interactive television front-end development as well as device agnostic CSS Styling of HTML5 elements for JavaScript clients that run GNU/Linux machines.
Underlying all technical specifications the design principles of modularity, efficiency, responsiveness, and flexibility will be emphasized and their impact on writing CSS code that contribute to creating adaptable yet platform appropriate interconnected components.

Published in: Design, Devices & Hardware

The CSS of the Internet of Things

  1. 1. THE CSS of the INTERNET OF THINGS LUIS DANIEL RODRIGUEZ 7/2014
  2. 2. Anatomy of Web Projects photo credit http://blog.kjempekjekt.com/2012/12/23/ferris-gjr-event-sourcing-i-ui-luke-23-2012/
  3. 3. Physical Object + Controller, Sensor and Actuators + Internet = Internet of Things Anatomy of IoT Projects photo credit Adrian McEwen, Hakim Cassimally. Designing the Internet of Things. Chapter 7 Prototyping Online Components
  4. 4. Internet-enabling expected product feature
  5. 5. “Ecosystem” photo credit http://www.techpolicydaily.com/wp-content/uploads/2013/11/IoT-shutterstock-e1384998049279.jpg
  6. 6. Small UIs data sent from microcontrollers
  7. 7. Embedded or Remote HTML/JS control physical world with web based UI!
  8. 8. Embedded or Remote HTML/JS control physical world with web based UI!
  9. 9. Embedded or Remote HTML/JS control physical world with web based UI!
  10. 10. Embedded or Remote HTML/JS control physical world with web based UI!
  11. 11. void indexCmd(HTTPServer &server, HTTPServer::MethodType type, char *, bool) { server.httpSuccess(); P(indexHTML) = "<!DOCTYPE html>n" "<html>n" "<head>n" "<meta name="viewport" content="width=480px, user-scalable=no">n" "<title>ATV</title>n" "</head>n" "<body>n" "<div class="swipe-container container"></div>n" "<div class="buttons-container container"></div>n" "<script data-main="https://www.cs.helsinki.fi/u/ljlukkar/appletv/js/main.js" n" " src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.min.js" ></script>n" "</body>n" "</html>"; server.printP(indexHTML); } CSS Opportunities: Basic UIs Microcontrollers serve index pages with remotely loaded JS & CSS source: https://github.com/lasselukkari/aWOT Arduino sketch (.ino file): "<link rel="stylesheet" type="text/css" href=" https://netdna.bootstrapcdn.com/bootstrap/3.0.3 /css/bootstrap.min.css" />n" "<link rel="stylesheet" type="text/css" href="https://www.cs.helsinki. fi/u/ljlukkar/appletv/css/custom.css" />n"
  12. 12. client.println("<link rel="stylesheet" type="text/css" href="http://arduino-autohome.googlecode. com/svn/trunk/autohome.css" />"); CSS Opportunities: Basic UIs Microcontrollers serve index pages with remotely loaded JS & CSS source: http://internetofthings-pune.blogspot.in/2013/07/this-is-open-source-home-automation.html Arduino sketch (.ino file): a { text-decoration:none; width:150px; height:50px; border-color:black; border-top:1px solid; border-bottom:1px solid; border-right:1px solid; border-left:1px solid; border-radius:1px 10px 10px; -o-border-radius:10px 10px 10px; -webkit-border-radius:10px 10px 10px; font-family:"Trebuchet MS",Arial, Helvetica, sans-serif; -moz-border-radius:10px 10px 10px; background-color:DimGray ; padding:20px; text-align:center; } a:link {color:black;} /* unvisited link */ a:visited {color:white;} /* visited link */ a:hover {color:white;} /* mouse over link */ a:active {color:white;} /* selected link */ autohome.css:
  13. 13. <style type="text/css"> button { display: block; margin: 5px 5px 5px 5px; width: 160px; height: 45px; font-size: 24pt; font-weight: bold; color: black; } input[type="range"] { display: block; width: 160px; height: 45px; } #gpio7.LOW { background-color: White; } #gpio7.HIGH { background-color: Red; } </style> CSS Opportunities: Basic UIs Embedded JS & CSS code source: https://code.google.com/p/webiopi/wiki/JAVASCRIPT Raspberry Pi (HTML file / Python server )
  14. 14. Real Needs CSS rules to change colors, size (box-model) and layout #gpio7. LOW { background-color: White; } #gpio7. HIGH { background-color: Red; } sources: https://code.google.com/p/webiopi/wiki/JAVASCRIPT | http://www.cs.helsinki.fi/u/ljlukkar/pincontrol/ .switch { margin: 50px; position: relative; width: 80px; height: 100px; float:left; } ... .switch input:checked ~ label { background: #d2cbc3; box-shadow: inset 0 1px 0 white, 0 0 0 1px #999, 0 0 5px 1px rgba(0,0,0,0.2), inset 0 -10px 0 #aaa, 0 2px 0 rgba(255,255,255,0.1), inset 0 45px 3px #e0e0E0, 0 8px 6px rgba(0,0,0,0.18); }
  15. 15. Embedded or Remote 1. Files can be served off of an SD card - Not terribly fast, but so far seems to work. 2. Local network can store your JS and CSS files - point to those as external resources. 3. Local web server -client request data direct from microcontroller 4. Microcontroller push data to the server database. photo credit: http://internetofthings-pune.blogspot.in/2013/07/this-is-open-source-home-automation.html
  16. 16. Embedded CSS Problems 1. Try to embed CSS into microcontroller and does not compile 2. Use image links as buttons or Styles were generated at www.cssbuttongenerator.com 3. Buggy JS to change CSS properties according to the status of microcontroller 4. client.println("<style type="text/css">"); 5. “The stylesheet is optional…” 6. Usual drab grey buttons in your web browser but the application will still work.
  17. 17. Handcrafted V.S. Online Generated
  18. 18. Interactive TVs “Websites are never going to look that great on a TV unless they are designed for their resolutions...” CNET TV Reviewer “a Linux device configured with a Webkit-based browser to run web pages and applications” https://securityledger.com/2013/08/samsung-smart-tv-like-a-web-app-riddled-with- vulnerabilities/
  19. 19. e.g. Google TV Design Principles source: https://developers.google.com/tv/web/docs/design_for_tv
  20. 20. Layout 1. achieve “intended layout” using float, calc() or flex box 2. resolutions (720p or 1080i/p) div { border: solid 1px; float: left; margin: 1em; padding: 0 1em; width: calc(100%/7 - 6em); }
  21. 21. Scrollbars 1. overflow: hidden on the body 2. use JS to move content into view <script type="text/javascript"> function MoveIntoView (alignToTop) { var element = document.getElementById ("elementID"); element. scrollIntoView (alignToTop); } </script> html, body { height: 100%; overflow: hidden; }
  22. 22. CSS Zoom property 1. impacts quality and performance 2. design expecting white space around pages img { zoom: 1; */ normal */ } img:nth-child(2) { zoom: 200%; */ percentage or number e.g. 2 = 200% /* }
  23. 23. div { border: solid 1px; float: left; margin: 1em; padding: 0 1em; width: calc(100%/10 - 9em); } .. div:nth-child(8), div:nth-child(9), div: nth-child(10) { display: none; } Selections above the fold 1. reduce categories 2. hide DIV elements with “display: none”
  24. 24. Browser Specific 1. Check HTML5 Rocks 2. Browser specific support 3. *Others: OperaTV Browser, Kylo div { -webkit-transform: scale(1.5); } div { -webkit-transform: scale(2.0); }
  25. 25. HTML5 Elements <button> & <canvas>
  26. 26. <button> “use a button element. They can be beautifully styled, have in-built keyboard support and various states, and they can even be disabled using an attribute. By using attribute selectors in your CSS you can style them.” Christian Heilmann. Smashing Book #4 — New Perspectives on Web Design. Chapter 3 The Vanilla Web Diet
  27. 27. Basic <button> http://codepen.io/uxcodeine/pen/49df74d9e8b8e49ea4e18a95624e655f button { padding: 10px 20px; background: #111; -moz-border-radius: 21px; -webkit-border-radius: 21px; border-radius: 21px; border: 1px solid #666; outline: none; font-size: 14px; color: #eee; text-transform: uppercase; } <button type="button" name="" value="">On</button>
  28. 28. Basic <button> http://codepen.io/uxcodeine/pen/49df74d9e8b8e49ea4e18a95624e655f button { padding: 10px 20px; background: #111; -moz-border-radius: 21px; -webkit-border-radius: 21px; border-radius: 21px; border: 1px solid #666; outline: none; font-size: 14px; color: #eee; text-transform: uppercase; } <button type="button" name="" value="">On</button>
  29. 29. Basic <button> http://codepen.io/uxcodeine/pen/49df74d9e8b8e49ea4e18a95624e655f button { padding: 10px 20px; background: #111; -moz-border-radius: 21px; -webkit-border-radius: 21px; border-radius: 21px; border: 1px solid #666; outline: none; font-size: 14px; color: #eee; text-transform: uppercase; } <button type="button" name="" value="">On</button>
  30. 30. Basic <button> http://codepen.io/uxcodeine/pen/49df74d9e8b8e49ea4e18a95624e655f button { padding: 10px 20px; background: #111; -moz-border-radius: 21px; -webkit-border-radius: 21px; border-radius: 21px; border: 1px solid #666; outline: none; font-size: 14px; color: #eee; text-transform: uppercase; } <button type="button" name="" value="">On</button>
  31. 31. Basic <button> http://codepen.io/uxcodeine/pen/49df74d9e8b8e49ea4e18a95624e655f button { padding: 10px 20px; background: #111; -moz-border-radius: 21px; -webkit-border-radius: 21px; border-radius: 21px; border: 1px solid #666; outline: none; font-size: 14px; color: #eee; text-transform: uppercase; } <button type="button" name="" value="">On</button>
  32. 32. Basic <button> http://codepen.io/uxcodeine/pen/49df74d9e8b8e49ea4e18a95624e655f button { padding: 10px 20px; background: #111; -moz-border-radius: 21px; -webkit-border-radius: 21px; border-radius: 21px; border: 1px solid #666; outline: none; font-size: 14px; color: #eee; text-transform: uppercase; } <button type="button" name="" value="">On</button>
  33. 33. button { display: inline-block; vertical-align: top; height: 55px; line-height: 1.87em; margin: 5px 0; padding: 12px 18px; position: relative; } <button> with icons http://codepen.io/uxcodeine/pen/655873a063437bc3160296e30b63a84f <button> Button Text</button>
  34. 34. <button> with icons http://codepen.io/uxcodeine/pen/655873a063437bc3160296e30b63a84f button { display: inline-block; vertical-align: top; height: 55px; line-height: 1.87em; margin: 5px 0; padding: 12px 18px; position: relative; } button > span { display: inline-block; position: relative; width: 55px; height: 55px; background: url('smart-close.png') no-repeat center center; top: -13px } <button> <span></span> Button Text</button>
  35. 35. <button> with icons http://codepen.io/uxcodeine/pen/655873a063437bc3160296e30b63a84f button { display: inline-block; vertical-align: top; height: 55px; line-height: 1.87em; margin: 5px 0; padding: 12px 18px; position: relative; } button > span { position: relative; display: inline-block; width: 55px; height: 55px; background: url('smart-close.png') no-repeat center center; top: -13px } <button> <span></span> Button Text</button>
  36. 36. button { display: inline-block; vertical-align: top; height: 55px; line-height: 1.87em; margin: 5px 0; padding: 12px 18px; position: relative; } button > span { position: relative; display: inline-block; width: 55px; height: 55px; background: url('smart-close.png') no-repeat center center; top: -13px } <button> with icons http://codepen.io/uxcodeine/pen/655873a063437bc3160296e30b63a84f <button> <span></span> Button Text</button>
  37. 37. button { display: inline-block; vertical-align: top; height: 55px; line-height: 1.87em; margin: 5px 0; padding: 12px 18px; position: relative; } button > span { position: relative; display: inline-block; width: 55px; height: 55px; background: url('smart-close.png') no-repeat center center; top: -13px } <button> with icons http://codepen.io/uxcodeine/pen/655873a063437bc3160296e30b63a84f <button> <span></span> Button Text</button>
  38. 38. <button> group http://codepen.io/uxcodeine/pen/0974f2c3c80965e2a03e7f12c0986266 button { margin: 0 !important; } button:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } button:nth-child(2) { border-radius: 0; -webkit-border-radius: 0; margin-left: -5px !important; } button:nth-child(3) { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -5px !important; } <button>one</button> <button>two</button> <button>three</button>
  39. 39. <button> group http://codepen.io/uxcodeine/pen/0974f2c3c80965e2a03e7f12c0986266 button { margin: 0 !important; } button:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } button:nth-child(2) { border-radius: 0; -webkit-border-radius: 0; margin-left: -5px !important; } button:nth-child(3) { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -5px !important; } <button>one</button> <button>two</button> <button>three</button>
  40. 40. <button> group http://codepen.io/uxcodeine/pen/0974f2c3c80965e2a03e7f12c0986266 button { margin: 0 !important; } button:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } button:nth-child(2) { border-radius: 0; -webkit-border-radius: 0; margin-left: -5px !important; } button:nth-child(3) { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -5px !important; } <button>one</button> <button>two</button> <button>three</button>
  41. 41. <button> group http://codepen.io/uxcodeine/pen/0974f2c3c80965e2a03e7f12c0986266 button { margin: 0 !important; } button:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } button:nth-child(2) { border-radius: 0; -webkit-border-radius: 0; margin-left: -5px !important; } button:nth-child(3) { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -5px !important; } <button>one</button> <button>two</button> <button>three</button>
  42. 42. <button> group http://codepen.io/uxcodeine/pen/0974f2c3c80965e2a03e7f12c0986266 button { margin: 0 !important; } button:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } button:nth-child(2) { border-radius: 0; -webkit-border-radius: 0; margin-left: -5px !important; } button:nth-child(3) { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -5px !important; } <button>one</button> <button>two</button> <button>three</button>
  43. 43. “doesn’t look like” <button> http://codepen.io/uxcodeine/pen/3db6c2dddca7d3aba2f02b74c117ff20 button { background-color: none; color: rgb(255, 255, 255); cursor: pointer; border-radius: 0; display: inline-block; vertical-align: top; height: 52px; line-height: 1.87; margin: 5px 0; padding: 12px 18px; position: relative; outline: none; } button > span { display: inline-block; position: relative; font-size: 1.44em; font-weight: 100; top: -3px; } <button> <svg height="21px" viewBox="0 0 50 50"><polygon points="15,2.75 12.914,4.836 33.078,25 12.914,45.164 15,47.25 37.25,25 " fill="rgb(255, 255, 255)"/></svg> <span>Label</span> </button> <button> <svg height="21px" viewBox="0 0 50 50"><polygon points="15,2.75 12.914,4.836 33.078,25 12.914,45.164 15,47.25 37.25,25 " fill="rgb(255, 255, 255)"/></svg> <span>Label</span> </button>
  44. 44. “doesn’t look like” <button> http://codepen.io/uxcodeine/pen/3db6c2dddca7d3aba2f02b74c117ff20 button { background-color: none; color: rgb(255, 255, 255); cursor: pointer; border-radius: 0; display: inline-block; vertical-align: top; height: 52px; line-height: 1.87; margin: 5px 0; padding: 12px 18px; position: relative; outline: none; } button > span { display: inline-block; position: relative; font-size: 1.44em; font-weight: 100; top: -3px; } <button> <svg height="21px" viewBox="0 0 50 50"><polygon points="15,2.75 12.914,4.836 33.078,25 12.914,45.164 15,47.25 37.25,25 " fill="rgb(255, 255, 255)"/></svg> <span>Label</span> </button> <button> <svg height="21px" viewBox="0 0 50 50"><polygon points="15,2.75 12.914,4.836 33.078,25 12.914,45.164 15,47.25 37.25,25 " fill="rgb(255, 255, 255)"/></svg> <span>Label</span> </button>
  45. 45. “doesn’t look like” <button> http://codepen.io/uxcodeine/pen/3db6c2dddca7d3aba2f02b74c117ff20 button { background-color: none; color: rgb(255, 255, 255); cursor: pointer; border-radius: 0; display: inline-block; vertical-align: top; height: 52px; line-height: 1.87; margin: 5px 0; padding: 12px 18px; position: relative; outline: none; } button > span { display: inline-block; position: relative; font-size: 1.44em; font-weight: 100; top: -3px; } <button> <svg height="21px" viewBox="0 0 50 50"><polygon points="15,2.75 12.914,4.836 33.078,25 12.914,45.164 15,47.25 37.25,25 " fill="rgb(255, 255, 255)"/></svg> <span>Label</span> </button> <button class="label" > <svg height="21px" viewBox="0 0 50 50"><polygon points="15,2.75 12.914,4.836 33.078,25 12.914,45.164 15,47.25 37.25,25 " fill="rgb(255, 255, 255)"/></svg> <span>Label</span> </button>
  46. 46. “doesn’t look like” <button> http://codepen.io/uxcodeine/pen/3db6c2dddca7d3aba2f02b74c117ff20 button > span { display: inline-block; position: relative; font-size: 1.44em; font-weight: 100; top: -3px; } button.label { display: block; border: none; background: none; } <button> <svg height="21px" viewBox="0 0 50 50"><polygon points="15,2.75 12.914,4.836 33.078,25 12.914,45.164 15,47.25 37.25,25 " fill="rgb(255, 255, 255)"/></svg> <span>Label</span> </button> <button class="label"> <svg height="21px" viewBox="0 0 50 50"><polygon points="15,2.75 12.914,4.836 33.078,25 12.914,45.164 15,47.25 37.25,25 " fill="rgb(255, 255, 255)"/></svg> <span>Label</span> </button>
  47. 47. “doesn’t look like” <button> http://codepen.io/uxcodeine/pen/3db6c2dddca7d3aba2f02b74c117ff20 button > span { display: inline-block; position: relative; font-size: 1.44em; font-weight: 100; top: -3px; } button.label { display: block; border: none; background: none; } <button> <svg height="21px" viewBox="0 0 50 50"><polygon points="15,2.75 12.914,4.836 33.078,25 12.914,45.164 15,47.25 37.25,25 " fill="rgb(255, 255, 255)"/></svg> <span>Label</span> </button> <button class="label"> <svg height="21px" viewBox="0 0 50 50"><polygon points="15,2.75 12.914,4.836 33.078,25 12.914,45.164 15,47.25 37.25,25 " fill="rgb(255, 255, 255)"/></svg> <span>Label</span> </button>
  48. 48. “doesn’t look like” <button> http://codepen.io/uxcodeine/pen/3db6c2dddca7d3aba2f02b74c117ff20 button > span { display: inline-block; position: relative; font-size: 1.44em; font-weight: 100; top: -3px; } button.label { display: block; border: none; background: none; } <button> <svg height="21px" viewBox="0 0 50 50"><polygon points="15,2.75 12.914,4.836 33.078,25 12.914,45.164 15,47.25 37.25,25 " fill="rgb(255, 255, 255)"/></svg> <span>Label</span> </button> <button class="label"> <svg height="21px" viewBox="0 0 50 50"><polygon points="15,2.75 12.914,4.836 33.078,25 12.914,45.164 15,47.25 37.25,25 " fill="rgb(255, 255, 255)"/></svg> <span>Label</span> </button>
  49. 49. “doesn’t look like” <button> http://codepen.io/uxcodeine/pen/3db6c2dddca7d3aba2f02b74c117ff20 button > span { display: inline-block; position: relative; font-size: 1.44em; font-weight: 100; top: -3px; } button.label { display: block; border: none; background: none; } <button> <svg height="21px" viewBox="0 0 50 50"><polygon points="15,2.75 12.914,4.836 33.078,25 12.914,45.164 15,47.25 37.25,25 " fill="rgb(255, 255, 255)"/></svg> <span>Label</span> </button> <button class="label"> <svg height="21px" viewBox="0 0 50 50"><polygon points="15,2.75 12.914,4.836 33.078,25 12.914,45.164 15,47.25 37.25,25 " fill="rgb(255, 255, 255)"/></svg> <span>Label</span> </button>
  50. 50. <canvas> “Because the canvas is an HTML element, you can use CSS styles to modify its position, assign it a background color or image, add a border, and so on. In Safari and other WebKit-based browsers, you can use WebKit transitions to smoothly animate changes in CSS properties. Because the canvas can have a transparent background, you can use CSS to create animated graphics that roam freely across the webpage.” https://developer.apple.com/library/safari/documentation/audiovideo/conceptual/html- canvas-guide/ModifyingtheCanvaswithCSS/ModifyingtheCanvaswithCSS.html
  51. 51. <canvas> cont’d http://codepen.io/uxcodeine/pen/1c56ce3b66893c1d766e9eb40940fde1 canvas { display: block; margin: 0 auto; padding: 33px; border: solid 1px #666; background-color: rgba(1,1,1,1); } var data = { values:[ { X: "Jan", Y: 12 }, { X: "Feb", Y: 28 }, { X: "Mar", Y: 18 }, { X: "Apr", Y: 34 }, { X: "May", Y: 40 }, ]}; <canvas id="graph" width="200" height="150"> </canvas>
  52. 52. <canvas> cont’d http://codepen.io/uxcodeine/pen/1c56ce3b66893c1d766e9eb40940fde1 canvas { display: block; margin: 0 auto; padding: 33px; border: solid 1px #666; background-color: rgba(1,1,1,1); } var data = { values:[ { X: "Jan", Y: 12 }, { X: "Feb", Y: 28 }, { X: "Mar", Y: 18 }, { X: "Apr", Y: 34 }, { X: "May", Y: 40 }, ]}; <canvas id="graph" width="200" height="150"> </canvas>
  53. 53. <canvas> cont’d http://codepen.io/uxcodeine/pen/1c56ce3b66893c1d766e9eb40940fde1 canvas { display: block; margin: 0 auto; padding: 33px; border: solid 1px #666; background-color: rgba(1,1,1,1); } var data = { values:[ { X: "Jan", Y: 12 }, { X: "Feb", Y: 28 }, { X: "Mar", Y: 18 }, { X: "Apr", Y: 34 }, { X: "May", Y: 40 }, ]}; <canvas id="graph" width="200" height="150"> </canvas>
  54. 54. <canvas> cont’d http://codepen.io/uxcodeine/pen/1c56ce3b66893c1d766e9eb40940fde1 canvas { display: block; margin: 0 auto; padding: 33px; border: solid 1px #666; background-color: rgba(1,1,1,1); } var data = { values:[ { X: "Jan", Y: 12 }, { X: "Feb", Y: 28 }, { X: "Mar", Y: 18 }, { X: "Apr", Y: 34 }, { X: "May", Y: 40 }, ]}; <canvas id="graph" width="200" height="150"> </canvas>
  55. 55. Data Acquisition Systems Require Data Visualizations Presenting Information, driving complex analysis
  56. 56. CSS Based Data Visualizations make it easier for users to grasp data e.g. line graphs, gauges, cards & notifications
  57. 57. SVG “SVG content styled with CSS [CSS2]: CSS is a widely implemented declarative language for assigning styling properties to XML content, including SVG. It represents a combination of features, simplicity and compactness that makes it very suitable for many applications of SVG. SVG Tiny 1.2 does not require support for CSS selectors applied to SVG content. Authors must not rely on external, author stylesheets to style documents that are intended to be used with SVG Tiny 1.2 user agents.” http://www.w3.org/TR/SVGMobile12/styling.html
  58. 58. SVG cont’d “The ‘class’ attribute assigns one or more class names to an element. The element may be said to belong to these classes. A class name may be shared by several element instances. The ‘class’ attribute has several roles: As a style sheet selector (when an author wishes to assign style information to a set of elements).” http://www.w3.org/TR/SVGMobile12/styling.html
  59. 59. Line graphs http://codepen.io/uxcodeine/pen/0b031026f6fb91301098eced10d32749 path { stroke: white; stroke-width: 1; fill: none; } line { stroke: #666; } circle { fill: red; } lineGraph.append("svg:g").attr("transform", "translate (35, -20)").selectAll("circle.dataPoints").data(data). enter().append("circle").attr("class", "dataPoints").attr ("cx", function(d, i) { return x_scale(i); }).attr("cy", function(d) { return y_scale(d) * 1; }).attr("r", 8).on("mouseover", function() { <div id=”lineGraph”></div>
  60. 60. Line graphs http://codepen.io/uxcodeine/pen/0b031026f6fb91301098eced10d32749 path { stroke: white; stroke-width: 1; fill: none; } line { stroke: #666; } circle { fill: red; } lineGraph.append("svg:g").attr("transform", "translate (35, -20)").selectAll("circle.dataPoints").data(data). enter().append("circle").attr("class", "dataPoints").attr ("cx", function(d, i) { return x_scale(i); }).attr("cy", function(d) { return y_scale(d) * 1; }).attr("r", 8).on("mouseover", function() { <div id=”lineGraph”></div>
  61. 61. Line graphs http://codepen.io/uxcodeine/pen/0b031026f6fb91301098eced10d32749 path { stroke: white; stroke-width: 1; fill: none; } line { stroke: #666; } circle { fill: red; } lineGraph.append("svg:g").attr("transform", "translate (35, -20)").selectAll("circle.dataPoints").data(data). enter().append("circle").attr("class", "dataPoints").attr ("cx", function(d, i) { return x_scale(i); }).attr("cy", function(d) { return y_scale(d) * 1; }).attr("r", 8).on("mouseover", function() { <div id=”lineGraph”></div>
  62. 62. Line graphs http://codepen.io/uxcodeine/pen/0b031026f6fb91301098eced10d32749 path { stroke: white; stroke-width: 1; fill: none; } line { stroke: #666; } circle { fill: red; } lineGraph.append("svg:g").attr("transform", "translate (35, -20)").selectAll("circle.dataPoints").data(data). enter().append("circle").attr("class", "dataPoints").attr ("cx", function(d, i) { return x_scale(i); }).attr("cy", function(d) { return y_scale(d) * 1; }).attr("r", 8).on("mouseover", function() { <div id=”lineGraph”></div>
  63. 63. Gauges http://codepen.io/uxcodeine/pen/ae0c6bd7334bce98e92d9c53351fa2b0 figure { width: 20em; } div { display:inline-block; position:relative; width:20em; height:10em; overflow:hidden; } div:before { position:absolute; display:block; content:""; width:19.9em; height:10em; border-radius:10em 10em 0 0; background:#111; border-right: solid 1px #666; border-left: solid 1px #666; } <figure> <div> <span></span> </div> <figcaption>Meter Label</figcaption> </figure>
  64. 64. Gauges http://codepen.io/uxcodeine/pen/ae0c6bd7334bce98e92d9c53351fa2b0 figure { width: 20em; } div { display:inline-block; position:relative; width:20em; height:10em; overflow:hidden; } div:before { position:absolute; display:block; content:""; width:19.9em; height:10em; border-radius:10em 10em 0 0; background:#111; border-right: solid 1px #666; border-left: solid 1px #666; } <figure> <div> <span></span> </div> <figcaption>Meter Label</figcaption> </figure>
  65. 65. Gauges http://codepen.io/uxcodeine/pen/ae0c6bd7334bce98e92d9c53351fa2b0 figure { width: 20em; } div { display:inline-block; position:relative; width:20em; height:10em; overflow:hidden; } div:before { position:absolute; display:block; content:""; width:19.9em; height:10em; border-radius:10em 10em 0 0; background:#111; border-right: solid 1px #666; border-left: solid 1px #666; } <figure> <div> <span></span> </div> <figcaption>Meter Label</figcaption> </figure>
  66. 66. Gauges http://codepen.io/uxcodeine/pen/ae0c6bd7334bce98e92d9c53351fa2b0 div:before { position:absolute; display:block; content:""; width:19.9em; height:10em; border-radius:10em 10em 0 0; background:#111; border-right: solid 1px #666; border-left: solid 1px #666; } div:after { position:absolute; display:block; content:""; bottom:0; width:10em; height:5em; left: 5em; background:#333; border-radius:5em 5em 0 0; border-right: solid 1px #666; border-left: solid 1px #666; } <figure> <div> <span></span> </div> <figcaption>Meter Label</figcaption> </figure>
  67. 67. Gauges http://codepen.io/uxcodeine/pen/ae0c6bd7334bce98e92d9c53351fa2b0 span { position:absolute; display:inline-block; opacity: .34; width:20em; height:10em; top:100%; transform-origin:center top; border-radius:0 0 12em 12em; background:#fff; transform:rotate(144deg); } figcaption { display:block; margin: 0 auto; text-align: center; font-family: sans-serif; font-size: 14px; color: #eee; text-transform: uppercase; } <figure> <div> <span></span> </div> <figcaption>Meter Label</figcaption> </figure>
  68. 68. Gauges http://codepen.io/uxcodeine/pen/ae0c6bd7334bce98e92d9c53351fa2b0 <figure> <div> <span></span> </div> <figcaption>Meter Label</figcaption> </figure> span { position:absolute; display:inline-block; opacity: .34; width:20em;a height:10em; top:100%; transform-origin:center top; border-radius:0 0 12em 12em; background:#fff; transform:rotate(144deg); } figcaption { display:block; margin: 0 auto; text-align: center; font-family: sans-serif; font-size: 14px; color: #eee; text-transform: uppercase; }
  69. 69. Cards & Notifications http://codepen.io/uxcodeine/pen/8896cb36229f0f5512c539fd9153e3ae <div class="notification"> <span class="action"> <?xml version="1.0" ?><svg height="89px" version="1.1" viewBox="0 0 55 55" width="89px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www. bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink" ><title/><defs><path d="M0,11 C0,4.92486745 4.92486745,0 11,0 C17.0751325,0 22,4.92486745 22,11 C22,17.0751325 17.0751325,22 11,22 C4.92486745,22 0,17.0751325 0,11 L0,11 Z M21,11 C21,5.47715225 16.5228478,1 11,1 C5. 47715225,1 1,5.47715225 1,11 C1,16.5228478 5.47715225,21 11,21 C16. 5228478,21 21,16.5228478 21,11 L21,11 Z M11,16.5 L15,13.5 L15,12.5 L11. 4984375,15.25 L11.4984374,5.5 L10.5,5.5 L10.5,15.25 L7,12.5 L7,13.5 L11,16.5 L11, 16.5 Z" id="path-1"/></defs><g fill="none" fill-rule="evenodd" id="miu" stroke="none" stroke-width="1"><g id="circle_arrow-down_download_outline_stroke"><use fill="#fff" fill-rule="evenodd" xlink:href="#path-1"/><use fill="none" xlink:href="#path-1" /></g></g></svg> </span> <span class="message">Notification</span> <span class="time">4:30PM</span> </div>
  70. 70. Cards & Notifications http://codepen.io/uxcodeine/pen/8896cb36229f0f5512c539fd9153e3ae .notification { display: block; clear: both; width: 233px; height: 34px; background: rgb(1,1,1); border: 1px solid #666; padding: 13px; margin: 0; } .action { float: left; height: 55px; width: 55px; } .message { width: 144px; float: left; font-family: Arial; font-size: 16px; color: #fff; font-weight: bold; text-transform: uppercase; } <div class="notification"> <span class="action"> <?xml version="1.0" ?><svg height="89px" version="1.1" viewBox="0 0 55 55" width="89px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www. bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink" ><title/><defs><path d="M0,11 C0,4.92486745 4.92486745,0 11,0 C17.0751325,0 22,4.92486745 22,11 C22,17.0751325 17.0751325,22 11,22 C4.92486745,22 0,17.0751325 0,11 L0,11 Z M21,11 C21,5.47715225 16.5228478,1 11,1 C5. 47715225,1 1,5.47715225 1,11 C1,16.5228478 5.47715225,21 11,21 C16. 5228478,21 21,16.5228478 21,11 L21,11 Z M11,16.5 L15,13.5 L15,12.5 L11. 4984375,15.25 L11.4984374,5.5 L10.5,5.5 L10.5,15.25 L7,12.5 L7,13.5 L11,16.5 L11, 16.5 Z" id="path-1"/></defs><g fill="none" fill-rule="evenodd" id="miu" stroke="none" stroke-width="1"><g id="circle_arrow-down_download_outline_stroke"><use fill="#fff" fill-rule="evenodd" xlink:href="#path-1"/><use fill="none" xlink:href="#path-1" /></g></g></svg> </span> <span class="message">Notification</span> <span class="time">4:30PM</span> </div>
  71. 71. Cards & Notifications http://codepen.io/uxcodeine/pen/8896cb36229f0f5512c539fd9153e3ae .notification { display: block; clear: both; width: 233px; height: 34px; background: rgb(1,1,1); border: 1px solid #666; padding: 13px; margin: 0; } .action { float: left; height: 55px; width: 55px; } .message { width: 144px; float: left; font-family: Arial; font-size: 16px; color: #fff; font-weight: bold; text-transform: uppercase; } <div class="notification"> <span class="action"> <?xml version="1.0" ?><svg height="89px" version="1.1" viewBox="0 0 55 55" width="89px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www. bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink" ><title/><defs><path d="M0,11 C0,4.92486745 4.92486745,0 11,0 C17.0751325,0 22,4.92486745 22,11 C22,17.0751325 17.0751325,22 11,22 C4.92486745,22 0,17.0751325 0,11 L0,11 Z M21,11 C21,5.47715225 16.5228478,1 11,1 C5. 47715225,1 1,5.47715225 1,11 C1,16.5228478 5.47715225,21 11,21 C16. 5228478,21 21,16.5228478 21,11 L21,11 Z M11,16.5 L15,13.5 L15,12.5 L11. 4984375,15.25 L11.4984374,5.5 L10.5,5.5 L10.5,15.25 L7,12.5 L7,13.5 L11,16.5 L11, 16.5 Z" id="path-1"/></defs><g fill="none" fill-rule="evenodd" id="miu" stroke="none" stroke-width="1"><g id="circle_arrow-down_download_outline_stroke"><use fill="#fff" fill-rule="evenodd" xlink:href="#path-1"/><use fill="none" xlink:href="#path-1" /></g></g></svg> </span> <span class="message">Notification</span> <span class="time">4:30PM</span> </div>
  72. 72. Cards & Notifications http://codepen.io/uxcodeine/pen/8896cb36229f0f5512c539fd9153e3ae .message { width: 144px; float: left; font-family: Arial; font-size: 16px; color: #fff; font-weight: bold; text-transform: uppercase; } .time { display: block; float: left; font-family: Arial; font-size: 13px; font-weight: 100; color: #666; } <div class="notification"> <span class="action"> <?xml version="1.0" ?><svg height="89px" version="1.1" viewBox="0 0 55 55" width="89px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www. bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink" ><title/><defs><path d="M0,11 C0,4.92486745 4.92486745,0 11,0 C17.0751325,0 22,4.92486745 22,11 C22,17.0751325 17.0751325,22 11,22 C4.92486745,22 0,17.0751325 0,11 L0,11 Z M21,11 C21,5.47715225 16.5228478,1 11,1 C5. 47715225,1 1,5.47715225 1,11 C1,16.5228478 5.47715225,21 11,21 C16. 5228478,21 21,16.5228478 21,11 L21,11 Z M11,16.5 L15,13.5 L15,12.5 L11. 4984375,15.25 L11.4984374,5.5 L10.5,5.5 L10.5,15.25 L7,12.5 L7,13.5 L11,16.5 L11, 16.5 Z" id="path-1"/></defs><g fill="none" fill-rule="evenodd" id="miu" stroke="none" stroke-width="1"><g id="circle_arrow-down_download_outline_stroke"><use fill="#fff" fill-rule="evenodd" xlink:href="#path-1"/><use fill="none" xlink:href="#path-1" /></g></g></svg> </span> <span class="message">Notification</span> <span class="time">4:30PM</span> </div>
  73. 73. Experimental bleeding edge videos & projects
  74. 74. Arduino Light Animation http://vimeo.com/79962595 based on CSS animation properties
  75. 75. http://www.jamesmillerportfolio.co.uk/using-arduino-to-interact-with-websites-via-javascript/ “Change CSS with Arduino”
  76. 76. 3D Printing from CSS 3D Transforms #tridiv { perspective: 800px; position: absolute; overflow: hidden; width: 100%; height: 100%; background: #08182f; font-size: 100%; } .face { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 1); } .scene, .shape, .face, .face-wrapper, .cr { position: absolute; transform-style: preserve-3d; } .scene { width: 80em; height: 80em; top: 50%; left: 50%; margin: -40em 0 0 -40em; } .shape { top: 50%; left: 50%; width: 0; height: 0; transform-origin: 50%; } photo credit http://tridiv.com | http://www.thingiverse.com/thing:86078
  77. 77. Design Principles
  78. 78. Resources V.S. Maintenance V.S. Memory
  79. 79. Modularity Easily swappable standardized components form the different user interfaces http://codepen.io/uxcodeine/pen/f3da533b43ebeeea383c9c2b393cf0ba button { padding: 10px 20px; background: #111; -moz-border-radius: 21px; -webkit-border-radius: 21px; border-radius: 21px; border: 1px solid #666; outline: none; font-size: 14px; color: #eee; text-transform: uppercase; } button > span { display: inline-block; position: relative; font-weight: 100; top: -1px; } .group button { margin: 0 !important; } .group button:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .group button:nth-child(2) { border-radius: 0; -webkit-border-radius: 0; margin-left: -5px !important; } .group button:nth-child(3) { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -5px !important; }
  80. 80. Efficiency Support flow (DOM) with lessened friction http://codepen.io/uxcodeine/pen/KkEax component02= #CCC article for div in 2 4 6 8 9 11 13 15 18 20 22 24 25 27 29 31 34 36 38 40 41 43 45 47 50 52 54 56 57 59 61 63 65 67 div:nth-child({ div }) background component02 i = 0 l = 64 while i < l i++ $("body.checkers article, body.othello article").append(" <div></div> "); $("body.checkers aside").append(" <div></div> ");
  81. 81. Responsiveness Adaptable layouts, not pixel perfect! http://codepen.io/uxcodeine/pen/nyuDE div:first-child { width: 99.5%; } div:nth-child(2), div:nth-child(3) { width: 49.35%; } div:nth-child(4), div:nth-child(5), div:nth-child(6) { width: 32.75%; } div:nth-child(7), div:nth-child(8), div:nth-child(9), div:nth-child(10), div:nth-child(11) { width: 19.4%; } div:nth-child(12), div:nth-child(13), div:nth-child(14), div:nth-child(15), div:nth-child(16), div:nth-child(17), div:nth-child(18), div:nth-child(19) { width: 11.9%; } div:nth-child(20), div:nth-child(21), div:nth-child(22), div:nth-child(23), div:nth-child(24), div: nth-child(25), div:nth-child(26), div:nth-child(27), div:nth-child(28), div:nth-child(29), div:nth- child(30), div:nth-child(31), div:nth-child(32) { width: 7.1%; }
  82. 82. Flexibility Support design iterations with less code http://codepen.io/uxcodeine/pen/znLdc students = [["Matthew", "Ash", "(IEP)", 44, 30, 10], ["Ayala", "Miguel", "", 5, 70, 15], ... $.each students, (index, value) -> $("#compare").append "<article> ... </span><span class=' progress " + (if (value[3] < 85) then "atrisk" else "thrive") + "'> " + value[3] + "%</span><span class=' mastery " + (if (value[4] < 85) then "atrisk" else "thrive") + "'>" + value[4] + "%</span><span class=' attendance " + (if (value[5] < 85) then "atrisk" else "thrive") + "'>" + value[5] + "%</span></article>" .results article .progress, .mastery, .attendance &.thrive color: component02 &:before content: "+" border: solid 1px component02
  83. 83. #IoT needs more CSS! “… The expertise required to make an Internet ‘thing’ is vast. However, this means that the playing field for making such a connected device is astonishingly level. Whatever your skills and interests, you are well placed as anyone to start experimenting and building. There really is no better time to enter the exciting world of the Internet of Things” Adrian McEwen, Hakim Cassimally. Designing the Internet of Things. Chapter 1 The Internet of Things: An Overview
  84. 84. THE CSS of the INTERNET OF THINGS THANK YOU! Get in touch: twitter: @uxcodeline email: luis@teknolog.io Additional credits for code/project samples: Leonardo Amico, James Miller, Julian Garnier, Lasse Lukari & Dhiraj Jadhao
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×