Skip to content

Instantly share code, notes, and snippets.

@Landerson352

Landerson352/web-design-frameworks-presentation.html

Created June 19, 2015 14:15
Show Gist options
  • Save Landerson352/fb7f10a557bd79d20ce3 to your computer and use it in GitHub Desktop.
Save Landerson352/fb7f10a557bd79d20ce3 to your computer and use it in GitHub Desktop.
Download ZIP
The source of my June 18, 2015 presentation on web design frameworks. SVG created in Sketch.
Raw
web-design-frameworks-presentation.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Web Design Frameworks</title>
<style>
html, body {
height:100%;
width:100%;
padding:0;
margin:0;
}
body {
padding: 50% 0;
}
.presto {
transition: opacity 0.3s;
}
.presto-hidden {
opacity:0;
}
.presto-wrapper {
width:100%;
}
.presto-wrapper svg {
width:80%;
margin:0 auto;
display:block;
}
</style>
</head>
<body style="background-color:#774A9E;">
<div class="presto-wrapper" style="display:none;">
<!--
This SVG was created in Sketch.
Items can have a special ID of "a:{index}" or "ac:{index}".
The {index} determines the order the items will appear as you press Enter or the Right Arrow Key.
The "a:" prefix will cause that item to animate in. The "ac:" prefix will cause that group's children to animate in, in quick sequence.
Items are grouped with an ID of "center". When focus is on an item inside that group, the page will be scrolled to that group. You can think of these as "slides"
-->
<svg viewBox="0 0 1600 6480" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<g id="Page-1-Copy" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="presto" sketch:type="MSArtboardGroup">
<g id="center" sketch:type="MSLayerGroup" transform="translate(200.000000, 455.000000)">
<g id="a:1" transform="translate(229.000000, 0.000000)" font-weight="bold" font-family="Proxima Nova" sketch:type="MSTextLayer" sketch:alignment="middle">
<text id="WEB-DESIGN-FRAMEWORK" font-size="60" letter-spacing="-2" fill="#50E3C2">
<tspan x="0.48" y="95">WEB DESIGN FRAMEWORK</tspan>
<tspan x="715.16" y="95">?</tspan>
</text>
<text id="WHAT-IS-A" font-size="30" letter-spacing="-1" fill="#D3A2FE">
<tspan x="302.185" y="28">WHAT IS A</tspan>
</text>
</g>
<g id="ac:2" transform="translate(0.000000, 55.000000)" fill="#50E3C2">
<path d="M38.9523214,53.8529849 L56.5106997,71.4113632 C57.0088581,71.9129337 57.6639705,72.1620129 58.319083,72.1620129 C58.9741954,72.1620129 59.6293079,71.9129337 60.1308783,71.4113632 C61.1306072,70.4116343 61.1306072,68.7943255 60.1308783,67.7945966 L41.3782846,49.0385909 C40.6344591,48.2981773 39.5221327,48.0832186 38.5497002,48.5029 C29.999118,52.2152038 20.6637657,50.8196778 14.7711658,44.9509622 C9.78958156,39.9591419 8.04261505,32.4253488 9.93629945,24.993917 L22.1480048,37.1987983 C22.861122,37.9050914 23.9120316,38.1302863 24.8503437,37.7856699 L36.1680935,33.5956799 C36.8641505,33.3363645 37.4169016,32.7870254 37.6762169,32.0841444 L41.8525588,20.800515 C42.2005872,19.8656149 41.9685683,18.8112933 41.2622752,18.1050002 L29.0437457,5.87282259 C36.4888256,3.9723141 44.0157946,5.72269265 49.0144391,10.7213371 C54.8831547,16.5866407 56.2752686,25.9185809 52.5595527,34.4964595 C52.1432834,35.4586559 52.3582421,36.5812183 53.0986557,37.3216319 L71.8512494,56.0708135 C72.8509782,57.0705424 74.4682871,57.0705424 75.471428,56.0708135 C76.4711569,55.0710846 76.4711569,53.4503637 75.471428,52.4540469 L57.9096377,34.8956686 C61.6082934,24.8335509 59.6156597,14.0787883 52.6312057,7.10115842 C45.3089593,-0.224499988 33.800135,-2.06017964 23.328572,2.42665818 C22.550626,2.76103849 21.9842267,3.4605075 21.8238606,4.29304623 C21.6634946,5.12558496 21.9228099,5.98542004 22.5233297,6.58935182 L36.4854136,20.5616719 L33.2849163,29.2043793 L24.6080885,32.4151126 L10.6460046,18.4666769 C10.0420728,17.8661572 9.16858956,17.6000177 8.35311105,17.7637958 C7.51716027,17.9275739 6.81427922,18.4939732 6.48331095,19.2753313 C2.01694539,29.7571304 3.849213,41.2557186 11.1612232,48.5711409 C18.1559134,55.5555949 28.9072639,57.5448165 38.9523214,53.8529849 L38.9523214,53.8529849 Z M51.6792454,92.8321753 L111.836993,32.6812521 L113.867159,34.7080062 C114.348257,35.1925164 114.999957,35.4586559 115.678954,35.4586559 L115.740371,35.4586559 C116.436428,35.4415956 117.105189,35.1413358 117.572639,34.6227051 L132.213719,18.5451539 C133.134971,17.5317768 133.094027,15.9758848 132.13183,15.0102763 L125.891202,8.7832961 C124.922181,7.81086357 123.369701,7.78015517 122.356324,8.697995 L106.282185,23.3322516 C105.760142,23.8031137 105.459882,24.4650502 105.442822,25.1645192 C105.425762,25.8674003 105.702138,26.5395729 106.19006,27.0343193 L108.216814,29.0610734 L48.0624788,89.2154086 L38.9523214,80.1052512 C37.990125,79.1464669 36.2943391,79.1464669 35.3321427,80.1052512 L4.10170426,111.342514 C-1.36439018,116.81202 -1.36780223,125.714043 4.09488017,131.186962 L9.82028995,136.898723 C12.4543879,139.543057 15.9790293,141 19.7356897,141 C23.4991742,141 27.0238157,139.539645 29.6579136,136.898723 L60.8951762,105.664873 C61.3728623,105.187186 61.6492379,104.532074 61.6492379,103.856489 C61.6492379,103.177493 61.3728623,102.525792 60.8951762,102.048106 L51.6792454,92.8321753 L51.6792454,92.8321753 Z M123.997517,14.126557 L126.781745,16.9073728 L115.593653,29.1941431 L111.710747,25.3112371 L123.997517,14.126557 L123.997517,14.126557 Z M26.0309109,133.281957 C22.6905198,136.632584 16.7842717,136.632584 13.4404686,133.281957 L7.71847087,127.566783 C4.24501011,124.093322 4.24842215,118.436153 7.72188291,114.962692 L27.0408759,95.6402874 L45.281663,114.041441 L26.0309109,133.281957 L26.0309109,133.281957 Z M48.8984296,110.424674 L30.6542304,92.0201088 L37.1439381,85.5338132 L55.4700263,103.856489 L48.8984296,110.424674 L48.8984296,110.424674 Z M137.788999,92.265776 C130.807957,85.284734 120.073667,83.2921003 109.994489,86.9805198 L88.4508433,65.4300501 C87.4511144,64.4303212 85.8303935,64.4303212 84.8306646,65.4300501 C83.8309357,66.429779 83.8309357,68.0504999 84.8306646,69.0502288 L107.571938,91.7880898 C108.315763,92.5285033 109.438326,92.7434621 110.39711,92.3271927 C118.974989,88.621713 128.306929,90.0138269 134.165408,95.8859546 C139.177701,100.891423 140.924668,108.428628 139.013923,115.853236 L126.798805,103.631294 C126.0891,102.925001 125.034779,102.696394 124.096467,103.044423 L112.826485,107.227589 C112.130428,107.483492 111.574265,108.032831 111.31495,108.7323 L107.097664,120.029578 C106.742811,120.971302 106.978242,122.025623 107.687947,122.735329 L119.913301,134.95727 C112.468221,136.854367 104.934428,135.1074 99.9391953,130.108756 C94.0738917,124.24004 92.6817778,114.9081 96.3872576,106.340457 C96.8035269,105.378261 96.5919802,104.259111 95.8481546,103.515285 L73.1102936,80.7705998 C72.1105647,79.7708709 70.4898438,79.7708709 69.4901149,80.7705998 C68.490386,81.7669167 68.490386,83.3910496 69.4901149,84.3907785 L91.0371726,105.941248 C87.3487531,115.99313 89.3413868,126.74448 96.3224287,133.728934 C100.979869,138.389786 107.333095,140.825986 114.041173,140.825986 C117.869486,140.825986 121.817221,140.03098 125.628474,138.400022 C126.409832,138.065642 126.976232,137.366173 127.136598,136.533634 C127.296964,135.697684 127.030824,134.837849 126.430305,134.237329 L112.468221,120.278657 L115.699426,111.618889 L124.338722,108.41498 L138.293982,122.37024 C138.891089,122.967348 139.750924,123.236899 140.586875,123.073121 C141.416002,122.912755 142.118883,122.349768 142.456675,121.56841 C146.953749,111.096847 145.121482,99.5948464 137.788999,92.265776 L137.788999,92.265776 Z" id="Fill-187" sketch:type="MSShapeGroup"></path>
<text id="word" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-weight="526" sketch:alignment="middle" line-spacing="40">
<tspan x="223.65" y="96">A collection of CSS, HTML and Javascript libraries and design patterns to build upon, </tspan>
<tspan x="395.09" y="136">in order to make web design faster and easier.</tspan>
</text>
<path d="M1248.50731,28.5308766 C1247.74533,28.0874849 1246.80599,28.0842005 1246.04402,28.5210235 L1182.47807,64.839732 L1182.47807,30.6591569 C1182.47807,29.785511 1182.01168,28.970984 1181.25299,28.5308766 C1180.49102,28.0874849 1179.55497,28.0842005 1178.7897,28.5210235 L1111.50912,66.9548748 C1110.74386,67.3949821 1110.26762,68.2127935 1110.26762,69.0930082 C1110.26762,69.9797916 1110.74386,70.7943187 1111.50912,71.234426 L1178.7897,109.674846 C1179.17069,109.888331 1179.59438,110 1180.01806,110 C1180.43847,110 1180.86872,109.885047 1181.25299,109.664993 C1182.01168,109.224886 1182.47807,108.413643 1182.47807,107.536713 L1182.47807,73.3495687 L1246.04402,109.674846 C1246.42501,109.888331 1246.84541,110 1247.26909,110 C1247.69278,110 1248.12303,109.885047 1248.50074,109.664993 C1249.25943,109.224886 1249.73238,108.413643 1249.73238,107.536713 L1249.73238,30.6591569 C1249.73238,29.7822266 1249.25943,28.970984 1248.50731,28.5308766 L1248.50731,28.5308766 Z M1177.55149,69.0240361 C1177.55149,69.0503112 1177.53507,69.0700175 1177.53507,69.0930082 C1177.53507,69.1192833 1177.55149,69.1422739 1177.55149,69.1652646 L1177.55149,103.29329 L1117.69361,69.0930082 L1177.55149,34.9025799 L1177.55149,69.0240361 L1177.55149,69.0240361 Z M1244.80581,103.290005 L1184.96106,69.0930082 L1244.80581,34.9058643 L1244.80581,103.290005 L1244.80581,103.290005 Z" id="Fill-122" sketch:type="MSShapeGroup" transform="translate(1180.000000, 69.097926) rotate(-180.000000) translate(-1180.000000, -69.097926) "></path>
</g>
<text id="a:3" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-weight="526" sketch:alignment="middle" line-spacing="40">
<tspan x="274.32" y="291" fill="#D5A3FF">Whereas </tspan>
<tspan x="358.26" y="291" fill="#FFDCBF">libraries</tspan>
<tspan x="429.52" y="291" fill="#D5A3FF"> leave you in control, </tspan>
<tspan x="619.36" y="291" fill="#FFDCBF">frameworks</tspan>
<tspan x="724.42" y="291" fill="#D5A3FF"> are often opinionated.</tspan>
<tspan x="317.33" y="331" fill="#D5A3FF">They dictate how you will build your web site, so choose wisely!</tspan>
</text>
</g>
<g id="center" sketch:type="MSLayerGroup" transform="translate(196.000000, 1236.000000)">
<text id="a:4" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="60" font-weight="bold" sketch:alignment="middle" letter-spacing="-2" fill="#50E3C2">
<tspan x="399.85" y="55">WHY USE ONE?</tspan>
</text>
<text id="a:5" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-weight="526" sketch:alignment="middle" line-spacing="40" fill="#50E3C2">
<tspan x="394.57" y="108">A framework will give you a great stating point, </tspan>
<tspan x="231.24" y="148">and take care of many of the headaches that come with building a site from scratch.</tspan>
</text>
<text id="a:6" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="30" font-weight="bold" sketch:alignment="middle" letter-spacing="-1" fill="#D3A2FE">
<tspan x="404.89" y="255">TYPICALLY, THEY COME WITH:</tspan>
</text>
<g id="ac:7" transform="translate(274.000000, 287.000000)">
<path d="M14.7320224,23.22166 L9.38261349,20.1331774 C8.79477026,19.7937859 8.04015435,19.9963989 7.69921248,20.5869276 C7.35589363,21.1815733 7.55917894,21.9317414 8.14795379,22.2716707 L14.5697848,25.9793166 C14.8637065,26.1490123 15.1993213,26.1832069 15.5040734,26.1011615 C15.8106786,26.0187458 16.0832575,25.8198909 16.2536147,25.5248237 L29.8340138,2.00288235 C30.1755364,1.41134792 29.9730545,0.656504954 29.3825258,0.31556309 C28.7878801,-0.0277557579 28.0366992,0.177283811 27.6955205,0.768222642 L14.7320224,23.22166 L14.7320224,23.22166 Z M22.1884169,5.368167 L4.94301995,5.368167 C2.21508518,5.368167 0,7.58123241 0,10.3111869 L0,30.05698 C0,32.7849148 2.21306541,35 4.94301995,35 L24.6888131,35 C27.4167478,35 29.631833,32.7869346 29.631833,30.05698 L29.631833,10.3111869 C29.631833,9.53684794 29.4535177,8.80383122 29.135681,8.15106918 L27.1625136,11.5686954 L27.1625136,30.0613454 C27.1625136,31.4251216 26.0535269,32.5306806 24.6931784,32.5306806 L4.93865459,32.5306806 C3.57487843,32.5306806 2.46931942,31.4216939 2.46931942,30.0613454 L2.46931942,10.3068216 C2.46931942,8.94304543 3.57830605,7.83748641 4.93865459,7.83748641 L20.7627547,7.83748641 L22.1884169,5.368167 L22.1884169,5.368167 Z" id="Rectangle-1-Copy-7" fill="#FFDDBF" sketch:type="MSShapeGroup"></path>
<text id="A-reset-stylesheet-t" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-weight="526" line-spacing="40">
<tspan x="50.75" y="25" fill="#D5A3FF">A </tspan>
<tspan x="69.35" y="25" fill="#FFDDBF">reset stylesheet</tspan>
<tspan x="210.83" y="25" fill="#D5A3FF"> that elimates unexpected default properties of </tspan>
<tspan x="50.75" y="65" fill="#D5A3FF">HTML elements, and differences between various web browsers.</tspan>
</text>
</g>
<g id="ac:8" transform="translate(0.000000, 336.000000)">
<path d="M288.732022,74.22166 L283.382613,71.1331774 C282.79477,70.7937859 282.040154,70.9963989 281.699212,71.5869276 C281.355894,72.1815733 281.559179,72.9317414 282.147954,73.2716707 L288.569785,76.9793166 C288.863706,77.1490123 289.199321,77.1832069 289.504073,77.1011615 C289.810679,77.0187458 290.083258,76.8198909 290.253615,76.5248237 L303.834014,53.0028824 C304.175536,52.4113479 303.973054,51.656505 303.382526,51.3155631 C302.78788,50.9722442 302.036699,51.1772838 301.69552,51.7682226 L288.732022,74.22166 L288.732022,74.22166 Z M296.188417,56.368167 L278.94302,56.368167 C276.215085,56.368167 274,58.5812324 274,61.3111869 L274,81.05698 C274,83.7849148 276.213065,86 278.94302,86 L298.688813,86 C301.416748,86 303.631833,83.7869346 303.631833,81.05698 L303.631833,61.3111869 C303.631833,60.5368479 303.453518,59.8038312 303.135681,59.1510692 L301.162514,62.5686954 L301.162514,81.0613454 C301.162514,82.4251216 300.053527,83.5306806 298.693178,83.5306806 L278.938655,83.5306806 C277.574878,83.5306806 276.469319,82.4216939 276.469319,81.0613454 L276.469319,61.3068216 C276.469319,59.9430454 277.578306,58.8374864 278.938655,58.8374864 L294.762755,58.8374864 L296.188417,56.368167 L296.188417,56.368167 Z" id="Rectangle-1-Copy-6" fill="#FFDDBF" sketch:type="MSShapeGroup"></path>
<text id="A-responsive-grid-sy-Copy" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-weight="526" line-spacing="40">
<tspan x="324" y="76" fill="#D5A3FF">A </tspan>
<tspan x="342.6" y="76" fill="#FFDDBF">responsive grid system</tspan>
<tspan x="548.32" y="76" fill="#D5A3FF"> that make multi-column layouts easy to </tspan>
<tspan x="324" y="116" fill="#D5A3FF">set up, and tailor for desktop, tablets and phones.</tspan>
</text>
<g id="Line-Copy-11-+-Group" sketch:type="MSShapeGroup">
<path d="M194.765221,73.5744933 L258.0196,73.5744933" id="Line-Copy-11" stroke="#D5A3FF" stroke-width="2" stroke-linecap="square" stroke-dasharray="2,6" opacity="0.686567164"></path>
<g id="Group">
<rect id="Rectangle-10" fill="#FFDDBF" x="14" y="13.8288288" width="49.8" height="41.1500015" rx="5"></rect>
<rect id="Rectangle-10-Copy-3" fill="#D5A3FF" x="14" y="61.917598" width="78.85" height="60" rx="5"></rect>
<rect id="Rectangle-10-Copy-4" fill="#D5A3FF" x="101.15" y="61.917598" width="78.85" height="60" rx="5"></rect>
<rect id="Rectangle-10-Copy" fill="#FFDDBF" x="72.1" y="13.4761566" width="49.8" height="41.1500015" rx="5"></rect>
<rect id="Rectangle-10-Copy-2" fill="#FFDDBF" x="130.2" y="13.4761566" width="49.8" height="41.1500015" rx="5"></rect>
<path d="M130.004579,181.407037 C128.321209,180.458145 124.940784,178.564925 123.325844,177.041224 C122.723663,174.582318 121.925317,164.910926 121.665284,156.608127 C121.601417,154.719468 120.168956,153.227701 118.134314,153.300693 C116.250217,153.355437 114.763012,154.938443 114.82688,156.827102 C115.137094,166.740279 115.917193,179.011998 117.878843,181.247367 C119.908923,183.496422 123.476389,185.59037 126.788385,187.447095 C127.107723,187.615888 127.367756,187.748185 127.563921,187.857673 C127.536549,188.040152 127.486368,188.268251 127.404252,188.514598 L67.0629751,188.514598 C67.0173553,188.42792 66.9626116,188.313871 66.9078678,188.181573 C66.8531241,188.026466 66.8166283,187.889607 66.7846944,187.766433 L67.4963629,187.369541 C70.6760613,185.59037 74.2389657,183.496422 76.3146655,181.210872 C77.8566139,179.45451 78.8739349,171.229265 79.3346946,156.758672 C79.3940004,154.870013 77.9113577,153.296131 76.022699,153.232263 C74.1386022,153.077156 72.551034,154.651038 72.4962903,156.544259 C72.2271336,164.878992 71.4333496,174.56407 70.8357305,177.0321 C69.1797327,178.583173 65.8221172,180.467269 64.0840037,181.443533 L63.2309139,181.913416 C62.4918736,182.319432 62.0721717,182.584027 61.7482712,182.834936 C60.3933639,183.95262 59.0567045,186.151493 60.4800415,190.521868 C62.0995435,194.522722 64.5356395,195.357564 66.2874389,195.357564 L127.997309,195.357564 C130.638694,195.357564 132.947055,193.564707 133.818392,190.94157 C134.812903,188.391424 134.790094,184.764652 132.31294,182.761944 C131.979915,182.506473 131.409668,182.150639 130.004579,181.407037 L130.004579,181.407037 Z M188.010123,1.42108547e-14 L6.32480617,1.42108547e-14 C2.98543861,1.42108547e-14 0.2665,2.72350059 0.2665,6.06286814 L0.2665,129.341187 C0.2665,132.644059 2.98543861,135.331064 6.32480617,135.331064 L188.010123,135.331064 C191.312995,135.331064 194,132.644059 194,129.341187 L194,6.06286814 C194,2.72350059 191.312995,1.42108547e-14 188.010123,1.42108547e-14 L188.010123,1.42108547e-14 Z M7.1094663,6.8429663 L187.157034,6.8429663 L187.157034,128.488097 L7.1094663,128.488097 L7.1094663,6.8429663 Z" id="Fill-209" fill="#D5A3FF"></path>
</g>
</g>
<g id="Line-Copy-10-+-Group" transform="translate(911.000000, 0.000000)" sketch:type="MSShapeGroup">
<path d="M0.765220508,71.5744933 L152.065247,71.5744933" id="Line-Copy-10" stroke="#D5A3FF" stroke-width="2" stroke-linecap="square" stroke-dasharray="2,6" opacity="0.686567164"></path>
<g id="Group" transform="translate(145.000000, 0.000000)">
<rect id="Rectangle-10-Copy-11" fill="#FFDDBF" x="15" y="38" width="87" height="20" rx="5"></rect>
<rect id="Rectangle-10-Copy-12" fill="#FFDDBF" x="15" y="63" width="87" height="20" rx="5"></rect>
<rect id="Rectangle-10-Copy-13" fill="#FFDDBF" x="15" y="88" width="87" height="20" rx="5"></rect>
<rect id="Rectangle-10-Copy-14" fill="#D4A3FF" x="15" y="113" width="87" height="35" rx="5"></rect>
<path d="M58.3753726,19.9174411 C61.0525382,19.9174411 63.2311392,17.7262712 63.2311392,15.0281576 C63.2311392,12.3509921 61.0525382,10.1682014 58.3753726,10.1682014 C55.6940175,10.1682014 53.5112268,12.3509921 53.5112268,15.0281576 C53.5112268,17.7262712 55.6940175,19.9174411 58.3753726,19.9174411 L58.3753726,19.9174411 Z M58.1994087,185.985496 C63.2562769,185.985496 67.3704812,181.871292 67.3704812,176.810234 C67.3704812,171.774314 63.2562769,167.685247 58.1994087,167.685247 C53.1676782,167.685247 49.0702324,171.774314 49.0702324,176.810234 C49.0702324,181.871292 53.1676782,185.985496 58.1994087,185.985496 L58.1994087,185.985496 Z M113.347343,0 L3.39921305,0 C1.66471145,0 0.257,1.40771145 0.257,3.14221305 L0.257,193.857787 C0.257,195.592289 1.66471145,197 3.39921305,197 L113.347343,197 C115.081844,197 116.489556,195.592289 116.489556,193.857787 L116.489556,3.14221305 C116.489556,1.40771145 115.081844,0 113.347343,0 L113.347343,0 Z M6.54142611,164.249761 L110.20513,164.249761 L110.20513,190.715574 L6.54142611,190.715574 L6.54142611,164.249761 Z M6.54142611,29.7798005 L110.20513,29.7798005 L110.20513,157.965335 L6.54142611,157.965335 L6.54142611,29.7798005 Z M6.54142611,6.28442611 L110.20513,6.28442611 L110.20513,23.4911848 L6.54142611,23.4911848 L6.54142611,6.28442611 Z" id="Fill-207" fill="#D5A3FF"></path>
</g>
</g>
</g>
<g id="ac:9" transform="translate(274.000000, 487.000000)">
<path d="M14.7320224,23.22166 L9.38261349,20.1331774 C8.79477026,19.7937859 8.04015435,19.9963989 7.69921248,20.5869276 C7.35589363,21.1815733 7.55917894,21.9317414 8.14795379,22.2716707 L14.5697848,25.9793166 C14.8637065,26.1490123 15.1993213,26.1832069 15.5040734,26.1011615 C15.8106786,26.0187458 16.0832575,25.8198909 16.2536147,25.5248237 L29.8340138,2.00288235 C30.1755364,1.41134792 29.9730545,0.656504954 29.3825258,0.31556309 C28.7878801,-0.0277557579 28.0366992,0.177283811 27.6955205,0.768222642 L14.7320224,23.22166 L14.7320224,23.22166 Z M22.1884169,5.368167 L4.94301995,5.368167 C2.21508518,5.368167 0,7.58123241 0,10.3111869 L0,30.05698 C0,32.7849148 2.21306541,35 4.94301995,35 L24.6888131,35 C27.4167478,35 29.631833,32.7869346 29.631833,30.05698 L29.631833,10.3111869 C29.631833,9.53684794 29.4535177,8.80383122 29.135681,8.15106918 L27.1625136,11.5686954 L27.1625136,30.0613454 C27.1625136,31.4251216 26.0535269,32.5306806 24.6931784,32.5306806 L4.93865459,32.5306806 C3.57487843,32.5306806 2.46931942,31.4216939 2.46931942,30.0613454 L2.46931942,10.3068216 C2.46931942,8.94304543 3.57830605,7.83748641 4.93865459,7.83748641 L20.7627547,7.83748641 L22.1884169,5.368167 L22.1884169,5.368167 Z" id="Rectangle-1-Copy-5" fill="#FFDDBF" sketch:type="MSShapeGroup"></path>
<text id="A-consistent-styling" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-weight="526" line-spacing="38">
<tspan x="50" y="25" fill="#D5A3FF">A </tspan>
<tspan x="68.6" y="25" fill="#FFDDBF">consistent styling</tspan>
<tspan x="223.88" y="25" fill="#D5A3FF"> system for HTML components like headings, </tspan>
<tspan x="50" y="63" fill="#D5A3FF">buttons and inputs, plus a nice default style.</tspan>
</text>
</g>
<g id="ac:10" transform="translate(274.000000, 587.000000)">
<path d="M14.7320224,23.22166 L9.38261349,20.1331774 C8.79477026,19.7937859 8.04015435,19.9963989 7.69921248,20.5869276 C7.35589363,21.1815733 7.55917894,21.9317414 8.14795379,22.2716707 L14.5697848,25.9793166 C14.8637065,26.1490123 15.1993213,26.1832069 15.5040734,26.1011615 C15.8106786,26.0187458 16.0832575,25.8198909 16.2536147,25.5248237 L29.8340138,2.00288235 C30.1755364,1.41134792 29.9730545,0.656504954 29.3825258,0.31556309 C28.7878801,-0.0277557579 28.0366992,0.177283811 27.6955205,0.768222642 L14.7320224,23.22166 L14.7320224,23.22166 Z M22.1884169,5.368167 L4.94301995,5.368167 C2.21508518,5.368167 0,7.58123241 0,10.3111869 L0,30.05698 C0,32.7849148 2.21306541,35 4.94301995,35 L24.6888131,35 C27.4167478,35 29.631833,32.7869346 29.631833,30.05698 L29.631833,10.3111869 C29.631833,9.53684794 29.4535177,8.80383122 29.135681,8.15106918 L27.1625136,11.5686954 L27.1625136,30.0613454 C27.1625136,31.4251216 26.0535269,32.5306806 24.6931784,32.5306806 L4.93865459,32.5306806 C3.57487843,32.5306806 2.46931942,31.4216939 2.46931942,30.0613454 L2.46931942,10.3068216 C2.46931942,8.94304543 3.57830605,7.83748641 4.93865459,7.83748641 L20.7627547,7.83748641 L22.1884169,5.368167 L22.1884169,5.368167 Z" id="Rectangle-1-Copy-4" fill="#FFDDBF" sketch:type="MSShapeGroup"></path>
<text id="A-set-of-common-comp" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-weight="526" line-spacing="38">
<tspan x="50" y="25" fill="#D5A3FF">A set of </tspan>
<tspan x="123.46" y="25" fill="#FFDDBF">common components</tspan>
<tspan x="316.84" y="25" fill="#D5A3FF"> that are not native to HTML, such as </tspan>
<tspan x="50" y="63" fill="#D5A3FF">navigation menus, modals, icons and tabs.</tspan>
</text>
</g>
</g>
<g id="center" sketch:type="MSLayerGroup" transform="translate(400.000000, 2176.000000)">
<text id="a:11" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="60" font-weight="bold" sketch:alignment="middle" letter-spacing="-2" fill="#50E3C2">
<tspan x="68.76" y="55">HOW DO YOU PICK ONE?</tspan>
</text>
<text id="a:12" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-weight="526" sketch:alignment="middle" line-spacing="40" fill="#50E3C2">
<tspan x="117.76" y="108">At the end of the day, you’ll have to pick one that fits your style,</tspan>
<tspan x="191.21" y="148">and one one that fits the needs of your project.</tspan>
</text>
<text id="a:13" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="30" font-weight="bold" sketch:alignment="middle" letter-spacing="-1" fill="#FFDDBF">
<tspan x="102.475" y="255">BUT, HERE ARE SOME THINGS TO CONSIDER:</tspan>
</text>
<g id="ac:14" transform="translate(0.000000, 307.000000)">
<path d="M0,5.00443555 C0,2.24056212 2.24260698,0 5.00443555,0 L24.9955644,0 C27.7594379,0 30,2.24260698 30,5.00443555 L30,24.9955644 C30,27.7594379 27.757393,30 24.9955644,30 L5.00443555,30 C2.24056212,30 0,27.757393 0,24.9955644 L0,5.00443555 L0,5.00443555 Z M2.5,5.00001596 C2.5,3.61929527 3.62276548,2.5 5.00001596,2.5 L24.999984,2.5 C26.3807047,2.5 27.5,3.62276548 27.5,5.00001596 L27.5,24.999984 C27.5,26.3807047 26.3772345,27.5 24.999984,27.5 L5.00001596,27.5 C3.61929527,27.5 2.5,26.3772345 2.5,24.999984 L2.5,5.00001596 L2.5,5.00001596 Z" id="Rectangle-1-Copy-2" fill="#FFDCBF" sketch:type="MSShapeGroup"></path>
<text id="Is-it-widely-known,-" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-weight="bold" line-spacing="40">
<tspan x="54" y="20" fill="#FFDDBF">Is it widely known, used and maintained, or is it someone’s weekend project?</tspan>
<tspan x="748.42" y="20" font-weight="526" fill="#D5A3FF"></tspan>
<tspan x="54" y="60" font-weight="526" fill="#D5A3FF">Popularity of an open-source framework leads to community support. </tspan>
<tspan x="54" y="100" font-weight="526" fill="#D5A3FF">This means more contributions, more bug fixes and more help on StackOverflow.</tspan>
<tspan x="54" y="140" font-weight="526" fill="#D5A3FF">It also means more integrations with other platforms like Wordpress, Drupal, </tspan>
<tspan x="54" y="180" font-weight="526" fill="#D5A3FF">Meteor or Angular, just to name a few.</tspan>
</text>
</g>
<g id="ac:15" transform="translate(0.000000, 547.000000)">
<path d="M0,5.00443555 C0,2.24056212 2.24260698,0 5.00443555,0 L24.9955644,0 C27.7594379,0 30,2.24260698 30,5.00443555 L30,24.9955644 C30,27.7594379 27.757393,30 24.9955644,30 L5.00443555,30 C2.24056212,30 0,27.757393 0,24.9955644 L0,5.00443555 L0,5.00443555 Z M2.5,5.00001596 C2.5,3.61929527 3.62276548,2.5 5.00001596,2.5 L24.999984,2.5 C26.3807047,2.5 27.5,3.62276548 27.5,5.00001596 L27.5,24.999984 C27.5,26.3807047 26.3772345,27.5 24.999984,27.5 L5.00001596,27.5 C3.61929527,27.5 2.5,26.3772345 2.5,24.999984 L2.5,5.00001596 L2.5,5.00001596 Z" id="Rectangle-1-Copy-3" fill="#FFDCBF" sketch:type="MSShapeGroup"></path>
<text id="Does-the-framework-u" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-weight="bold" line-spacing="40">
<tspan x="54" y="20" fill="#FFDDBF">Does the framework utilize existing libraries, tools and coding standards that are </tspan>
<tspan x="54" y="60" fill="#FFDDBF">familiar to you, or does it try to reinvent the wheel?</tspan>
<tspan x="513.58" y="60" font-weight="526" fill="#D5A3FF"></tspan>
<tspan x="54" y="100" font-weight="526" fill="#D5A3FF">If you need to learn 4 new languages to use a framework, it’s probably not for you.</tspan>
</text>
</g>
<g id="ac:16" transform="translate(0.000000, 707.000000)">
<path d="M0,5.00443555 C0,2.24056212 2.24260698,0 5.00443555,0 L24.9955644,0 C27.7594379,0 30,2.24260698 30,5.00443555 L30,24.9955644 C30,27.7594379 27.757393,30 24.9955644,30 L5.00443555,30 C2.24056212,30 0,27.757393 0,24.9955644 L0,5.00443555 L0,5.00443555 Z M2.5,5.00001596 C2.5,3.61929527 3.62276548,2.5 5.00001596,2.5 L24.999984,2.5 C26.3807047,2.5 27.5,3.62276548 27.5,5.00001596 L27.5,24.999984 C27.5,26.3807047 26.3772345,27.5 24.999984,27.5 L5.00001596,27.5 C3.61929527,27.5 2.5,26.3772345 2.5,24.999984 L2.5,5.00001596 L2.5,5.00001596 Z" id="Rectangle-1-Copy-8" fill="#FFDCBF" sketch:type="MSShapeGroup"></path>
<text id="Are-there-examples-o" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-weight="bold" line-spacing="40">
<tspan x="54" y="20" fill="#FFDDBF">Are there examples of beautiful projects that have used the framework, </tspan>
<tspan x="54" y="60" fill="#FFDDBF">or are many of them ugly and broken?</tspan>
<tspan x="396.5" y="60" font-weight="526" fill="#D5A3FF"></tspan>
<tspan x="54" y="100" font-weight="526" fill="#D5A3FF">This is an indicator of how easily you’ll be able to master the framework.</tspan>
</text>
</g>
<g id="ac:17" transform="translate(0.000000, 867.000000)">
<path d="M0,5.00443555 C0,2.24056212 2.24260698,0 5.00443555,0 L24.9955644,0 C27.7594379,0 30,2.24260698 30,5.00443555 L30,24.9955644 C30,27.7594379 27.757393,30 24.9955644,30 L5.00443555,30 C2.24056212,30 0,27.757393 0,24.9955644 L0,5.00443555 L0,5.00443555 Z M2.5,5.00001596 C2.5,3.61929527 3.62276548,2.5 5.00001596,2.5 L24.999984,2.5 C26.3807047,2.5 27.5,3.62276548 27.5,5.00001596 L27.5,24.999984 C27.5,26.3807047 26.3772345,27.5 24.999984,27.5 L5.00001596,27.5 C3.61929527,27.5 2.5,26.3772345 2.5,24.999984 L2.5,5.00001596 L2.5,5.00001596 Z" id="Rectangle-1-Copy-9" fill="#FFDCBF" sketch:type="MSShapeGroup"></path>
<text id="Is-the-documentation" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-weight="bold" line-spacing="40">
<tspan x="54" y="20" fill="#FFDDBF">Is the documentation good?</tspan>
<tspan x="306.24" y="20" font-weight="526" fill="#D5A3FF"></tspan>
<tspan x="54" y="60" font-weight="526" fill="#D5A3FF">You don’t want to sift through typos, broken english, or pages marked “to do”.</tspan>
</text>
</g>
</g>
<g id="center" sketch:type="MSLayerGroup" transform="translate(213.000000, 3313.000000)">
<g id="ac:18" transform="translate(209.000000, 0.000000)" font-weight="bold" font-family="Proxima Nova" sketch:type="MSTextLayer" sketch:alignment="middle">
<text id="LET’S-TAKE-A-LOOK-AT" font-size="30" letter-spacing="-1" fill="#D3A2FE">
<tspan x="230.46" y="28">LET’S TAKE A LOOK AT</tspan>
</text>
<text id="SOME-OF-TODAY’S-LEAD" font-size="60" letter-spacing="-2" fill="#50E3C2">
<tspan x="0.05" y="97">SOME OF TODAY’S LEADERS</tspan>
</text>
</g>
<g id="ac:19" transform="translate(6.000000, 172.000000)">
<g id="Rectangle-8-+-Oval-1" transform="translate(301.000000, 0.000000)" fill="#D3A2FE" sketch:type="MSShapeGroup">
<circle id="Oval-1" cx="140" cy="140" r="140"></circle>
</g>
<text id="82K" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="60" font-weight="bold" sketch:alignment="middle" line-spacing="60" fill="#774A9E">
<tspan x="386.09" y="127">82K</tspan>
<tspan x="375.5" y="187">stars</tspan>
</text>
<path d="M0.5,140 L376.065247,140" id="Line" stroke="#D5A3FF" stroke-width="2" stroke-linecap="square" stroke-dasharray="2,6" opacity="0.686567164" sketch:type="MSShapeGroup"></path>
<text id="Bootstrap" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="60" font-weight="bold" sketch:alignment="middle" letter-spacing="-2" fill="#FFDDBF">
<tspan x="17" y="85">Bootstrap</tspan>
</text>
<text id="by-Twitter" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-weight="bold" sketch:alignment="middle" fill="#D5A3FF">
<tspan x="96.3" y="123">by Twitter</tspan>
</text>
<text id="version-3,-est.-2011" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-weight="normal" sketch:alignment="middle" fill="#D5A3FF">
<tspan x="59.63" y="172">version 3, est. 2011</tspan>
</text>
<text id="“most-popular”" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-style="italic" font-weight="normal" sketch:alignment="middle" fill="#D5A3FF">
<tspan x="76.26" y="202">“most popular”</tspan>
</text>
</g>
<g id="ac:20" transform="translate(657.000000, 204.000000)">
<g id="Rectangle-8-Copy-+-Oval-1-Copy" transform="translate(0.000000, 38.000000)" fill="#D3A2FE" sketch:type="MSShapeGroup">
<circle id="Oval-1-Copy" cx="70" cy="70" r="70"></circle>
</g>
<text id="20K" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="30" font-weight="bold" sketch:alignment="middle" line-spacing="30" fill="#774A9E">
<tspan x="42.585" y="102">20K</tspan>
<tspan x="37.5" y="132">stars</tspan>
</text>
<path d="M133.5,108 L509.065247,108" id="Line-Copy-3" stroke="#D5A3FF" stroke-width="2" stroke-linecap="square" stroke-dasharray="2,6" opacity="0.686567164" sketch:type="MSShapeGroup"></path>
<text id="Foundation" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="60" font-weight="bold" sketch:alignment="middle" letter-spacing="-2" fill="#FFDDBF">
<tspan x="225.22" y="55">Foundation</tspan>
</text>
<text id="by-ZURB" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-weight="bold" sketch:alignment="middle" fill="#D5A3FF">
<tspan x="330.14" y="89">by ZURB</tspan>
</text>
<text id="version-5,-est.-2011" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-weight="normal" sketch:alignment="middle" fill="#D5A3FF">
<tspan x="287.8" y="140">version 5, est. 2011</tspan>
</text>
<text id="“most-advanced”" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-style="italic" font-weight="normal" sketch:alignment="middle" fill="#D5A3FF">
<tspan x="294.24" y="169">“most advanced”</tspan>
</text>
</g>
<g id="ac:21" transform="translate(0.000000, 483.000000)">
<g id="Rectangle-8-Copy-3-+-Oval-1-Copy-4" transform="translate(377.000000, 39.000000)" fill="#D3A2FE" sketch:type="MSShapeGroup">
<circle id="Oval-1-Copy-4" cx="70" cy="70" r="70"></circle>
</g>
<text id="17.8K" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="30" font-weight="bold" sketch:alignment="middle" line-spacing="30" fill="#774A9E">
<tspan x="412" y="103">17.8K</tspan>
<tspan x="414.475" y="133">stars</tspan>
</text>
<text id="SemanticUI" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="60" font-weight="bold" sketch:alignment="middle" letter-spacing="-2" fill="#FFDDBF">
<tspan x="0.78" y="55">SemanticUI</tspan>
</text>
<text id="by-Semantic-Org" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-weight="bold" sketch:alignment="middle" fill="#D4A3FF">
<tspan x="72.62" y="91">by Semantic Org</tspan>
</text>
<path d="M6.5,109 L423,109" id="Line-Copy" stroke="#D5A3FF" stroke-width="2" stroke-linecap="square" stroke-dasharray="2,6" opacity="0.686567164" sketch:type="MSShapeGroup"></path>
<text id="version-1,-est.-2013" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-weight="normal" sketch:alignment="middle" fill="#D4A3FF">
<tspan x="65.63" y="141">version 1, est. 2013</tspan>
</text>
<text id="“classes-as-words”" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-style="italic" font-weight="normal" sketch:alignment="middle" fill="#D5A3FF">
<tspan x="65.55" y="172">“classes as words”</tspan>
</text>
</g>
<g id="ac:22" transform="translate(677.000000, 483.000000)">
<g id="Rectangle-8-Copy-2-+-Oval-1-Copy-2" transform="translate(0.000000, 59.000000)" fill="#D3A2FE" sketch:type="MSShapeGroup">
<circle id="Oval-1-Copy-2" cx="50" cy="50" r="50"></circle>
</g>
<text id="11.6K" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-weight="bold" sketch:alignment="middle" line-spacing="20" fill="#774A9E">
<tspan x="27" y="105">11.6K</tspan>
<tspan x="28.06" y="125">stars</tspan>
</text>
<path d="M69.9570495,109 L489.065247,109" id="Line-Copy-4" stroke="#D5A3FF" stroke-width="2" stroke-linecap="square" stroke-dasharray="2,6" opacity="0.686567164" sketch:type="MSShapeGroup"></path>
<text id="Pure" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="60" font-weight="bold" sketch:alignment="middle" letter-spacing="-2" fill="#FFDDBF">
<tspan x="291.02" y="55">Pure</tspan>
</text>
<text id="by-Yahoo" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-weight="bold" sketch:alignment="middle" fill="#D5A3FF">
<tspan x="308.4" y="91">by Yahoo</tspan>
</text>
<text id="version-0,-est.-2013" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-weight="normal" sketch:alignment="middle" fill="#D4A3FF">
<tspan x="265.71" y="140">version 0, est. 2013</tspan>
</text>
<text id="“unopinionated-&amp;-per" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-style="italic" font-weight="normal" sketch:alignment="middle" fill="#D4A3FF">
<tspan x="218.58" y="173">“unopinionated &amp; performant”</tspan>
</text>
</g>
<g id="ac:23" transform="translate(6.000000, 724.000000)">
<g id="Rectangle-8-Copy-5-+-Oval-1-Copy-3" transform="translate(391.000000, 58.000000)" fill="#D3A2FE" sketch:type="MSShapeGroup">
<circle id="Oval-1-Copy-3" cx="50" cy="50" r="50"></circle>
</g>
<text id="8.8K" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-weight="bold" sketch:alignment="middle" line-spacing="20" fill="#774A9E">
<tspan x="420.41" y="104">8.8K</tspan>
<tspan x="419.5" y="124">stars</tspan>
</text>
<path d="M0.5,108 L423,108" id="Line-Copy-2" stroke="#D5A3FF" stroke-width="2" stroke-linecap="square" stroke-dasharray="2,6" opacity="0.686567164" sketch:type="MSShapeGroup"></path>
<text id="Skeleton" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="60" font-weight="bold" sketch:alignment="middle" letter-spacing="-2" fill="#FFDDBF">
<tspan x="30.13" y="55">Skeleton</tspan>
</text>
<text id="by-Dave-Gamache" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-weight="bold" sketch:alignment="middle" fill="#D4A3FF">
<tspan x="59.22" y="90">by Dave Gamache</tspan>
</text>
<text id="version-2,-est.-2011" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-weight="normal" sketch:alignment="middle" fill="#D4A3FF">
<tspan x="59.32" y="139">version 2, est. 2011</tspan>
</text>
<text id="“dead-simple”" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-style="italic" font-weight="normal" sketch:alignment="middle" fill="#D4A3FF">
<tspan x="80.19" y="169">“dead simple”</tspan>
</text>
</g>
<g id="ac:24" transform="translate(687.000000, 724.000000)">
<g id="Rectangle-8-Copy-4-+-Oval-1-Copy-5" transform="translate(0.000000, 68.000000)" fill="#D3A2FE" sketch:type="MSShapeGroup">
<circle id="Oval-1-Copy-5" cx="40" cy="40" r="40"></circle>
</g>
<text id="5K" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-weight="bold" sketch:alignment="middle" line-spacing="20" fill="#774A9E">
<tspan x="28.01" y="104">5K</tspan>
<tspan x="18.5" y="124">stars</tspan>
</text>
<path d="M42.9896806,108 L479.065247,108" id="Line-Copy-5" stroke="#D5A3FF" stroke-width="2" stroke-linecap="square" stroke-dasharray="2,6" opacity="0.686567164" sketch:type="MSShapeGroup"></path>
<text id="UIKit" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="60" font-weight="bold" sketch:alignment="middle" letter-spacing="-2" fill="#FFDCBF">
<tspan x="278.48" y="55">UIKit</tspan>
</text>
<text id="by-YOOTheme" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-weight="bold" sketch:alignment="middle" fill="#D4A3FF">
<tspan x="274.64" y="90">by YOOTheme</tspan>
</text>
<text id="version-2,-est.-2013" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-weight="normal" sketch:alignment="middle" fill="#D4A3FF">
<tspan x="256.14" y="139">version 2, est. 2013</tspan>
</text>
<text id="“lightweight-&amp;-modul" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-style="italic" font-weight="normal" sketch:alignment="middle" fill="#D4A3FF">
<tspan x="236.65" y="172">“lightweight &amp; modular”</tspan>
</text>
</g>
</g>
<g id="center" sketch:type="MSLayerGroup" transform="translate(39.000000, 4526.000000)">
<text id="a:25" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="60" font-weight="bold" sketch:alignment="middle" letter-spacing="-2" fill="#50E3C2">
<tspan x="482.32" y="55">DIFFERENT STROKES</tspan>
</text>
<text id="a:26" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-weight="526" sketch:alignment="middle" line-spacing="40" fill="#50E3C2">
<tspan x="471.94" y="130">Do these unique differences between frameworks matter to you?</tspan>
<tspan x="426.41" y="170">Are you looking for a robust “one stop shop”, or a lightweight powerhouse?</tspan>
</text>
<g id="ac:27" transform="translate(0.000000, 239.000000)">
<text id="Bootstrap-Copy" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="60" font-weight="bold" sketch:alignment="middle" letter-spacing="-2" fill="#FFDDBF">
<tspan x="57" y="55">Bootstrap</tspan>
</text>
<text id="Foundation-Copy" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="60" font-weight="bold" sketch:alignment="middle" letter-spacing="-2" fill="#FFDDBF">
<tspan x="426.22" y="55">Foundation</tspan>
</text>
<text id="SemanticUI" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="60" font-weight="bold" sketch:alignment="middle" letter-spacing="-2" fill="#FFDDBF">
<tspan x="804.78" y="55">SemanticUI</tspan>
</text>
<text id="Pure-Copy" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="60" font-weight="bold" sketch:alignment="middle" letter-spacing="-2" fill="#FFDDBF">
<tspan x="1281.02" y="55">Pure</tspan>
</text>
<path d="M0.598140717,80 L1519.14526,80" id="Line-Copy-6" stroke="#D5A3FF" stroke-width="2" stroke-linecap="square" opacity="0.686567164" sketch:type="MSShapeGroup"></path>
<text id="LESS-or-SASS,-rich-m" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-weight="bold" sketch:alignment="middle" line-spacing="40">
<tspan x="64.53" y="121" fill="#D5A3FF">LESS or SASS, </tspan>
<tspan x="199.15" y="121" fill="#FFDDBF">rich mixins</tspan>
</text>
<text id="SASS" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-weight="bold" sketch:alignment="middle" line-spacing="40" fill="#D5A3FF">
<tspan x="545.83" y="122">SASS</tspan>
</text>
<text id="LESS,-class-combinat" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-weight="bold" sketch:alignment="middle" line-spacing="40">
<tspan x="836.7" y="120" fill="#D4A3FF">LESS, </tspan>
<tspan x="893.06" y="120" fill="#FFDDBF">class combinations</tspan>
</text>
<text id="SASS,-namespace-pref" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-weight="bold" sketch:alignment="middle" line-spacing="40">
<tspan x="1234.03" y="120" fill="#D5A3FF">SASS, </tspan>
<tspan x="1293.61" y="120" fill="#FFDDBF">namespace prefix</tspan>
</text>
<path d="M0.598140717,150 L1519.14526,150" id="Line-Copy-7" stroke="#D5A3FF" stroke-width="2" stroke-linecap="square" stroke-dasharray="2,6" opacity="0.686567164" sketch:type="MSShapeGroup"></path>
<text id="fluid-12-column-grid" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-weight="bold" sketch:alignment="middle" line-spacing="40" fill="#D5A3FF">
<tspan x="24.18" y="191">fluid 12 column grid w/breakpoints</tspan>
</text>
<text id="fluid-12-column-grid" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-weight="bold" sketch:alignment="middle" line-spacing="40" fill="#D4A3FF">
<tspan x="414.18" y="192">fluid 12 column grid w/breakpoints</tspan>
</text>
<text id="fluid-16-column-grid" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-weight="bold" sketch:alignment="middle" line-spacing="40">
<tspan x="809.72" y="190" fill="#D4A3FF">fluid 16 column grid, </tspan>
<tspan x="998.06" y="190" fill="#FFDDBF">adjustable</tspan>
</text>
<text id="fluid-fractional-gri" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-weight="bold" sketch:alignment="middle" line-spacing="40">
<tspan x="1191.02" y="190" fill="#D4A3FF">fluid </tspan>
<tspan x="1236.1" y="190" fill="#FFDDBF">fractional</tspan>
<tspan x="1321.48" y="190" fill="#D4A3FF"> grid w/breakpoints</tspan>
</text>
<path d="M0.598140717,220 L1519.14526,220" id="Line-Copy-8" stroke="#D5A3FF" stroke-width="2" stroke-linecap="square" stroke-dasharray="2,6" opacity="0.686567164" sketch:type="MSShapeGroup"></path>
<text id="Glyphicons" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-weight="bold" sketch:alignment="middle" line-spacing="40">
<tspan x="130.19" y="261" fill="#FFDDBF">Glyphicons</tspan>
<tspan x="113.26" y="301" fill="#D4A3FF">media element</tspan>
</text>
<text id="off-canvas-navigatio" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-weight="bold" sketch:alignment="middle" line-spacing="40">
<tspan x="473.51" y="262" fill="#FFDDBF">off-canvas navigation</tspan>
<tspan x="497.49" y="302" fill="#FFDDBF">height equalizer</tspan>
<tspan x="643.51" y="302" fill="#D5A3FF"></tspan>
<tspan x="502.46" y="342" fill="#D5A3FF">form validation</tspan>
<tspan x="531.04" y="382" fill="#D5A3FF">switches</tspan>
<tspan x="514.09" y="422" fill="#D4A3FF">pricing table</tspan>
</text>
<text id="form-validation" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-weight="bold" sketch:alignment="middle" line-spacing="40" fill="#D4A3FF">
<tspan x="882.96" y="260">form validation</tspan>
<tspan x="911.54" y="300">switches</tspan>
</text>
<text id="only-the-basic-eleme" sketch:type="MSTextLayer" font-family="Proxima Nova" font-size="20" font-weight="bold" sketch:alignment="middle" line-spacing="40" fill="#D4A3FF">
<tspan x="1237.26" y="260">only the basic elements</tspan>
</text>
<path d="M0.598140717,450 L1519.14526,450" id="Line-Copy-9" stroke="#D5A3FF" stroke-width="2" stroke-linecap="square" stroke-dasharray="2,6" opacity="0.686567164" sketch:type="MSShapeGroup"></path>
</g>
</g>
<g id="center" sketch:type="MSLayerGroup" transform="translate(406.000000, 5746.000000)" font-family="Proxima Nova" sketch:alignment="middle" fill="#50E3C2">
<text id="ac:29" sketch:type="MSTextLayer" font-size="20" font-weight="526" line-spacing="40">
<tspan x="0.94" y="130">Take a look at each framework’s web site, examples, documentation, and Github activity.</tspan>
<tspan x="120.07" y="170">Choose one that fits your style, and the needs of your project.</tspan>
<tspan x="346.73" y="210">Good luck!</tspan>
</text>
<text id="ac:28" sketch:type="MSTextLayer" font-size="60" font-weight="bold" letter-spacing="-2">
<tspan x="232.33" y="55">YOUR TURN</tspan>
</text>
</g>
</g>
</g>
</svg>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
var seeky = 0;
var current = -1;
var animals = $('[id^="a:"], [id^="ac:"]').sort(function (a, b) {
// convert to integers from strings
a = parseInt($(a).attr("id").split(':')[1]);
b = parseInt($(b).attr("id").split(':')[1]);
// compare
if(a > b) {
return 1;
} else if(a < b) {
return -1;
} else {
return 0;
}
});
$('[id^="a:"], [id^="ac:"]>*').attr('class', 'presto presto-hidden');
$('.presto-wrapper').show();
$(window).on('keydown', function(e){
switch (e.which) {
case 39:
case 13:
next();
break;
case 37:
prev();
break
}
});
function next() {
if(current<animals.length-1) {
current++;
var $animal = animals.eq(current);
if($animal.is('[id^="a:"]')) {
$animal.attr('class', 'presto');
} else if($animal.is('[id^="ac:"]')) {
$animal.children().each(function(index){
var $elem = $(this);
setTimeout(function() {
$elem.attr('class', 'presto');
}, index*100);
});
}
centerElement($animal.closest('[id^="center"]').get(0) || $animal);
}
}
function prev() {
if(current>=0) {
var $animal = animals.eq(current);
if($animal.is('[id^="a:"]')) {
$animal.attr('class', 'presto presto-hidden');
} else if($animal.is('[id^="ac:"]')) {
$animal.children().each(function(index){
var $elem = $(this);
setTimeout(function() {
$elem.attr('class', 'presto presto-hidden');
}, index*100);
});
}
current--;
if(current>=0) {
centerElement(animals.eq(current).closest('[id^="center"]').get(0) || $animal);
}
}
}
function centerElement(element) {
var half = $(element).get(0).getBBox().height/2 * $('svg').width()/1600;
seeky = $(element).offset().top + half;
}
function game_loop() {
if(seeky) {
var seektop = seeky - $(window).height()/2;
if(Math.abs($(window).scrollTop() - seektop) < 5) {
seeky = null;
} else {
window.scrollTo(0, ($(window).scrollTop()*0.8 + seektop*0.2));
}
}
window.requestAnimationFrame(game_loop);
};
game_loop();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment