chrispydizzle

/**
  * Script used to scrape work items off of the Azure DevOPs sprint board to be used in Loop documents
  * To Execute: go to your teams sprint board in ADO, paste this script into the browser console and hit enter.
  * Note: The way ADO loads content is odd and you likely need to zoom all all the way out to view all items
  * or run this script multiple times and combine the results.
  * CP: Added some link magic and sorted by owner
**/

// Get item #, title, and href
const cardTitles = document.querySelectorAll('.taskboard-parent-cell .title');

chrispydizzle

animateMotion

A Pen by @BrawadaCom on CodePen.

License.

chrispydizzle

<div class='container'>
  <div class='madeby'>created by <a href='http://www.selftaughtjs.com' target='_blank'>Tobias Guse</a></div>
  <div class='sidebar'>
    <div class='navigation-elm'><span class='nav-text'><i class="fa fa-fw fa-area-chart"></i><span class='text-short'>Sales</span> <span class='text-long'>Dashboard</span></span>
    </div>
    <div class='sub-navigation-elm'>Product Performance</div>
    <div class='sub-navigation-elm'>Competitive Landscape</div>
    <div class='sub-navigation-elm'>Logistics Report</div>
    <div class='navigation-elm'><span class='nav-text'><i class="fa fa-fw fa-newspaper-o"></i><span class='text-short'>Campaign</span> <span class='text-long'>Overview</span></span>
    </div>

chrispydizzle

<div id="list">
  <ul>
    <li>
      <div class="avatar"></div><div class="lines"></div>
    </li>
    <li>
      <svg id="destroy" viewBox="0 0 500 124" height="124px" preserveAspectRatio="none">
                <path
       style="fill:#fff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m -1.0101525,-1.2589147 71.7208305,39.3959487 90.913732,-40.4061012 z"

chrispydizzle

Fully Responsive Expandable Grid Layout

Based on dribbble shot by Jim DeBrock https://dribbble.com/shots/2860300-Episode-Transition

A Pen by Ruslan Pivovarov on CodePen.

License.

chrispydizzle

<header>
  <h1>{ We're Coming }</h1>
  <h3>If you leave us your address we can contact you</h3>
</header>

<section class="container"> 
  <div class="wrapBox animated rollIn">
    <div class="box">
      <div class="thanks"><p>THANK YOU!</p></div>
      <form action="#">

chrispydizzle

<div id="compatibility">Swing Drop Flicker</div>

chrispydizzle

<main>
	<h1>Infinite Scroll + Pagination Experiment</h1>
	<p>After a poll by <a href="https://twitter.com/smashingmag">@smashingmag</a>, <a href="https://twitter.com/TimSeverien/status/693186708494536704">I got the idea to combine pagination and infinite scroll.</a> The former gives the user control, but needs more effort. The latter lacks control, but requires no special interaction.</p>
	
	<div class="article-list" id="article-list"></div>
	<ul class="article-list__pagination article-list__pagination--inactive" id="article-list-pagination"></ul>
</main>

chrispydizzle

<ul class="rolldown-list" id="myList">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
</ul> 

chrispydizzle

Cubic Wave

Inspired by https://dribbble.com/shots/2938370-Cube-flow

A Pen by Stix on CodePen.

License.