Skip to content

Instantly share code, notes, and snippets.

@FND

FND/main.css

Created May 15, 2009 10:22
Show Gist options
  • Save FND/112166 to your computer and use it in GitHub Desktop.
Save FND/112166 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
main.css
* {
margin: 0;
padding: 0;
}
html {
background-color: #000;
}
body {
width: 50%;
margin: 0 auto;
padding: 10px;
background-color: #FFF;
}
h1,
h2 {
margin-bottom: 10px;
}
h2 {
margin-top: 20px;
}
p,
ul {
margin-bottom: 0.5em;
}
ul {
margin-left: 1em;
}
ul ul {
margin-bottom: 0;
}
li p {
margin-bottom: 0.2em;
}
code {
color: #0A0;
}
fieldset,
legend {
border: 1px solid #AAA;
}
fieldset {
margin: 30px 10px 10px;
padding: 10px 5px 5px 10px;
}
legend,
.editor {
background-color: #EEE;
}
legend {
margin-top: -1em;
border-bottom: none;
padding: 1px 3px 0;
line-height: 1em;
}
fieldset textarea {
display: block;
width: 98%;
}
fieldset input {
width: 5em;
margin: 10px 10px 5px 0;
font-size: 1.1em;
}
Raw
twFile.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery.twFile</title>
<link rel="stylesheet" type="text/css" href="styles/main.css">
</head>
<body>
<h1>jquery.twFile</h1>
<p>
This <a href="http://jquery.com">jQuery</a> plugin provides access to
the local file system (for documents loaded from a <code>file://</code>
URI) to load and save file contents from the browser.
</p>
<p>
The code is based on <a href="http://tiddlywiki.com">TiddlyWiki</a>'s
self-saving capabilities.
</p>
<h2>Source</h2>
<p>
The source code is currently hosted in TiddlyWiki's
<a href="http://svn.tiddlywiki.org/Trunk/core/jquery/plugins/jquery.twFile.js">Subversion repository</a>.
</p>
<p>
<a href="http://groups.google.com/group/TiddlyWikiDev/">Feedback</a> is welcome.
</p>
<h2>API</h2>
<p>
<a href="http://jquery.tiddlywiki.org/twFile.html">jquery.twFile</a>
provides four simple functions:
</p>
<ul>
<li>
<p><code>$.twFile.load(filePath)</code>: load contents from file</p>
</li>
<li>
<p><code>$.twFile.save(filePath, content)</code>: save contents to file</p>
</li>
<li>
<p><code>$.twFile.copy(dest, source)</code>: duplicate existing file</p>
<p><strong>N.B.:</strong> This is not supported on all browsers.</p>
</li>
<li>
<p><code>$.twFile.init()</code>: force internal initialization</p>
<p>
This would typically be used inside a
<code>$(document).ready</code> handler.
</p>
</li>
</ul>
<p>
<strong>N.B.:</strong> All file paths must be absolute (e.g.
<code>/tmp/foo.txt</code> or <code>C:\temp\foo.txt</code>).
</p>
<p>(full documentation in the code comments)</p>
<h2>Limitations</h2>
<ul>
<li>no Unicode support on Internet Explorer</li>
</ul>
<h2>Demo</h2>
[...]
</body>
</html>
Raw
twStylesheet.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery.twStylesheet</title>
<link rel="stylesheet" type="text/css" href="styles/main.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="http://svn.tiddlywiki.org/Trunk/core/jquery/plugins/jquery.twStylesheet.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var applyCSS = function() {
var css = $("#css_code").val();
$.twStylesheet(css);
};
var resetCSS = function() {
$.twStylesheet.remove();
};
$("#css_apply").click(applyCSS);
$("#css_reset").click(resetCSS);
// initialize
$("#css_code").val(
"html { background-color: #EEE; }\n" +
"body { color: #FFF; background-color: #000; }\n" +
"h1, h2 { font-variant: small-caps; }\n" +
"ul { list-style-type: square; }\n" +
"code { padding: 1px 2px; background-color: #EEE; }\n" +
"#css_editor, #css_editor legend { background-color: #888; }\n"
);
});
</script>
</head>
<body>
<h1>jquery.twStylesheet</h1>
<p>
This <a href="http://jquery.com">jQuery</a> plugin allows the applicationn
of CSS rule sets to the document.
</p>
<p>
In contrast to jQuery's <a href="http://docs.jquery.com/CSS">CSS methods</a>,
it applies styles to the document rather than to individual elements (just
like defining a static style sheet in the document head).
</p>
<p>
The code is based on <a href="http://tiddlywiki.com">TiddlyWiki</a>'s dynamic
style-sheet capabilities, where it is used to allow users to customize their
documents on the fly.
</p>
<h2>Source</h2>
<p>
The source code is currently hosted in TiddlyWiki's
<a href="http://svn.tiddlywiki.org/Trunk/core/jquery/plugins/jquery.twStylesheet.js">Subversion repository</a>.
</p>
<p>
<a href="http://groups.google.com/group/TiddlyWikiDev/">Feedback</a> is welcome.
</p>
<h2>API</h2>
<p><a href="http://jquery.tiddlywiki.org/twStylesheet.html">jquery.twStylesheet</a> provides two simple functions:</p>
<ul>
<li>
<p><code>$.twStylesheet(css[, options])</code>: adds or replaces a style sheet</p>
<p>
<code>css</code> is a string containing the CSS rule sets, while
<code>options.id</code> is an optional name identifying the style sheet, allowing
co-existence of multiple style sheets
</p>
</li>
<li>
<p>
<code>$.twStylesheet.remove([options])</code>: delete an existing style sheet
</p>
<p>
The <code>options</code> argument is identical to <code>$.twStylesheet</code>'s.
</p>
</li>
</ul>
<p>(full documentation in the code comments)</p>
<h2>Demo</h2>
This will apply the CSS rule sets below to the entire document.
<fieldset id="css_editor" class="editor">
<legend>CSS</legend>
<textarea id="css_code" rows="10" cols="70"></textarea>
<input id="css_apply" type="button" value="Apply">
<input id="css_reset" type="button" value="Reset">
</fieldset>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment