Skip to content

Commit 604f461

Browse files
jcantrell-truliajcantrell-trulia
committed
Copy changes, clean ups, and tweaks
1 parent 656cdea commit 604f461

File tree

14 files changed

+170
-54
lines changed

14 files changed

+170
-54
lines changed

‎LICENSE.txt

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
Copyright (c) 2013 Trulia, Inc.
2+
3+
MIT License
4+
5+
Permission is hereby granted, free of charge, to any person obtaining
6+
a copy of this software and associated documentation files (the
7+
"Software"), to deal in the Software without restriction, including
8+
without limitation the rights to use, copy, modify, merge, publish,
9+
distribute, sublicense, and/or sell copies of the Software, and to
10+
permit persons to whom the Software is furnished to do so, subject to
11+
the following conditions:
12+
13+
The above copyright notice and this permission notice shall be
14+
included in all copies or substantial portions of the Software.
15+
16+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
19+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
20+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
21+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
22+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

‎README.md

+9-8
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
# Example hologram style guide
22

3-
This style guide is an example of the type of style guide that can be created using [hologram](http://github.com/trulia/hologram).
3+
This is an example project that uses
4+
[hologram](http://trulia.github.io/hologram) to build [this style
5+
guide](http://trulia.github.io/hologram-example). In order to build the
6+
style guide yourself, run the following:
47

5-
**Please keep the following in mind as you look at this example:**
8+
gem install hologram
9+
cd hologram-example
10+
hologram config.yml
611

7-
1. The goal of hologram is to make it easy to document your CSS and to display code examples that are powered by that CSS. Hologram has no opinions about how you should actually organize/style your style guide. You could do everything as a single file with no header/footer and it would work just fine. Or, you could break it up into an individual file for each component. Top navigation, left navigation, no navigation....that's up to you. Build it however you'd like.
12+
# License
813

9-
2. The actual styling and examples shown here are based off of [Trulia](http://trulia.com)'s own CSS library and style guide. For usage instructions see the [hologram repository](http://github.com/trulia/hologram).
10-
11-
3. The example CSS given is stripped from our own library. We use [Sass](http://sass-lang.com) at Trulia and instead of making these examples depend on Sass we've just included the compiled CSS for a couple of components. If the organization looks a little weird and the components don't seem to have exactly the CSS you would expect it's because they look nothing like the Sass that spawned them.
12-
13-
4. This is a work in progress, please consider contributing to [hologram](http://github.com/trulia/hologram).
14+
Like hologram itself, this example is licensed under the MIT license.

‎build/css/screen.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/script/components.js

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
(function ($) {
2+
var setArrow = function ($el) {
3+
if ($el.hasClass('toggleArrow'))
4+
{
5+
$el.toggleClass('toggleArrowActive');
6+
}
7+
};
8+
9+
var methods = {
10+
init: function () {
11+
return this.each(function () {
12+
if ($(this).data('toggleInit') !== true) {
13+
//Prevent multiple initializations
14+
$(this).data('toggleInit', true);
15+
16+
$(this).click(function (event) {
17+
event.preventDefault();
18+
methods.toggle.apply(this);
19+
});
20+
}
21+
});
22+
},
23+
24+
toggle: function (activate) {
25+
return $(this).each(function () {
26+
var $toggle,
27+
data,
28+
container,
29+
toggled = false;
30+
31+
$toggle = $(this);
32+
33+
container = $($toggle.attr('href'));
34+
35+
if (activate || activate === false)
36+
{
37+
// forced state toggle
38+
toggled = container.hasClass('hideVisually') === activate;
39+
$toggle.toggleClass('toggleActive', activate);
40+
container.toggleClass('hideVisually', !activate);
41+
}
42+
else
43+
{
44+
// toggle
45+
toggled = true;
46+
$toggle.toggleClass('toggleActive');
47+
container.toggleClass('hideVisually');
48+
}
49+
50+
if (toggled)
51+
{
52+
// update arrow status
53+
setArrow($toggle);
54+
55+
// update the label
56+
data = $toggle.data();
57+
if (data.toggleText) {
58+
var show = data.toggleText;
59+
60+
//store our current text
61+
$toggle.data('toggleText', $toggle.text());
62+
63+
//switch to our toggle text
64+
$toggle.text(show);
65+
}
66+
67+
$toggle.trigger('toggle', [(activate || $toggle.hasClass('toggleActive'))]);
68+
}
69+
});
70+
}
71+
72+
};
73+
74+
$.fn.truliaToggle = function (method) {
75+
if (typeof method === 'string' && typeof methods[method] === 'function')
76+
{
77+
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
78+
}
79+
else if (typeof method === 'object' || !method)
80+
{
81+
return methods.init.apply(this, arguments);
82+
}
83+
else
84+
{
85+
$.error('Method ' + method + ' does not exist on jQuery.truliaToggle');
86+
}
87+
};
88+
89+
}(jQuery));

‎components/button/buttons.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ use either a `<button>` or an `<a>` element:
1010
1111
```html_example
1212
<button class="btn btnDefault">Click</button>
13-
<a class="btn btnDefault" href="trulia.com">Trulia!</a>
13+
<a class="btn btnDefault" href="http://trulia.com">Don't click</a>
1414
```
1515
1616
If your button is actually a link to another page, please use the

‎components/index.md

+22-13
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,23 @@
1-
# Example hologram style guide
2-
3-
This style guide is an example of the type of style guide that can be created using [hologram](http://github.com/trulia/hologram).
4-
<br /><br />
5-
**Please keep the following in mind as you look at this example:**
6-
7-
The goal of hologram is to make it easy to document your CSS and to display code examples that are powered by that CSS. Hologram has no opinions about how you should actually organize/style your style guide. You could do everything as a single file with no header/footer and it would work just fine. Or, you could break it up into an individual file for each component. Top navigation, left navigation, no navigation....that's up to you. Build it however you'd like.
8-
<br /><br />
9-
The actual styling and examples shown here are based off of [Trulia](http://trulia.com)'s own CSS library and style guide. For usage instructions see the [hologram repository](http://github.com/trulia/hologram).
10-
<br /><br />
11-
The example CSS given is stripped from our own library. We use [Sass](http://sass-lang.com) at Trulia and instead of making these examples depend on Sass we've just included the compiled CSS for a couple of components. If the organization looks a little weird and the components don't seem to have exactly the CSS you would expect it's because they look nothing like the Sass that spawned them.
12-
<br /><br />
13-
This is a work in progress, please consider contributing to [hologram](http://github.com/trulia/hologram).
1+
#Welcome
2+
3+
This style guide is an example of what
4+
[hologram](http://trulia.github.io/hologram) can help you build and
5+
maintain.
6+
7+
The goal of hologram is to make it easy to document your CSS and to
8+
display the code examples to use that CSS. Hologram has no
9+
opinions about how you should actually organize/style your style guide.
10+
You could do everything as a single file with no header/footer and it
11+
would work just fine. Or, you could break it up into an individual file
12+
for each component. Top navigation, left navigation, no
13+
navigation....that's up to you. Build it however you'd like.
14+
15+
16+
We've borrowed some of [Trulia](http://trulia.com)'s own CSS library to
17+
demonstrate how hologram can be used. If you want more details about
18+
hologram see the [git repository](http://github.com/trulia/hologram).
19+
20+
21+
This is a work in progress, please consider contributing to
22+
[hologram](http://github.com/trulia/hologram).
1423

‎config/hologram_config.yml renamed to ‎config.yml

+8-6
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
1+
# Hologram config
2+
13
# The directory containing the source files to parse
2-
source: ../components
4+
source: ./components
35

46
# The directory that hologram will build to
5-
destination: ../docs
7+
destination: ./docs
68

79
# The assets needed to build the docs (includes header.html, footer.html, etc)
8-
documentation_assets: ../hologram_assets
10+
documentation_assets: ./templates
911

12+
# This is a custom markdown renderer (see Redcarpet documentation for
13+
# how to do this)
1014
# custom_markdown: trulia_markdown_renderer.rb
1115

1216
# Any other asset folders that need to be copied to the destination folder
1317
# This where you should include your full stylesheets, component javascript,
1418
# libraries and any other dependencies your style guide will have
1519
dependencies:
16-
- ../dependencies
17-
18-
20+
- ./build

‎dependencies/css/screen.css

-1
This file was deleted.

‎dependencies/script/components.js

-1
This file was deleted.

‎hologram_assets/footer.html renamed to ‎templates/footer.html

+6-13
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,14 @@
11
</div>
22
</div>
33
</section>
4+
<footer>
5+
The source code for this style guide is licensed under the MIT license.
6+
</footer>
47
</div>
5-
<footer class="footer backgroundLowlight" role="contentinfo">
6-
<section class="container">
7-
how'd i end up down here?
8-
</section>
9-
</footer>
10-
11-
128
<script>
139
$(document).ready(function() {
1410

15-
// build sidebar navigation
11+
// build simple sidebar navigation
1612
var $headers = $('.main > h1');
1713
var $componentList = $('.componentList');
1814

@@ -25,18 +21,15 @@
2521
);
2622
});
2723

28-
// make navigation sticky
29-
$('.componentMenu').sticky({ css: {top: '10px'} });
30-
3124
// set the active tab
3225
var currentHref = document.location.pathname.substr(1);
3326
if (currentHref)
3427
{
35-
$('.oocssDocNav').find('a[href^="' + currentHref + '"]').addClass('activeNavElem typeEmphasize');
28+
$('.docNav').find('a[href^="' + currentHref + '"]').addClass('activeNavElem typeEmphasize');
3629
}
3730
else
3831
{
39-
$('.oocssDocNav').find('a').eq(0).addClass('activeNavElem typeEmphasize');
32+
$('.docNav').find('a').eq(0).addClass('activeNavElem typeEmphasize');
4033
}
4134

4235

‎hologram_assets/header.html renamed to ‎templates/header.html

+8-11
Original file line numberDiff line numberDiff line change
@@ -2,40 +2,37 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
65
<meta name="viewport" content="width=device-width">
76

8-
<title>Hologram Example Style Guide</title>
9-
<link rel="shortcut icon" href="doc_assets/brick.png" />
7+
<title>My Style Guide</title>
8+
<link rel="shortcut icon" href="static/brick.png" />
109

1110
<!-- Styleguide CSS -->
12-
<link rel="stylesheet" href="doc_assets/css/doc.css">
13-
<link rel="stylesheet" href="doc_assets/css/github.css">
11+
<link rel="stylesheet" href="static/css/doc.css">
12+
<link rel="stylesheet" href="static/css/github.css">
1413

1514
<!-- CSS to be documented -->
16-
<link rel="stylesheet" href="dependencies/css/screen.css">
15+
<link rel="stylesheet" href="build/css/screen.css">
1716

1817
<!-- Main libraries -->
1918
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
2019
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
2120
<!-- component js and init scripts -->
22-
<script src="dependencies/script/components.js"></script>
21+
<script src="build/script/components.js"></script>
2322

2423
</head>
2524

2625
<body>
27-
<a href="#main" class="hideVisually focusable skipLink">Skip to content</a>
28-
2926
<header class="header pbn" role="banner">
3027
<div class="backgroundHighlight typeReversed1">
3128
<div class="container">
32-
<h1 class="h2 mvs">Trulia OOCSS Style Guide</h1>
29+
<h1 class="h2 mvs">My Style Guide</h1>
3330
</div>
3431
</div>
3532
<div class="backgroundLowlight typeReversed1">
3633
<div class="container">
3734
<span>
38-
<ul class="oocssDocNav listInline">
35+
<ul class="docNav listInline">
3936
<!-- Add you pages here -->
4037
<li><a href="index.html">Intro</a></li>
4138
<li><a href="base_css.html">Base CSS</a></li>

‎hologram_assets/doc_assets/brick.png renamed to ‎templates/static/brick.png

File renamed without changes.

‎hologram_assets/doc_assets/css/doc.css renamed to ‎templates/static/css/doc.css

+4
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@
1717
margin-top: 0;
1818
}
1919

20+
footer {
21+
margin-top: 20px;
22+
text-align: center;
23+
}
2024

2125

2226
.componentMenu {

‎hologram_assets/doc_assets/css/github.css renamed to ‎templates/static/css/github.css

File renamed without changes.

0 commit comments

Comments
 (0)