Zurb Foundation 5

You can use Foundation 5 here

You can use a couple of Zurb Foundation HTML elements to write in Ghost markdown editor. Here are some links to Zurb Foundation docs and more examples: http://foundation.zurb.com/docs

Of course there will be no proper preview here but it should work. Maybe it needs some more styling.

Examples:

Block grid:

Code used:
<ul class="small-block-grid-2 large-block-grid-4">  
    <li>
        <img class="th" src="/content/images/2014/10/1.jpg">
    </li>
    <li>
        <img class="th" src="/content/images/2014/10/2.jpeg"> 
    </li>
    <li>
        <img class="th" src="/content/images/2014/10/3.jpeg">
    </li>
    <li>
        <img class="th" src="/content/images/2014/10/4.png">
    </li>
</ul>  

Pricing table:

  • Standard
  • $99.99
  • An awesome description
  • 1 Database
  • 5GB Storage
  • 20 Users
  • Buy Now
Code used:
<div class="row">  
  <div class="large-4 columns">
    <ul class="pricing-table">
      <li class="title">Standard</li>
      <li class="price">$99.99</li>
      <li class="description">An awesome description</li>
      <li class="bullet-item">1 Database</li>
      <li class="bullet-item">5GB Storage</li>
      <li class="bullet-item">20 Users</li>
      <li class="cta-button"><a class="button" href="#">Buy Now</a></li>
    </ul>
  </div>
</div>  

Modal boxes

Example Modal…

This is a modal.

Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of close-reveal-modal. Clicking anywhere outside the modal will also dismiss it.

Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.

Second Modal…

×

This is a second modal.

See? It just slides into place after the first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.

×
Code used:
<p><a href="#" data-reveal-id="firstModal" class="radius button">Example Modal…</a></p>

<div id="firstModal" class="reveal-modal" data-reveal="">  
  <h2>This is a modal.</h2>
  <p>Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of <code>close-reveal-modal</code>. Clicking anywhere outside the modal will also dismiss it.</p>
  <p>Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.</p>
  <p><a href="#" data-reveal-id="secondModal" class="secondary button">Second Modal…</a></p>
  <a class="close-reveal-modal">×</a>
</div>

<div id="secondModal" class="reveal-modal" data-reveal="">  
  <h2>This is a second modal.</h2>
  <p>See? It just slides into place after the first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.</p>
  <a class="close-reveal-modal">×</a>
</div>  

Tabs

Tab 1
Tab 2
Tab 3
Tab 4

First panel content goes here...

Second panel content goes here...

Third panel content goes here...

Fourth panel content goes here...


See more

Foundation 5 kitchen sink

Comments

comments powered by Disqus