The DC Metro lines map drawn in SVG and animated with SVG Line Animation. Inspired by https://css-tricks.com/svg-line-animation-works/ and https://codepen.io/juliangarnier/pen/ZeEpgd
A Pen by Michael Gilbertson on CodePen.
tarek hariri linebreaker
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link rel="import" href="../core-icon-button/core-icon-button.html"> | |
| <link rel="import" href="../core-item/core-item.html"> | |
| <polymer-element name="my-element"> | |
| <template> | |
| <style> | |
| :host { | |
| position: absolute; | |
| width: 240px; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link rel="import" href="../paper-ripple/paper-ripple.html"> | |
| <link rel="import" href="../paper-button/paper-button.html"> | |
| <link rel="import" href="../core-ajax/core-ajax.html"> | |
| <link rel="import" href="../topeka-elements/category-icons.html"> | |
| <link rel="import" href="../core-icon/core-icon.html"> | |
| <polymer-element name="gdg-card"> | |
| <template> | |
| <style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="wrapper"> <!-- PAGE LEVEL / CONTAINER TYPE - everything goes under here --> | |
| <div class="container"> <!-- CONTAINER TYPE - everything goes into this --> | |
| <div class="hldr"> <!-- SCOPEY CONTAINER TYPE - top logo type graphic goes under this --> | |
| <div class="graphic"> <!-- SPECIFIC CONTAINER TYPE - graphics object held here--> | |
| </div> | |
| </div> | |
| <span class="spacer--vertical_30px"> <!-- SPACER - Vertical --> | |
| </span> | |
| <div class="input-container"> <!----> | |
| <span class="input-label">username</span> <!----> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container grids"> | |
| <header> | |
| <h1>Responsive Grid </h1> | |
| <p>A simple responsive grid system, mobile first design. Resize your browser to test the grids.</p> | |
| </header> | |
| <div class="row"> | |
| <div class="col12">column 12</div> | |
| </div> | |
| <div class="row"> | |
| <div class="col11">column 11</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .lt | |
| .rt | |
| .wrap | |
| .cube | |
| .face.road | |
| - 10.times do | |
| .face.building1.left | |
| - 10.times do | |
| .face.building1.right | |
| - 10.times do |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>Flexbox responsive grid</title> | |
| </head> | |
| <body> | |
| <div class="wrapper"> | |
| <p>Responsive grid with Flexbox</p> | |
| <h1>Basic Grid</h1> | |
| <p></p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="full-wrapper"> | |
| <div class="content-wrapper"> | |
| <div class="headline"> | |
| <small>the new</small><br/> | |
| GDG™<br/> | |
| website <br/> | |
| will be<br/> | |
| ready<br/> | |
| <strong>very</strong><br/> | |
| soon<br/> |
linebreaker
/ dc-metro-lines-map-animated-svg-path.markdown
Created
October 12, 2017 22:18
DC Metro Lines Map (Animated SVG Path)
linebreaker
/ collection-of-animated-loaders.markdown
Created
October 12, 2017 22:26
Collection of animated loaders
Inspired by this article, except I've tried to create one element (no cheating with pseudos) versions. Not meant to reproduce the loaders in the article exactly and may have poorer browser support.
Basic CMS for creating a definition and then populating it with content
A Pen by Dominic Watson on CodePen.
OlderNewer