Skip to content

Commit

Permalink
Added lots of patterns
Browse files Browse the repository at this point in the history
  • Loading branch information
@bradfrost
bradfrost committed Aug 28, 2012
1 parent 3dfe052 commit 3d0a0ea
Show file tree
Hide file tree
Showing 3 changed files with 91 additions and 14 deletions.
11 changes: 8 additions & 3 deletions patterns.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,14 +44,14 @@ <h3>Off Canvas</h3>
<h3>Source-Order Shift</h3>
<ul>
<li><a href="patterns/source-table-cell.html">Table Cell</a></li>
<li><a href="#">Flexbox</a></li>
<li><a href="#">AppendAround</a></li>
<li><a href="#" class="inactive">Flexbox</a></li>
<li><a href="#" class="inactive">AppendAround</a></li>
</ul>
</section>
<section id="lists">
<h3>Lists</h3>
<ul>
<li><a href="patterns/">Text List</a></li>
<li><a href="#" class="inactive">Text List</a></li>
<li><a href="patterns/list-img-text.html">List with Thumbnails</a></li>
<li><a href="patterns/list-img-text-2.html">List with Thumbnails 2</a></li>
<li><a href="patterns/list-img-summary.html">List with Thumbnails and Summary</a></li>
Expand All @@ -61,6 +61,11 @@ <h3>Lists</h3>
<h3>Tables</h3>
<ul>
<li><a href="#" class="inactive">Basic Table</a></li>
<li><a href="#" class="inactive">Definition List to Table</a></li>
<li><a href="#" class="inactive">Pie Chart to Table</a></li>
<li><a href="#" class="inactive">Priority Columns</a></li>
<li><a href="#" class="inactive">Link to Full-Table</a></li>
<li><a href="#" class="inactive">Horizontal Overflow</a></li>
</ul>
</section>
<section id="grid-block">
Expand Down
88 changes: 78 additions & 10 deletions resources.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ <h3>Getting Started</h3>
<li class="featured"><a href="http://www.alistapart.com/articles/responsive-web-design">Responsive Web Design</a></li>
<li class="featured"><a href="http://www.abookapart.com/products/responsive-web-design">Responsive Web Design Book</a></li>
<li><a href="http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/">RWD: What It Is and How to Use It</a></li>
<li><a href="http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/">Beginner's Guide to Responsive Web Design</a></li>
<li><a href="http://en.wikipedia.org/wiki/Responsive_Web_Design">Responsive Web Design on Wikipedia</a></li>
</ul>
</section>
<section id="concepts">
Expand All @@ -31,6 +33,7 @@ <h3>Broader Concepts</h3>
<li><a href="http://blog.programmableweb.com/2009/10/13/cope-create-once-publish-everywhere/">COPE: Create Once, Publish Everywhere</a></li>
<li><a href="http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/">Mobile-First Responsive Web Design</a></li>
<li><a href="http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/">RWD: Missing the Point</a></li>
<li><a href="http://blog.responsivenews.co.uk/post/12642980168/axes-of-responsive-design">Axes of responsive design</a></li>
</ul>
</section>
<section id="approach">
Expand All @@ -40,6 +43,9 @@ <h3>Approach</h3>
<li class="featured"><a href="http://mobiforge.com/starting/story/mobile-web-content-adaptation-techniques">Mobile web content adaptation techniques</a></li>
<li class="featured"><a href="http://stephanierieger.com/responsiveness-is-a-characteristic/">Responsiveness Is a Charactersic</a></li>
<li><a href="http://developers.facebook.com/html5/blog/post/6/">Device Experiences & Responsive Design</a></li>
<li><a href="http://dev.opera.com/articles/view/responsive-web-design-a-project-management-perspective/">Responsive web design: a project-management perspective</a></li>
<li><a href="http://uxmag.com/articles/a-primer-on-responsive-design">A Primer on Responsive Design</a></li>
<li><a href="http://mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website-presidential-smackdown/">Separate Mobile Website Vs. Responsive Website: Presidential Smackdown Edition</a></li>
</ul>
</section>
<section id="process">
Expand All @@ -51,12 +57,20 @@ <h3>Process</h3>
<li class="featured"><a href="http://www.slideshare.net/yiibu/pragmatic-responsive-design">Pragmatic Responsive Design</a></li>
<li><a href="http://viljamis.com/blog/2012/responsive-workflow/">Responsive Workflow</a></li>
<li><a href="http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/">Design Process in the Responsive Age</a></li>
<li><a href="http://mobile.smashingmagazine.com/2012/06/07/sketching-a-new-mobile-web/">Sketching A New Mobile Web</a></li>
</ul>
</section>
<section id="budget">
<h3>Budget</h3>
<ul>
<li class="featured"><a href="http://bradfrostweb.com/blog/web/how-much-does-a-responsive-web-design-cost/">How Much Does A Responsive Web Design Cost?</a></li>
</ul>
</section>
</div>
<div id="design" class="grid">

<div id="design-tools" class="grid">
<h2>Design Tools</h2>
<section id="inspiration">
<section id="galleries">
<h3>Galleries</h3>
<ul>
<li class="featured"><a href="http://mediaqueri.es/">Mediaqueri.es</a></li>
Expand All @@ -65,8 +79,22 @@ <h3>Galleries</h3>
<li><a href="http://responsivedeck.com/">Responsive Deck</a></li>
<li><a href="http://blog.lib.uiowa.edu/hardinmd/2012/05/03/responsive-design-sites-higher-ed-libraries-notables/">Responsive Design Sites: Higher Ed, Libraries, Notables</a></li>
</section>
<section id="sketching">
<h3>Sketching</h3>
<ul>
<li class="featured"><a href="http://mediaqueri.es/">Responsive Design Sketchbook</a></li>
<li class="featured"><a href="http://twitter.com/rwd">Responsive Web Design Sketch Sheets</a></li>
<li><a href="http://weedygarden.net/highered-rwd-directory/">HigherEd RWD Directory</a></li>
</section>
<section id="psd">
<h3>PSDs</h3>
<ul>
<li class="featured"><a href="http://elliotjaystocks.com/blog/a-better-photoshop-grid-for-responsive-web-design/">A better Photoshop grid for responsive web design</a></li>
<li class="featured"><a href="http://www.blazrobar.com/2012/free-psd-files-and-ui-kits/stripes-responsive-web-design-psd/">Stripes - Responsive Web Design PSD</a></li>
</ul>
</section>
<section id="frameworks">
<h3>Frameworks/Boilerplates</h3>
<h3>Frameworks/Boilerplates/Prototyping</h3>
<ul>
<li class="featured"><a href="http://twitter.github.com/bootstrap/">Twitter Bootstrap</a></li>
<li class="featured"><a href="http://stuffandnonsense.co.uk/projects/320andup/">320 And Up</a></li>
Expand All @@ -76,25 +104,65 @@ <h3>Frameworks/Boilerplates</h3>
<li><a href="http://fbg.40horse.com/"></a></li>
<li><a href="http://html5boilerplate.com/mobile">Mobile Boilerplate</a></li>
</section>
<section id="media queries">
<h3>Media Queries</h3>
<ul>
<li class="featured"><a href="http://adactio.com/journal/5425/">Fanfare for the Common Breakpoint</a></li>
<li class="featured"><a href="http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/">The EMs have it: Proportional Media Queries FTW!</a></li>
</ul>
</section>
<section id="style-guide">
<h3>Style Guides</h3>
<ul>
<li><a href="http://www.starbucks.com/static/reference/styleguide/">Starbucks Style Guide</a></li>
</ul>
</section>
</div>
<div id="layout" class="grid">
<h2>Layout</h2>
<section id="fluid-grids">
<h3>Fluid Grids</h3>
<ul>
<li class="featured"><a href="http://www.alistapart.com/articles/fluidgrids/">Fluid Grids</a></li>
<li class="featured"><a href="http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-part-5">Five simple steps to designing grid systems &mdash; Part 5</a></li>
<li class="featured"><a href="http://www.flexiblewebbook.com/">Flexible Web Design &mdash; Creating Liquid and Elastic Layouts with CSS</a></li>
<li><a href="http://builtbyboon.com/blog/proportional-grids">Proportional Grids</a></li>
</ul>
</section>
<section id="grid-tools">
<h3>Grid Tools</h3>
<ul>
<li><a href="">GridSet</a></li>
<li><a href="">Gridless Boilerplate</a></li>
<li><a href="">Golden Grid System</a></li>
<li><a href="">Gridpak</a></li>
<li><a href="">Responsive Grid System</a></li>
<li><a href="">Fluid Baseline Grid</a></li>
<li><a href="">Responsify</a></li>
<li><a href="">Columnal</a></li>
<li><a href="">Semantic Grid System</a></li>
<li><a href="">Susy, Responsive grids for Compass</a></li>
<li><a href="">Gumby</a></li>
<li><a href="">1140 CSS Grid</a></li>
<li><a href="">Amazium</a></li>
<li><a href="">Inuit CSS</a></li>
<li><a href="">BluCSS</a></li>
<li><a href="">Singularity</a></li>
</ul>
</section>
<section id="calculators">
<h3>Calculators</h3>
<ul>
<li><a href="">RWD Calc</a></li>
<li><a href="">Fluid Grids</a></li>
<li><a href="">RatioStrong</a></li>
<li><a href="">PixelPerc</a></li>
<li><a href="">PixeltoEm</a></li>
<li><a href="">Em Calculator</a></li>
</ul>
</section>
</div>
<section id="media queries">
<h3>Media Queries</h3>
<ul>
<li class="featured"><a href="http://adactio.com/journal/5425/">Fanfare for the Common Breakpoint</a></li>
<li class="featured"><a href="http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/">The EMs have it: Proportional Media Queries FTW!</a></li>
</ul>
</section>

<section id="layout">
<h3>Layout</h3>
<ul>
Expand Down
6 changes: 5 additions & 1 deletion tips.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,12 @@
<div role="main">
<h1>Responsive Considerations</h1>
<h2 id="strategy">Strategy</h2>
<h3 id="approach">Approach</h3>
<h3 id="">Getting Started</h3>
<h4 id="understand-what-responsive-design-is-and-how-it-can-help-you.">Understand what responsive design is and how it can help you.</h4>

<h3 id="landscape">Landscape</h3>
<h3 id="approach">Approach</h3>

<h4 id="understand-what-responsive-design-is-and-how-it-can-help-you.">Understand the business advantages of responsive design.</h4>
<h4 id="understand-your-options">Understand your options</h4>
<h4 id="recognize-that-responsive-design-is-a-subset-of-adaptive-design">Recognize that responsive design is a subset of adaptive design</h4>
Expand Down

0 comments on commit 3d0a0ea

Please sign in to comment.