Skip to content

Commit

Permalink
Merge pull request #205 from buzzfeed/SOLID-172-superposter-sandbox-demo
Browse files Browse the repository at this point in the history 
Solid 172 superposter sandbox demo
  • Loading branch information
@emilybrick
emilybrick committed Aug 11, 2015
2 parents 46ed263 + 6509eef commit d0b64d7
Show file tree
Hide file tree
Showing 6 changed files with 188 additions and 340 deletions.
3 changes: 2 additions & 1 deletion sandbox/prototypes/example_prototype.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,11 @@
<head>
<title>Sandbox Example</title>
<link rel="stylesheet" type="text/css" href="/lib/solid.css">
<!-- <link rel="stylesheet" type="text/css" href="/lib/prototypes/your-demo.css"> -->
</head>
<body>
<div class="col xs-col-12 xs-p3">
<h1>An example prototype!</h1>
<h1 class="xs-text-center">An example prototype!</h1>
</div>
</body>
</html>
11 changes: 0 additions & 11 deletions sandbox/prototypes/example_prototype2.ejs
View file

This file was deleted.

175 changes: 175 additions & 0 deletions sandbox/prototypes/news.ejs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,175 @@
<!DOCTYPE html>
<html>
<head>
<title>News v1</title>
<link rel="stylesheet" type="text/css" href="/lib/solid.css">
<link rel="stylesheet" type="text/css" href="/lib/prototypes/news.css">
</head>
<body class="xs-prototype-news xs-mx-auto xs-py4">

<div class="xs-prototype-news xs-xs-mx-auto xs-p4">

<div class="clearfix">
<div class="col xs-col-7 xs-pr3">

<img class="full-width" src="http://ak-hdl.buzzfed.com/static/2015-05/4/12/enhanced/webdr10/enhanced-buzz-wide-26085-1430757123-15.jpg"/>
<label class="caps text-red text-6 bold">ISIS</label>
<h1 class="slab">Texas Gunman Identified</h1>

<div class="col xs-col-12 xs-py1">
<div class="col xs-col-4 ">
<div class="xs-float-left xs-pr1"><img class="byline__avatar-size circle" src="http://s3-ak.buzzfeed.com/static/2014-08/4/11/user_images/webdr02/claudiakoerner-402-1407164516-2_large.jpg"></div>
<div class="col xs-col-8">
<div class="col xs-col-12 text-6 bold"><a href="#">By Claudia Samaha</a></div>
<div class="col xs-col-12 text-6 text-gray-lightest">BuzzFeed News Reporter</div>
</div>
</div>

<div class="col xs-col-7">
<div class="xs-float-left xs-pr1"><img class="byline__map-size" src="http://s3-ak.buzzfeed.com/static/2015-03/17/10/enhanced/webdr04/dateline-31102-1426604099-34.png"></div>
<div class="col xs-col-7">
<div class="col xs-col-7 text-6 text-gray-lightest">Reporting from Garland, Texas</div>
</div>
</div>
</div>

<p class="xs-pb4"><span class="text-gray-lightest"> 18 hours ago </span> Authorities shot and killed two gunmen Sunday who shot and wounded a safety officer outside a Garland, Texas, contest for people drawing the xs-prophet Muhammad.</p>

</div>

<div class="col xs-col-2 xs-pr3">

<div class="xs-mb1"><label class="caps text-red text-6 bold">HAPPENING NOW</label></div>
<ul class="text-5 list-unstyled">
<li class="xs-mb3"><span class="bold">ISIS</span> has claimed responsibility for the attack at a Muhammad cartoon event in Garland, Texas</li>
<li class="xs-mb3"><span class="bold">Two Republican candidates</span> joined the 2016 presidential race yesterday, with a third scheduled to announce today</li>
<li class="xs-mb3"><span class="bold">The U.S. Department of Justice</span> has launched a review of its secretive cell phone surveillance xs-program</li>
<li class="xs-mb3">And, check out the looks from the <span class="bold">2015 Met Gala red carpet</span></li>
</ul>
<p class="text-5 text-gray-lightest xs-pb1">Last Updated 2 hours ago</p>
<hr />

<div class="bold text-5 xs-py1">New York, NY <a href="#" class="text-blue xs-float-right">Edit</a></div>
<h1 class="xs-float-left">64&deg</h1>

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"width="70px" height="70px" style="position:relative; top:-11;" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="xs-preserve">
<path fill-rule="evenodd" clip-rule="evenodd" d="M79.941,43.641h-4c-1.104,0-2-0.895-2-2c0-1.104,0.896-1.998,2-1.998h4
c1.104,0,2,0.895,2,1.998C81.941,42.746,81.045,43.641,79.941,43.641z M72.084,30.329c-0.781,0.781-2.047,0.781-2.828,0
c-0.781-0.78-0.781-2.047,0-2.827l2.828-2.828c0.781-0.781,2.047-0.781,2.828,0c0.781,0.78,0.781,2.047,0,2.828L72.084,30.329z
M69.137,45.936L69.137,45.936c1.749,2.086,2.806,4.77,2.806,7.705c0,6.625-5.372,11.998-11.999,11.998c-2.775,0-12.801,0-15.998,0
c-8.835,0-15.998-7.162-15.998-15.998s7.163-15.998,15.998-15.998c1.572,0,3.09,0.232,4.523,0.654
c2.195-2.827,5.618-4.654,9.475-4.654c6.627,0,11.999,5.373,11.999,11.998C69.942,43.156,69.649,44.602,69.137,45.936z
M31.947,49.641c0,6.627,5.371,11.998,11.998,11.998c3.616,0,12.979,0,15.998,0c4.418,0,7.999-3.582,7.999-7.998
c0-4.418-3.581-8-7.999-8c-1.6,0-3.083,0.482-4.333,1.291c-1.231-5.316-5.974-9.289-11.665-9.289
C37.318,37.643,31.947,43.014,31.947,49.641z M57.943,33.643c-2.212,0-4.215,0.898-5.662,2.349c2.34,1.436,4.285,3.453,5.629,5.854
c0.664-0.113,1.337-0.205,2.033-0.205c2.125,0,4.119,0.559,5.85,1.527l0,0c0.096-0.494,0.15-1.004,0.15-1.527
C65.943,37.225,62.361,33.643,57.943,33.643z M57.943,25.643c-1.104,0-1.999-0.895-1.999-1.999v-3.999c0-1.105,0.896-2,1.999-2
c1.105,0,2,0.895,2,2v3.999C59.943,24.749,59.049,25.643,57.943,25.643z M43.803,30.329l-2.827-2.827
c-0.781-0.781-0.781-2.048,0-2.828c0.78-0.781,2.047-0.781,2.827,0l2.828,2.828c0.781,0.78,0.781,2.047,0,2.827
C45.851,31.11,44.584,31.11,43.803,30.329z"/>
</svg>

</div>

<div class="col xs-col-3">

<div class="xs-pb3">
<div class="xs-mb1"><label class="caps text-red text-6 bold">FEATURED</label></div>
<img class="full-width" src="http://s3-ak.buzzfeed.com/static/2015-04/21/11/enhanced/webdr01/longform-original-25408-1429628458-11.jpg"/>
<h2 class="slab xs-pt1">These 10 Questions Can Mean Life Behind Bars</h2>
<div class="col xs-col-12 xs-py1">
<div class="xs-float-left xs-pr1"><img class="byline__avatar-size circle" src="http://s3-ak.buzzfeed.com/static/2015-02/3/17/user_images/webdr10/peteraldhous-32049-1423002911-5_large.jpg"></div>
<div class="col xs-col-7">
<div class="col xs-col-12 text-6 bold"><a href="#">By Peter Samaha</a></div>
<div class="col xs-col-12 text-6 text-gray-lightest">BuzzFeed Staff</div>
</div>
</div>
<p class="text-5"><span class="text-gray-lightest">2 hours ago </span> A short checklist called the Static-99 weighs facts about a sex offender’s past in order to xs-predict the likelihood of future crimes.</p>
</div>

<div class="col xs-col-12 xs-py1">
<div class="col xs-col-4 xs-pr1"><img class="fit" src="http://ak-hdl.buzzfed.com/static/2015-04/30/18/enhanced/webdr09/longform-original-14469-1430432982-8.jpg"></div>
<div class="col xs-col-8">
<h5 class="col xs-col-12 slab">Wax Is Weed’s Next Big Thing And No One Knows If It’s Safe</h5>
<h6 class="col xs-col-12 bold xs-pt1"><a href="#">By Amanda Chicago Lewis</a></h6>
</div>
</div>
<div class="col xs-col-12 xs-py1">
<div class="col xs-col-4 xs-pr1"><img class="fit" src="http://ak-hdl.buzzfed.com/static/2015-04/24/18/enhanced/webdr08/longform-31455-1429915344-1.jpg"></div>
<div class="col xs-col-8">
<h5 class="col xs-col-12 slab">Coming Out As Gay In Elementary School</h5>
<h6 class="col xs-col-12 bold xs-pt1"><a href="#">By Shannon Keating</a></h6>
</div>
</div>

</div>
</div> <!-- end clearfix for top part -->

<div class="xs-col-7">
<div class="xs-pb1"><label class="caps text-red text-6 bold">Top Stories</label></div>
</div>

<div class="col xs-col-5 xs-pr3">

<div class="col xs-col-12 xs-pb3">
<div class="col xs-col-8">
<h2 class="slab">ISIS Claims Responsibility For Texas Attack</h2>
<h6 class="bold xs-py1"><a href="#">By Shannon Keating </a><span class="text-gray-lightest">| 2 hours ago</span> </h6>
<p class="text-5">ISIS supporters claimed responsibility Tuesday for the Sunday's attack at a Muhammad Drawing Contest in Garland, Texas, according to multiple reports.</p>
</div>
<div class="xs-float-right xs-col-4 xs-pl2"><img class="fit" src="http://ak-hdl.buzzfed.com/static/2015-05/4/16/enhanced/webdr01/enhanced-buzz-wide-4474-1430771849-7.jpg"></div>
</div>

<div class="col xs-col-12 xs-pb3">
<div class="col xs-col-8">
<h2 class="slab">Mike Huckabee Officially Enters 2016 Race</h2>
<h6 class="bold xs-py1"><a href="#">By Shannon Keating </a><span class="text-gray-lightest">| 2 hours ago</span> </h6>
<p class="text-5">A short checklist called the Static-99 weighs facts about a sex offender’s past in order to xs-predict the likelihood of future crimes.</p>
</div>
<div class="xs-float-right xs-col-4 xs-pl2"><img class="fit" src="http://ak-hdl.buzzfed.com/static/2015-05/5/0/enhanced/webdr09/enhanced-6366-1430799053-6.jpg"></div>
</div>

<div class="col xs-col-12 xs-pb3">
<div class="col xs-col-8">
<h2 class="slab">This Is The Warning The DNC Is xs-presenting To Democrats About The Koch-Funded Latino Group</h2>
<h6 class="bold xs-py1"><a href="#">By Shannon Keating </a><span class="text-gray-lightest">| 2 hours ago</span> </h6>
<p class="text-5">Democrats and liberal donors have been sounding the alarm about the LIBRE Initiative.</p>
</div>
<div class="xs-float-right xs-col-4 xs-pl2"><img class="fit" src="http://ak-hdl.buzzfed.com/static/2015-05/4/14/enhanced/webdr04/enhanced-27599-1430765788-1.png"></div>
</div>
</div>

<div class="col xs-col-4 xs-pr3">
<div class="col xs-col-12 xs-pb3">
<div class="col xs-col-9">
<h5 class="slab">ISIS Claims Responsibility For Texas Attack</h5>
<h6 class="bold xs-py1"><a href="#">By Shannon Keating </a><span class="text-gray-lightest">| 2 hours ago</span> </h6>
</div>
<div class="xs-float-right xs-col-3 xs-pl2"><img class="fit" src="http://ak-hdl.buzzfed.com/static/2015-05/4/16/enhanced/webdr01/enhanced-buzz-wide-4474-1430771849-7.jpg"></div>
<p class="col xs-col-12 text-5">ISIS supporters claimed responsibility Tuesday for the Sunday's attack at a Muhammad Drawing Contest in Garland, Texas, according to multiple reports.</p>
</div>
<div class="col xs-col-12 xs-pb3">
<div class="col xs-col-9">
<h5 class="slab">Mike Huckabee Officially Enters 2016 Race</h5>
<h6 class="bold xs-py1"><a href="#">By Shannon Keating </a><span class="text-gray-lightest">| 2 hours ago</span> </h6>
</div>
<div class="xs-float-right xs-col-3 xs-pl2"><img class="fit" src="http://ak-hdl.buzzfed.com/static/2015-05/5/0/enhanced/webdr09/enhanced-6366-1430799053-6.jpg"></div>
<p class="col xs-col-12 text-5">A short checklist called the Static-99 weighs facts about a sex offender’s past in order to xs-predict the likelihood of future crimes.</p>
</div>

<div class="col xs-col-12 xs-pb3">
<div class="col xs-col-9">
<h5 class="slab">This Is The Warning The DNC Is xs-presenting To Democrats About The Koch-Funded Latino Group</h5>
<h6 class="bold xs-py1"><a href="#">By Shannon Keating </a><span class="text-gray-lightest">| 2 hours ago</span> </h6>
</div>
<div class="xs-float-right xs-col-3 xs-pl2"><img class="fit" src="http://ak-hdl.buzzfed.com/static/2015-05/4/14/enhanced/webdr04/enhanced-27599-1430765788-1.png"></div>
<p class="col xs-col-12 text-5">Democrats and liberal donors have been sounding the alarm about the LIBRE Initiative.</p>
</div>
</div>

</div>

<scrixs-pt src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></scrixs-pt>
</body>
</html>

Loading

0 comments on commit d0b64d7

Please sign in to comment.