Thinking Outside the Box that Keeps Moving

rekoorbekul

beW evisnopseR a rof skcirT dna spiT

gnivoM speeK
tahT xoB eht edistuO gniknihT

etis ruoy ekam ot dedeen era sgat atem tahW

eht rettam on ezis secived yreve ot tpada
noitatneiro
<eanm=vepr"cnet"it=eiewdh>
mt ae"iwot otn=wdhdvc-it"
<eanm=vepr"cnet"it=eiewdh iiilsae1>
mt ae"iwot otn=wdhdvc-it, nta-cl="
<eanm=vepr"cnet"it=eiewdh iiilsae1 mxmmsae1>
mt ae"iwot otn=wdhdvc-it, nta-cl=, aiu-cl="
@iwot{wdhdvc-it }
vepr
it:eiewdh ;
tuo gnillor si xif elibom

EI ni guB

a
b
c
d

a

pcjAv oi npdc

b

LbABD oi npdc

c

fgqye oi npdc

omeD

swodniw no

yranimilerp

lmth

enohp

ei ni ngised evisnopser moc wotsttam

enohP swodniW no

lmth tem

EI ni ngiseD evisnopseR

sevihcra golb gro edomskriuq
hcraeser tropweiv atem yranimilerP

gnidaer rehtruF

a

xp

b

xp

c

xp

d

xp

eb dluohs tegrat hcuot a ezis
muminim eht si tahw elppA ot gnidroccA

gnicaps emos htiw mm

tsael ta rof yrT

yldneirf regnif sngised ruoy peeK

ezis
tegrat hcuot no deef eht moc ayam eziS tegraT hcuoT nO

psa yrtne ff moc wekul seziS tegraT hcuoT

gnidaeR rehtruF

<ywde>/ywde>
m-igt<m-igt

gnimoc era stnenopmoC beW

noitulover stnenopmocbew em nosdodbor
noituloveR stnenopmoC beW

sediug elyts htiw wolfkrow
evisnopser ruoy gnivorpmi snoitatneserp moc rekoorbekul
sediuG elytS htiw wolfkroW evisnopseR ruoY gnivorpmI

gnidaeR rehtruF

meht ot kcits dna
senilediug etaerC piT

tpircsavaj bnbria moc buhtig

sptth

senilediuG SSC rekoorbekul moc buhtig

senilediuG SSC yrdraziwssc moc buhtig

gnidaeR rehtruF

hv

wv

d

a

xp

b

smer

c

sme

etis bew evisnopser a ssorca
esu ot tnemerusaem fo tinu

tseb

eht si tahW

gro atanaz smE

moc partstoobteg slexiP

omeD

cte sulytS ssaS

pleh ot srossecorperp esU

mhtyhr lacitrev no stnemerusaem esaB

stnemerusaem lla tsomla rof sme esU

noitatnemelpmI

omeD
HTML
SCSS
Result

Edit on
<1Haig/1
h>edn<h>

<>oe ismdlrstae,cnettraiicn ei.Di lcu ns e eo bbnu lcna Crbtrsdetnc
pLrm pu oo i mt osceu dpsig lt us uts ii t rs iedm aii. uaiu e s e
<>oe ismdlrstae,cnettraiicn ei.Di lcu ns e eo bbnu lcna Crbtrsdetnc
<dv
/i>
@mot"ops"
ipr cmas;
$aeln-egt 2p;
bs-iehih: 4x
$aefn-ie 1p;
bs-otsz: 6x
hm {
tl
ln-egt ryh()
iehih: htm1;
fn-ie $aefn-ie
otsz: bs-otsz;
fn-aiy Hleia sn-ei;
otfml: evtc, assrf
}

PW

fWh

yl tib

ptth pmihcliaM

dirG

mhtyhR

gnidaeR rehtruF

a

sj sdivtif

b

mxwdh 10
a-it: 0%

c

mxhih:10
a-egt 0%

d

kcah gniddap thgieh oreZ

sezis neercs
tnereffid ssorca tnemele rehto yna ro oediv
a fo oitar tcepsa eht peek ew nac od woH

omeD
HTML
SCSS
Result

Edit on

<faewdh"2"hih=35 sc"/w.otb.o/me/G0RmJ"faeodr""alwulcen<irm
irm it=40 egt"1" r=/wwyuuecmebdU-Fm5E rmbre=0 loflsre>/fae
<dv
/i>

dv ls=mda-ai--"
<m cas"ei-rto_ne"sc"tp/iigrcmJVcxjg at"oeHne"/
ig ls=mda-ai_inr r=ht:/.mu.o/4pk.p" l=Dg utr >
<dv
/i>
@mot"ops"
ipr cmas;
bd {
oy
fn-aiy Hleia sn-ei;
otfml: evtc, assrf
mri:ryh()at;
agn htm1 uo
mxwdh ryh(0;
a-it: htm4)
}
%ei-rto{
mda-ai
psto:rltv;
oiin eaie
pdigtp ryh()
adn-o: htm1;
hih:0
egt ;
mri:00ryh()
agn
htm1;
oefo:hde;
vrlw idn
irm,
fae
ojc,
bet
vdo
ie,

eortC oi npdc

oediv rof soitar cisnirtni gnitaerc elcitra moc trapatsila
oediV rof soitaR cisnirtnI gnitaerC

gnidaeR rehtruF

b

noitceted erutaeF

c

sreldnah tneve tpircsavaj motsuC

d

noitceted tnega resU

rzinredoM g e

nooS

seireuQ aideM

a

secived hcuot no
elbahcuot tub secived retniop no elbarevoh
si taht gnihtemos ekam ew dluoc woH

omeD
HTML
SCSS
JS
Result

Edit on
<>hwtemn o hvr ciko tuh Priti i i ciko tuh

< he=#eu i=mn_bto"cas"eu_utn>eu/>
a rf"mn" d"eu_utn ls=mn_bto"Mn<a

loiCa oi npdc

ytisonimuL

revoH

retnioP

gnimoc era seireuq aidem weN
osla tuB

aidem ssc htiw gnithgil latnemnorivne
ot gnidnopser

tsop ku oc mnadroj

gnidaeR rehtruF

stniopkaerb htiw cificeps eB piT

evitceffe ylhgih fo stibah

seireuq aidem
tsop golb moc bewtsorfdarb

seireuQ aideM evitceffE ylhgiH fo stibaH

gnidaeR rehtruF

on

elbalacs resu esu ot ton yrt tuB

evoba eht fo llA

stneve hcuot tpircsavaj evitan esU

<eanm=vepr"cnet"sr
mt ae"iwot otn=uesaal=o>
clben"
sj kcilctsaf

d

c

b

a

tneve hcuot
a morf gal sm

eht evomer uoy od woH

kcilctsaf sbaltf moc buhtig

sj kcilctsaf

esuomdnahcuot elibom ne moc skcor
emiT tsriF ehT roF niagA rehtegoT

lmth

esuoM dnA hcuoT

gnidaeR rehtruF

rettub gnillorcs

hcuot gnillorcs wolfrevo tikbew

d

c

a

xedni z

b

llorcs wolfrevo

SOi
no gnillorcs pu deeps ot dedeen si SSC tahW

spf

ta setar emarf peeK e i

a

noitisoP

b

yticapO

c

roloC

d

mrofsnarT

ylpaehc

etamina ot desu eb nac s eitreporp SSC tahW

elacS

etatoR

etalsnarT
mrofsnarT

yticapO

omeD
CSS animation of top/left vs transform in slowmo.

0:00 / 1:03

snoitamina
ecnamrofrep hgih deeps slairotut ne moc skcor

lmth

snoitaminA ecnamrofreP hgiH

gnidaeR rehtruF

i

oge ruoy etalfnI

j

evoba eht fo llA

g

stnof noci etaerc yllacitamotuA

h

tcejorp ruoy yolpeD

evas no resworb ruoy hserfer dna tcejorp ruoy elipmoceR

f

b

srossecorperP SSC gnilipmoC

c

segami gnisimitpO

d

sppa wen dloffacs yllacitamotuA

e

seicnedneped lanretxe eldnaH

cte sulytS ssaS

SSC

SJ gniyfinim dna gnitanetacnoc gnitniL

a

evah namoeY dna rewoB tnurG ekil sloot
dliub dna noitamotua od segatnavda tahW

wolfkrow
dne tnorf gnitamotua inamsoydda moc kcedrekaeps
wolfkroW dne tnorF gnitamotuA

gnidaeR rehtruF

slooT repoleveD
ruoy wonk ot teG piT

sloot repoleved
emorhc moc elgoog srepoleved slooTveD emorhC

gnidaeR rehtruF

b

N crs

c

tescrs

d

tuo riah rieht gnillup srepoleveD

erutcip

a

noitulos segami evisnopser
a sa rennur tnorf tnerruc eht si tahW

N crs
<m
ig
sc"tp/paeodi/0.p"
r=ht:/lchl.t30jg
sc1"mnwdh 30x ht:/lchl.t50jg
r-=(i-it: 0p) tp/paeodi/0.p"
sc2"mnwdh 50x ht:/lchl.t80jg
r-=(i-it: 0p) tp/paeodi/0.p"
at"lchle Iae>
l=Paeodr mg"

euqinhceT raC nwolC
HTML
CSS
Result

Edit on

dv
<v xls"tp/www.r/00sg
sg mn=ht:/w.3og20/v" veBx" 03521
iwo=0
7 3"
ai-ae=teai lbli bigra"rl=ig
ralbl"h ra ae s en ed oe"m"
tte"h tteatiueo teSGi bigra"
il=te il trbt f h V s en ed>
<il>lw CrTcnqe/il>
tteCon a ehiu<tte
<tl>
sye

peevApcRto"MdMdme"tbne=-"
rsresetai=xiYi et aidx"1

sg{
v
bcgon-ie 10 10;
akrudsz: 0% 0%
bcgon-eet n-eet
akrudrpa: orpa;
}
@ei sre ad(a-it:40x {
mda cen n mxwdh 0p)
sg{
v
bcgon-mg:ul"tp/scp.o18pcMdu-7x3-1-2p.p";otie gensld5x
akrudiae r(ht:/.dni/6/i-eim3521@x7pijg) uln: re oi p;
}
}
@ei sre ad(i-it:41x,
mda cen n mnwdh 0p)
sre ad(a-it:40x ad(wbi-i-eiepxlrto 17){
cen n mxwdh 0p) n -ektmndvc-ie-ai: .5
sg{
v

tHLdi oi npdc

ti crser g e

secivres diaP

euqinhcet semit

yzaL ehT

snoitulos egami eroM

cVh

Wh

yl tib ngiseD beW

evisnopseR nI segamI evitpadA gnivloS euqinhceT raC nwolC

troper raey fo dne segami evisnopser moc rotcod
troper raey fo dne

lmth

segami evisnopseR

lmth weivrevO gmipser sceps oi buhtig sniktabat
xatnyS gmIpseR rof lasoporP

gnidaeR rehtruF

fo troS

iniM arepO

iniM arepO

resworB diordnA

resworB diordnA

resworB diordnA

EI

EI

EI

d

c

b

a

GVS troppus ton od sresworb tahW

omeD
HTML
CSS
Result

Edit on


dv
<v wdh"6 hih=9" <mg xikhe=ht:/sesznt.hlu.o/atrlg.v"sc"tp/ast-aaar
sg it=9" egt"6> iae ln:rf"tp/ast-aaarcodcmmse/oosg r=ht:/sesznt.
<dv
/i>

lmth ne gvs selpmaxe ur nnyl skcirt gat

egami

dna GVS

gnidaeR rehtruF

a

xob xelf

b

xob redrob gnizis xob

c

htdiw xam

d

llec elbat yalpsid

htdiw denifed diulf a peek tub
nigram dna gniddap dexif a tes ew dluoc woH

sledom xob eht lla ecalpeR
*
,
*bfr,
:eoe
*atr{
:fe
bxszn:bre-o;
o-iig odrbx
}

wtf xob redrob gnizis xob

moc hsiriluap

gnidaeR rehtruF

omeD
HTML
SCSS
Result

Edit on
<lcas""
u ls=g>
<icas"_ie w-- p"1(/)/i
l ls=g_tm -14 h> 14<l>
l ls=g_tm -12 h> 12<l>
l ls=g_tm -14 h> 14<l>
l ls=g_tm -14 h> 14<l>
l ls=g_tm -14 h> 14<l>
l ls=g_tm -14 h> 14<l>
l ls=g_tm -18 h> 18<l>
l ls=g_tm -18 h> 18<l>

/l
@mot"ops"
ipr cmas;
$rdpdig ryh()
gi-adn: htm1;

IgtiG oi npdc

a

elbissop sa tuoyal hcum sa roF

b

atad ralubat roF

c

smrof dna atad ralubat roF

d

reveN

desu eb selbat dluohs nehW

eno hcae rof noitulos evisnopser a dna

selbat

tog ev I

wolfrevo latnoziroH
ysaE

HTML
SCSS
Result

Edit on

<al>
tbe
<r
t>
<hTbeHae 1/h
t>al edr <t>
<hTbeHae 2/h
t>al edr <t>
<hTbeHae 3/h
t>al edr <t>
<hTbeHae 4/h
t>al edr <t>
<hTbeHae 5/h
t>al edr <t>
<hTbeHae 6/h
t>al edr <t>

kKbFx oi npdc

snmuloC ytiroirP
atad fo stnuoma egral roF
Selectively displaying data
The number of columns displayed in the table below depends on the available screen space, by default; a smartphone will display 2 columns, for
example, while an expanded desktop browser displays the full set. This is accomplished by assigning semantic classes to the column headings that
indicate which data values take precedence (essential vs optional), in combination with media queries to display them at different screen widths (a.k.a.,
responsive design).
We added a bit of JavaScript logic so you can control which data is displayed by checking column names in the "Display" menu on the right. Once an
option is checked, the associated data will persist and display at all screen widths until the option is unchecked.
You can also set a column to always persist by assigning a class in the markup, in which case it has no menu option. Here, the "Company" column is
persistent.
Display
Company
GOOG

Last Trade

Change

597.74

14.81 (2.54%)

378.94

5.74 (1.54%)

191.55

3.16 (1.68%)

31.15

1.41 (4.72%)

25.50

0.66 (2.67%)

18.65

0.97 (5.49%)

15.81

0.11 (0.67%)

Google Inc.

AAPL
Apple Inc.

AMZN
Amazon.com Inc.

ORCL
Oracle Corporation

MSFT
Microsoft Corporation

CSCO
Cisco Systems, Inc.

YHOO
Yahoo! Inc.

snrettap elbat dwr selpmaxe moc puorgtnemalif

selbat

lmth snrettap evisnopser

si siht oi buhtig tsorfdarb evisnopseR si sihT

gnidaeR rehtruF

gnipparw morf txet siht peek uoy od woH
HTML
SCSS
Result

Edit on



<m sc"tp/paeodi/5"at" /
ig r=ht:/lchl.t10 l=" >
<dv
/i>

dv ls=fotr_otn"
<>oe ismdlrstae,cnettraiicn ei.Di lcu ns e eo bbnu lcna Crbtrsdetn
<dv
/i>
<dv
/i>
@mot"ops"
ipr cmas;
bd {
oy
fn-aiy Hleia sn-ei;
otfml: evtc, assrf
mri:0
agn ;
pdig ryh()
adn: htm1;
ln-egt ryh()
iehih: htm1;
}
ig{
m

rekoorbekul
snoitseuq rof nrut ruoy s ti woN

sknahT

Thinking Outside the Box that Keeps Moving

More Related Content

Viewers also liked

More from Luke Brooker

Thinking Outside the Box that Keeps Moving