Matthew Crist matthewcrist
matthewcrist
/ gist:5397433
Created
April 16, 2013 16:36
— forked from anonymous/gist:5396725
This file contains hidden or 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
| --- | |
| title: Images | |
| layout: guide | |
| --- | |
| <h1>Images</h1> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero erat, adipiscing non pellentesque eu, rhoncus et metus. Nunc bibendum elementum ante sed pharetra. Morbi varius egestas diam, sit amet commodo nunc malesuada sed. Quisque et commodo mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero erat, adipiscing non pellentesque eu, rhoncus et metus. Nunc bibendum elementum ante sed pharetra. Morbi varius egestas diam, sit amet commodo nunc malesuada sed. Quisque et commodo mauris.</p> | |
| <figure class="hero-image"> |
matthewcrist
/ gist:5237803
Created
March 25, 2013 15:10
Add this to your application.js for the asset pipeline
This file contains hidden or 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
| //= require turbolinks |
This file contains hidden or 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
| # Turbolinks => https://github.com/rails/turbolinks | |
| gem 'turbolinks' |
matthewcrist
/ index.html
Created
September 11, 2012 19:18
Responsive vertical/horizontal image centering with CSS only
This file contains hidden or 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
| <img width="500" height="335" title="" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAFPCAIAAAA0uatrAAA4ZElEQVR42u2d919TW9aH5++aO6YSEnrvqAgCAiIiWLCigiJ2EVBAAbGLV7BgRzqKihQBUXpNIYE0Zub96V05x8twlRIgQHLyzef53GGQkpwcnr322muv/Y/JySkAAAAc4x+4BAAAALkDAACA3AEAAEDuAAAAIHcAAACQOwAAQO4AAAAgdwAAAJA7AAAAyB0AAADkDgAAkDuuAgAAQO4AAAAgdwAAAJA7AAAAyB0AAADkDgAAkDsAAADIHQAAAOQOAAAAcgcAAAC5AwAA5I6rAAAAkDsAAADIHQAAAOQOAAAAcgcAAAC5AwAA5A4AAAByBwAAALkDAACA3AEAAEDuAAAAuQMAAIDcAQAAQO4AAAAgdwAAAJA7AAAAyB0AACB3AAAAkDsAAADIHQAAAOQOAAAAcgcAAMgdAAAA5A4AAAByBwAAALkDAACA3AEAAEDuAAAAuQMAAIDcAQAAQO4AAAAgdwAAAJA7AABA7gAAACB3AAAAkDsAAADIHQAAAOQOAAAAcgcAAMgdAAAA5A4AAAByBwAAALkDAACA3AEAAHIHAAAAuQMAAIDcAQAAQO4AAAAgdwAAAJA7AABA7gAAACB3AAAAkDsAAADIHQAAAOQOAACQOwAAAMgdAAAA5A4AAAByBwAAALkDAACA3AEAAHIHAAAAuQMAAIDcAQAAQO4AAAAgdwAAgNwBAABA7gAAACB3AAAAkDsAAADIHQAAAOQOAACQOwAAAMgdAAAA5A4AAAByBwAAALkDAADkDgAAAHIHAAAAuQMAAIDcAQAAQO4AAAAgdwAAgNwBAABA7gAAACB3AAAAkDsAAADIHQCwUqamtOaDywW5AwBsgIkJ9fi4fFwuVypVC6NSTajVGu2U1mAw6vVGiB5yBwAsJ5rWanU6nUF |
This file contains hidden or 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
| .selector { | |
| background-repeat: no-repeat; | |
| background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAIAAAD2HxkiAAAD7GlDQ1BpY2MAAHjajZTPbxRlGMc/u/POrAk4B1MBi8GJP4CQQrZgkAZBd7vLtlDLZtti25iY7ezb3bHT2fGd2fIjPXHRG6h/gIocPJh4MsFfES7AQQMJQUNsSEw4lPgjRBIuhtTDTHcHaMX39Mzzfp/v9/s875OBzOdV33fTFsx6oaqU8tb4xKSVuUGaZ1hDN2uqduDnyuUhgKrvuzxy7v1MCuDa9pXv//OsqcnAhtQTQLMW2LOQOga6a/sqBOMWsOdo6IeQeRboUuMTk5DJAl31KC4AXVNRPA50qdFKP2RcwLQb1Rpk5oGeqUS+nogjDwB0laQnlWNblVLeKqvmtOPKhN3HXP/PM+u2lvU2AWuDmZFDwFZIHWuogUocf2JXiyPAi5C67If5CrAZUn+0ZsZywDZIPzWtDoxF+PSrJxqjbwLrIF1zwsHROH/Cmxo+HNWmz8w0D1VizGU76J8Enof0zYYcHIr8aNRkoQj0gLap0RqI+bWDwdxIcZnnRKN/OOLR1DvVg2WgG7T3VbNyOPKsnZFuqRLxaxf9sBx70BY9d3go4hSmDIojy/mwMToQ1YrdoRqNa8XktHNgMMbP+255KPImzqpWZSzGXK2qYiniEX9Lbyzm1DfUqoVDwA7Q93MkVUXSZAqJjcd9LCqUyGPho2gyjYNLCYmHROGknmQGZxVcGYmK4w6ijsRjEYWDvQomUrgdY5pivciKXSIr9oohsU/sEX1Y4jXxutgvCiIr+sTedm05oW9R53ab511aSCwqHCF/uru1taN3Ur3t2FdO3XmguvmIZ7nsJzkBAmbayO3J/i/Nf7ehw3FdnHvr2tpL8xx+3Hz1W/qifl2/pd/QFzoI/Vd9QV/Qb5DDxaWOZBaJg4ckSDhI |
This file contains hidden or 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
| selector { | |
| -webkit-transform: translate3d(0,0,0); | |
| } |
matthewcrist
/ breakpoint-example.html
Created
April 3, 2012 20:00
— forked from stonehippo/breakpoint-example.html
Targeting tablets with media queries, but not tripping those queries on the desktop
This file contains hidden or 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
| <!-- The breakpoint widths below are from a specific client project and probably should be moved to standard 320/460/768 breakpoints in other usage --> | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> | |
| <style> | |
| body {color: #333; background-color: #eee; font-family: 'Georgia';} | |
| .hidden { display: none; text-indent: 3em;} | |
| @media screen and (max-width: 653px) { |
This file contains hidden or 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
| @font-face { | |
| font-family: 'adelle'; | |
| src: url('adelle.eot'); | |
| src: url('adelle.eot?#iefix') format('embedded-opentype'), url('adelle.woff') format('woff'), url('adelle.ttf') format('truetype'), url('adelle.svg#Adelle') format('svg'); | |
| font-weight: 300; | |
| font-style: normal; | |
| } |
This file contains hidden or 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
| * { | |
| -webkit-box-sizing: border-box; /* Safari < 5.1, Chrome < 10 */ | |
| -moz-box-sizing: border-box; /* Firefox, other Gecko */ | |
| box-sizing: border-box; /* Opera/IE 8+/Safari5.1+/Chrome 10+ */ | |
| } |
This file contains hidden or 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
| -webkit-box-reflect | |
| -webkit-text-stroke | |
| -webkit-mask | |
| -webkit-text-size-adjust | |
| -webkit-tap-highlight-color | |
| -webkit-text-fill-color |