You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<ahref="https://github.com/ttscoff/cheaters" id="view-on-github" class="button"><span>View on GitHub</span></a>
29
-
</section>
21
+
<h1id="project_title">Cheaters</h1>
22
+
<h2id="project_tagline">Customizable cheat sheet system for OS X</h2>
30
23
31
-
<hr>
24
+
<sectionid="downloads">
25
+
<aclass="zip_download_link" href="https://github.com/ttscoff/cheaters/zipball/master">Download this project as a .zip file</a>
26
+
<aclass="tar_download_link" href="https://github.com/ttscoff/cheaters/tarball/master">Download this project as a tar.gz file</a>
27
+
</section>
28
+
</header>
29
+
</div>
32
30
33
-
<sectionid="main_content">
34
-
<p>Support Cheaters by contributing to my <ahref="https://www.gittip.com/ttscoff/">GitTip fund</a> or <ahref="http://brettterpstra.com/donate/">making a donation</a>.</p>
31
+
<!-- MAIN CONTENT -->
32
+
<divid="main_content_wrap" class="outer">
33
+
<sectionid="main_content" class="inner">
34
+
<p>Support Cheaters by contributing to my <ahref="https://www.gittip.com/ttscoff/">GitTip fund</a> or <ahref="http://brettterpstra.com/donate/">making a donation</a>.</p>
<p>First and foremost, this is a total ripoff of an idea by Gabe Weatherhead <ahref="http://www.macdrifter.com/2012/02/markdown-cheat-sheets-and-marked/">over at Macdrifter</a>. I just expanded on the idea a little bit.</p>
39
39
40
-
<p>Cheaters is a collection of HTML-based cheat sheets meant for display in an Automator-based popup browser which can float on your screen while you work in other apps (<ahref="http://ttscoff.github.io/cheaters/cheat.html">demo the web version</a>). Most of the time I create <ahref="http://smilesoftware.com/TextExpander/">TextExpander</a> snippets for commonly-forgotten formats, but having an overall reference can be handy. I've included a collection of hastily made sheets as examples for you to create your own. Sheets are easy to create with minimal markup and are, for the most part, automatically styled and made to fit in with Cheaters overall aesthetic.</p>
40
+
<p>Cheaters is a collection of HTML-based cheat sheets meant for display in an Automator-based popup browser which can float on your screen while you work in other apps (<ahref="http://ttscoff.github.io/cheaters/cheaters/cheat.html">demo the web version</a>). Most of the time I create <ahref="http://smilesoftware.com/TextExpander/">TextExpander</a> snippets for commonly-forgotten formats, but having an overall reference can be handy. I've included a collection of hastily made sheets as examples for you to create your own. Sheets are easy to create with minimal markup and are, for the most part, automatically styled and made to fit in with Cheaters overall aesthetic.</p>
<p>You can use the instructions below if you're a cheapskate, but for $5 you can use <ahref="http://fluidapp.com/">Fluid</a> and create a menu bar app that's much more full-featured and usable than the Automator action. Seriously. Do it.</p>
<p>As of a recent update, Cheaters can now handle linking directly to a specific cheat sheet using url hashes. You can use a zero-index number to link to a page if you know the order (index.html#3 to link to the fourth item), but because the order is configurable and subject to change, it also supports name matching. For example, if you want to link the Siri cheat sheet directly, you can use <code>[your_url_or_path]/index.html#siri</code>.</p>
65
72
66
73
<p>The hash-matching is case-insensitive and will go to the first menu item whose text matches the hash (in whole or in part, whitespace is ignored). This means that if you have a menu item for "CSS 3 Selectors" followed by "CSS Animation," <code>#css</code> will go to "CSS 3 Selectors." To target "CSS Animation," you'd want a url like <code>#cssanim</code> or the full <code>#cssanimation</code>.</p>
67
74
68
75
<p>This is primarily geared toward building more complex workflows using tools like Alfred 2.</p>
<p>If you know a little HTML, adding and editing sheets is easy. Take a look at the existing documents in the included <strong>cheatsheets</strong> folder. The markup varies but a lot of cases are already handled by the CSS. I stole most of the included cheat sheets from existing web sources (credits at the bottom of each). Some of them I just ripped the HTML out of directly, some I <ahref="http://markdownrules.com/">converted</a><ahref="http://brettterpstra.com/introducing-gather-a-cocoa-markdownifier/">to Markdown</a> and then to HTML to get cleaner output. The HTML in the cheat sheets does not need a head, body or containing div, just the markup that goes inside the container in the index.html file.</p>
<p>The index file for Cheaters loads each cheat sheet dynamically into its own markup (using jQuery). To add a new sheet to the menu (or remove/rearrange existing sheets), just edit the unordered list in the #nav ul. The order of the list is the order of the menu items, and the first one in the list is loaded by default. If you only ever want one cheat sheet, just make it the only one in the list. New cheat sheets should be stored as HTML files in the <strong>cheatsheets</strong> folder, and referenced from the links in the #nav list with the relative path <code>cheatsheets/filename.html</code>.</p>
<p><imgsrc="http://brettterpstra.com/uploads/2012/03/Cheat-Sheets-narrow-high-contrast.jpg" alt="Narrow, high contrast"></p>
81
91
82
92
<p>If you run into markup that isn't handled by the CSS, just wrap it in a div with a unique ID and add specific styles in the main CSS file to override or augment default styles. You can, of course, completely replace that stylesheet if you want an entirely different look. I promise not to be offended.</p>
83
93
84
94
<p>There's also a contrast icon in the upper right, which you can use to flip between light-on-dark and dark-on-light. You can make this change permanent by editing the body class in index.html. Adding a class of "inverted" will set it to be light-on-dark by default; without that class it's dark-on-light automatically.</p>
<p><imgsrc="http://brettterpstra.com/uploads/2012/03/Cheat-Sheets-Wide-Image.jpg" alt="Cheat Sheets with image"></p>
89
100
90
101
<p>If you find a PDF cheat sheet that's ideal for this type of display, you'll need to convert it to an image (gif, jpg or png) first. Make it large, between 800px and 1024px wide. Cheaters will automatically scale it to your browser width, and when your browser width gets small enough that the image would be unreadable, it shows it full size and lets you scroll around within the viewport. See the CSS3 cheat sheet markup for an example of using an image; it's just an image tag in an html file. Easy as pie.</p>
91
102
92
103
<p>If you create some great cheat sheets, fork this and send a pull request. Just <ahref="http://brettterpstra.com/contact">let me know</a> if you need a hand!</p>
93
-
</section>
104
+
</section>
105
+
</div>
94
106
95
-
<footer>
96
-
Cheaters is maintained by <ahref="https://github.com/ttscoff">ttscoff</a><br>
97
-
This page was generated by <ahref="http://pages.github.com">GitHub Pages</a>. Tactile theme by <ahref="http://twitter.com/jasonlong">Jason Long</a>.
98
-
</footer>
107
+
<!-- FOOTER -->
108
+
<divid="footer_wrap" class="outer">
109
+
<footerclass="inner">
110
+
<pclass="copyright">Cheaters maintained by <ahref="https://github.com/ttscoff">ttscoff</a></p>
111
+
<p>Published with <ahref="http://pages.github.com">GitHub Pages</a></p>
0 commit comments