Closed stoplion closed 9 years ago
Hmm, that is strange. I don't see anything offhand that appears incorrect. Can you share more details? The full generated html and the source for one of the sections might be a good starting point.
This is the header section
<div>
<div class="jumbotron subNav style-guide-banner">
<div class="container centered">
<h3 class="white">Upstart Style Guide</h3>
</div>
</div>
</div>
<div class="container">
<section class="content col-xs-12 col-sm-9">
<h3 class="styleguide-header">
<% if file_name.include?('index.html') %>
<%= @config["index"] %>
<% else %>
<%= title %>
<% end %>
</h3>
<hr class="trailer-mg-lg" />
This is the footer section
</section>
<div class="col-xs-12 col-sm-3">
<ul class="list-group styleguide-links">
<% @categories.each do |category, file_name| %>
<li class="list-group-item">
<a href="/styleguide/<%= file_name %>" data-category="<%= category.gsub(' ', '_') %>">
<%= category %>
</a>
</li>
<% end %>
</ul>
</div>
</div> <!-- container -->
<link rel="stylesheet" href="/assets/styleguide/styleguide.css">
<link rel="stylesheet" href="/assets/styleguide/pygments.css">
<script type="text/javascript" src="/assets/styleguide_helper.js"></script>
Here is an example of the output for our "Alert" Section of the styleguide:
<div>
<div class="jumbotron subNav style-guide-banner">
<div class="container centered">
<h3 class="white">Our Style Guide</h3>
</div>
</div>
</div>
<div class="container">
<section class="content col-xs-12 col-sm-9">
<h3 class="styleguide-header">
alerts
</h3>
<hr class="trailer-mg-lg" />
<p class="styleguide">[Button Switch]: buttons.html#Button Switch
[Solid Danger Button]: buttons.html#Solid Danger Button</p><p class="styleguide">[Background and Border Colors]: colors.html#Background and Border Colors
[Main Colors]: colors.html#Main Colors
[Basic Table]: table.html#Basic Table
[Bold Horizontal Rule]: rules.html#Bold Horizontal Rule
[Dashed Horizontal Rule]: rules.html#Dashed Horizontal Rule
[Horizontal Rule]: rules.html#Horizontal Rule
[Button Default]: basics.html#Button Default
[Description Lists]: lists.html#Description Lists
[Flash Messages]: alerts.html#Flash Messages</p><p class="styleguide">[Progress Bar]: widgets.html#Progress Bar</p>
<h1 id="Flash Messages" class="styleguide"></h1>
<div class="codeExample">
<div class="exampleOutput">
<div class="alert alert-info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="codeBlock">
<div class="highlight">
<pre><span class="nc">.alert.alert-info</span>
<span class="p">|</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</pre>
</div>
</div>
</div>
<div class="codeExample">
<div class="exampleOutput">
<div class="alert alert-danger">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="codeBlock">
<div class="highlight">
<pre><span class="nc">.alert.alert-danger</span>
<span class="p">|</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</pre>
</div>
</div>
</div>
<div class="codeExample">
<div class="exampleOutput">
<div class="alert alert-warning">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="codeBlock">
<div class="highlight">
<pre><span class="nc">.alert.alert-warning</span>
<span class="p">|</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</pre>
</div>
</div>
</div>
<div class="codeExample">
<div class="exampleOutput">
<div class="alert alert-success">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="codeBlock">
<div class="highlight">
<pre><span class="nc">.alert.alert-success</span>
<span class="p">|</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</pre>
</div>
</div>
</div>
</section>
<div class="col-xs-12 col-sm-3">
<ul class="list-group styleguide-links">
<li class="list-group-item">
<a href="/styleguide/buttons.html" data-category="buttons">
buttons
</a>
</li>
<li class="list-group-item">
<a href="/styleguide/typography.html" data-category="typography">
typography
</a>
</li>
<li class="list-group-item">
<a href="/styleguide/icons.html" data-category="icons">
icons
</a>
</li>
<li class="list-group-item">
<a href="/styleguide/form_elements.html" data-category="form_elements">
form elements
</a>
</li>
<li class="list-group-item">
<a href="/styleguide/colors.html" data-category="colors">
colors
</a>
</li>
<li class="list-group-item">
<a href="/styleguide/table.html" data-category="table">
table
</a>
</li>
<li class="list-group-item">
<a href="/styleguide/rules.html" data-category="rules">
rules
</a>
</li>
<li class="list-group-item">
<a href="/styleguide/basics.html" data-category="basics">
basics
</a>
</li>
<li class="list-group-item">
<a href="/styleguide/lists.html" data-category="lists">
lists
</a>
</li>
<li class="list-group-item">
<a href="/styleguide/alerts.html" data-category="alerts">
alerts
</a>
</li>
<li class="list-group-item">
<a href="/styleguide/widgets.html" data-category="widgets">
widgets
</a>
</li>
</ul>
</div>
</div> <!-- container -->
<link rel="stylesheet" href="/assets/styleguide/styleguide.css">
<link rel="stylesheet" href="/assets/styleguide/pygments.css">
<script type="text/javascript" src="/assets/styleguide_helper.js"></script>
Yea it might be something I am doing, but it didn't output this before..
The only new thing I've done recently is updated the gem and switched from HTML to SLIM examples.
Seems like adding underscore to name has an effect on this. name: Flash Messages
to name: Flash_Messages
Text that looks like a list of html generated with Hologram is output in generated styleguide in a
div
with class namestyleguide
:Screenshots of the output:![image](https://cloud.githubusercontent.com/assets/231343/7575327/c97b90f4-f7e8-11e4-94a6-7dfd0a602021.png)
In
header.html
In footer.html