Skip to content

Commit

Permalink
feat(styleguide): convert all code examples to html
Browse files Browse the repository at this point in the history 
[Finishes #80986432]

Signed-off-by: Paul Meskers <pmeskers@pivotal.io>
  • Loading branch information
Geoff Pleiss committed Dec 3, 2014
1 parent 324f301 commit 526207e
Show file tree
Hide file tree
Showing 27 changed files with 1,605 additions and 1,198 deletions.
78 changes: 41 additions & 37 deletions src/pivotal-ui/components/avatars.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,8 @@ categories:
Regular avatars are expected to by 100px by 100px.
```haml_example
%img{src: "http://placehold.it/100x100", alt: "...", class: "img-circle avatar", height: "100", width: "100"}
```html_example
<img alt="..." class="img-circle avatar" height="100" src="http://placehold.it/100x100" width="100">
```
Expand Down Expand Up @@ -59,13 +58,15 @@ To use in a view, simply call
`= render 'shared/gravatar_small', email: 'some@email.com'`
```haml_example
.gravatar.gravatar-sm
%img{src:"https://secure.gravatar.com/avatar/8b7970c372aabb936ca455127e04c959?s=20&d=blank"}
%i.fa.fa-user
.gravatar.gravatar-sm
%img{src:"https://s.gravatar.com/avatar/c99bd3ce00444f946027741d5a5cd9e9?s=20&d=blank"}
%i.fa.fa-user
```html_example
<div class="gravatar gravatar-sm">
<img src="https://secure.gravatar.com/avatar/8b7970c372aabb936ca455127e04c959?s=20&amp;d=blank">
<i class="fa fa-user"></i>
</div>
<div class="gravatar gravatar-sm">
<img src="https://s.gravatar.com/avatar/c99bd3ce00444f946027741d5a5cd9e9?s=20&amp;d=blank">
<i class="fa fa-user"></i>
</div>
```
*/
Expand All @@ -83,26 +84,27 @@ To use in a view, simply call
`= render 'shared/gravatar_small', email: 'some@email.com'`
```haml_example
.gravatar.gravatar-sm
%img{src:"https://secure.gravatar.com/avatar/8b7970c372aabb936ca455127e04c959?s=20&d=blank"}
%i.fa.fa-user
%i.overlay.fa.fa-envelope
.gravatar.gravatar-sm.mlxl
%img{src:"https://s.gravatar.com/avatar/c99bd3ce00444f946027741d5a5cd9e9?s=20&d=blank"}
%i.fa.fa-user
%i.overlay.fa.fa-envelope
.gravatar.gravatar-sm.mlxl
%img{src:"https://secure.gravatar.com/avatar/8b7970c372aabb936ca455127e04c959?s=20&d=blank"}
%i.fa.fa-user.highlight
%i.overlay.fa.fa-check
.gravatar.gravatar-sm.mlxl
%img{src:"https://s.gravatar.com/avatar/c99bd3ce00444f946027741d5a5cd9e9?s=20&d=blank"}
%i.fa.fa-user
%i.overlay.fa.fa-check
```html_example
<div class="gravatar gravatar-sm">
<img src="https://secure.gravatar.com/avatar/8b7970c372aabb936ca455127e04c959?s=20&amp;d=blank">
<i class="fa fa-user"></i>
<i class="overlay fa fa-envelope"></i>
</div>
<div class="gravatar gravatar-sm mlxl">
<img src="https://s.gravatar.com/avatar/c99bd3ce00444f946027741d5a5cd9e9?s=20&amp;d=blank">
<i class="fa fa-user"></i>
<i class="overlay fa fa-envelope"></i>
</div>
<div class="gravatar gravatar-sm mlxl">
<img src="https://secure.gravatar.com/avatar/8b7970c372aabb936ca455127e04c959?s=20&amp;d=blank">
<i class="fa fa-user highlight"></i>
<i class="overlay fa fa-check"></i>
</div>
<div class="gravatar gravatar-sm mlxl">
<img src="https://s.gravatar.com/avatar/c99bd3ce00444f946027741d5a5cd9e9?s=20&amp;d=blank">
<i class="fa fa-user"></i>
<i class="overlay fa fa-check"></i>
</div>
```
*/

Expand Down Expand Up @@ -149,13 +151,15 @@ To use in a view, simply call
`= render 'shared/gravatar_large', email: 'some@email.com'`
```haml_example
.gravatar.gravatar-lg
%img{src:"https://secure.gravatar.com/avatar/8b7970c372aabb936ca455127e04c959?s=80&d=blank"}
%i.fa.fa-user
.gravatar.gravatar-lg
%img{src:"https://s.gravatar.com/avatar/c99bd3ce00444f946027741d5a5cd9e9?s=80&d=blank"}
%i.fa.fa-user
```html_example
<div class="gravatar gravatar-lg">
<img src="https://secure.gravatar.com/avatar/8b7970c372aabb936ca455127e04c959?s=80&amp;d=blank">
<i class="fa fa-user"></i>
</div>
<div class="gravatar gravatar-lg">
<img src="https://s.gravatar.com/avatar/c99bd3ce00444f946027741d5a5cd9e9?s=80&amp;d=blank">
<i class="fa fa-user"></i>
</div>
```
*/
Expand Down
7 changes: 4 additions & 3 deletions src/pivotal-ui/components/back_to_top.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,10 @@ The button will be fixed to the bottom right hand corner of the page.
You can place the link anywhere in your markup, but best practices are either towards the top or bottom of your markup.
```haml_example
.styleguide-component-wrapper
%a.back-to-top{:href => "#"}
```html_example
<div class="styleguide-component-wrapper">
<a class="back-to-top" href="#" target="_blank" style="display: inline;"></a>
</div>
```
*/

Expand Down
10 changes: 5 additions & 5 deletions src/pivotal-ui/components/buttons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@ categories:
Button styles can be applied to any element. Typically you'll want to
use either a `<button>` or an `<a>` element:
```haml_example_table
%button.btn.btn-primary Button
```html_example_table
<button class="btn btn-primary">Button</button>
%a.btn.btn-primary{href: "http://trulia.com"} Link
<a class="btn btn-primary" href="http://trulia.com">Link</a>
```
If your button is actually a link to another page, please use the
Expand All @@ -36,8 +36,8 @@ size and style modifiers.
Create block level buttons - those that span the full width of a parent - by adding `.btn-block`.
```haml_example
%button.btn.btn-primary.btn-block Full width button
```html_example
<button class="btn btn-primary btn-block">Full width button</button>
```
*/
Expand Down
138 changes: 63 additions & 75 deletions src/pivotal-ui/components/code.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,67 +54,56 @@ There are several languages already available (and others available from the [Pr
* Ruby
* Go
```haml_example
%pre
%code.language-ruby
:preserve
class Foo
def bar
puts 'hi'
end
end
```html_example
<pre><code class="language-ruby">class Foo
def bar
puts 'hi'
end
end</code></pre>
```
Make it scrollable
```haml_example
%pre.pre-scrollable
%code.language-ruby
:preserve
class Foo
def bar
puts 'hi'
end
```html_example
<pre class="pre-scrollable"><code class="language-ruby">class Foo
def bar
puts 'hi'
end
def bar
puts 'hi'
end
def bar
puts 'hi'
end
def bar
puts 'hi'
end
def bar
puts 'hi'
end
def bar
puts 'hi'
end
def bar
puts 'hi'
end
def bar
puts 'hi'
end
def bar
puts 'hi'
end
def bar
puts 'hi'
end
def bar
puts 'hi'
end
def bar
puts 'hi'
end
end
def bar
puts 'hi'
end
end</code></pre>
```
Scrollable with too little content:
```haml_example
%pre.pre-scrollable
%code.language-ruby
:preserve
class Foo
def bar
puts 'hi'
end
end
```html_example
<pre class="pre-scrollable"><code class="language-ruby">class Foo
def bar
puts 'hi'
end
end</code></pre>
```
If you would like a set a default height, please add it manually.
Expand Down Expand Up @@ -166,34 +155,33 @@ parent: code
<label>Alternate CSS <input type='checkbox' name='stylesheet' class='alternate-css'/></label>
```haml_example
.terminal
%pre
%code.language-ruby
:preserve
class Foo
def bar
puts 'hi'
end
end
class Bar
def bar
puts 'hi'
end
end
class Baz
def bar
puts 'hi'
end
end
class Bop
def bar
puts 'hi'
end
end
```html_example
<div class="terminal">
<pre><code class="language-ruby">class Foo
def bar
puts 'hi'
end
end
class Bar
def bar
puts 'hi'
end
end
class Baz
def bar
puts 'hi'
end
end
class Bop
def bar
puts 'hi'
end
end</code></pre>
</div>
```
*/
Expand Down
Loading

0 comments on commit 526207e

Please sign in to comment.