The CSS of the Internet of Things3. 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
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. 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. <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. 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. 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. 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.
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. e.g. Google TV Design Principles
source: https://developers.google.com/tv/web/docs/design_for_tv
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. 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. 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. 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. 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);
}
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
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>
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. 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>
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. “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. “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. “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. “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. “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. “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. <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. <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. <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. <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. <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>
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. 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. 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. 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. 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. 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>
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. 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. 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. 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>
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
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. 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. 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. 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. #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. 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