The Building Blocks of Shipwright

The Components

The Box System

Bootstrap, Foundation, Skeleton, and even the grand-daddy of all frameworks, 960-grid, use of a 12-column Grid system. 12-column grids make perfect mathematical sense, but they are confining. Shipwright abandons the Grid System in favor of what I call the 'Box' system. No longer do you have to remember a class like 'col-lg-12'. 12 of what? Now, if you understand elementary division, you can enact any column system you want.

Box-1-2
Box-1-2
Box-1-3
Box-2-3
Box-1-4
Box-2-4
Box-1-4
Box-1-4
Box-3-4
Box-1-5
Box-2-5
Box-2-5
Box-1-5
Box-3-5
Box-1-5
Box-1-5
Box-4-5
Box-1-6
Box-2-6
Box-3-6
Box-2-6
Box-4-6
Box-1-6
Box-5-6
Box-1-7
Box-2-7
Box-3-7
Box-1-
Box-1-7
Box-2-7
Box-4-7
Box-1-7
Box-5-7
Box-1-7
Box-1-7
Box-6-7
Box-1-8
Box-2-8
Box-3-8
Box-2-8
Box-2-8
Box-2-8
Box-4-8
Box-3-8
Box-5-8
Box-2-8
Box-6-8
Box-1-8
Box-7-8
Box-1-9
Box-2-9
Box-3-9
Box-3-9
Box-4-9
Box-5-9
Box-3-9
Box-6-9
Box-2-9
Box-7-9
Box-1-9
Box-8-9
Box-1-10
Box-2-10
Box-3-10
Box-4-10
Box-1-10
Box-5-10
Box-4-10
Box-4-10
Box-6-10
Box-3-10
Box-7-10
Box-2-10
Box-8-10
Box-1-11
Box-2-11
Box-3-11
Box-4-11
Box-1-11
Box-5-11
Box-6-11
Box-4-11
Box-7-11
Box-3-11
Box-8-11
Box-2-11
Box-9-11
Box-1-11
Box-10-11
Box-1-12
Box-2-12
Box-3-12
Box-4-12
Box-2-12
Box-1-12
Box-5-12
Box-6-12
Box-5-12
Box-7-12
Box-4-12
Box-8-12
Box-3-12
Box-9-12
Box-2-12
Box-10-12
Box-1-12
Box-11-12

Mobile Boxes

With mobile layouts, 12 columns is about 9 too many. That is why Shipwright has all box classes default to single column, and only three other mobile-specific override column classes: .m-half, .m-twothird and .m-third, exist.

Box-3-8
Box-5-8
M-Half
M-Half
M-Third
M-TwoThird

The Ever-flexible Nav-Header

Shipwright's header is extremely flexible, mobile-ready, with little to no javascript used. Unlike most frameworks, the header menu needs to be included only once. You don't need to repeat code for a mobile-menu, which makes Shipwright much more SEO-friendly.

Need a header with a center-logo? No longer do you need to insert a logo in the center of a menu. Simply adding the class .center-logo to the page header will automatically reformat the menu with a centered logo, all while keeping the mark-up the same, and the website logo seperate from the menu in code.

Mobile-Responsive Menu

As stated earlier, the code available will very easily make the menu, on mobile, revert to a style with a menu button (using the checkbox hack, no javascript required), and the exact same markup as desktop.

Background Image Class

Addng the class .bg to a parent block will ensure the background image applied to the parent object will be set to cover the block's background. An additional mobile-only background image can be added as well, with the class .mobilebg.

Halves

After seeing this layout designed several times by the designers I worked with, I decided to create an easy set of classes to ensure that this layout is re-usable in the future. Both blocks will be the same height, without relying on javascript, and both will have their content confined to the width of the grid.

Both boxes will stack, one atop the other, on mobile devices. This way, you can have both boxes in a layout on desktop and not worry about having mobile-only code to have it display correctly on Mobile.

The Code For Halves

          
<div id="halves" class="halves">
  <div class="half">
    <section>
      Left Half
    </section>  
  </div>    
  <div class="half">
    <section>
      Right Half
    </section>
  </div>
</div>

Alternating Photo/Content Sections

These sections alternate in display, but are actually in the same order in code, utilizing the order attribute in CSS. The best part is, on mobile, Alternating sections will display in their coded order again, no additional code needed

         
<div>
  <section class="alternating">
    <div class="equal-heights">
      <figure class="box-1-2">
        PICTURE GOES HERE  
      </figure>
      <article class="box-1-2">
        <p>Lorem ipsum dolor sit amet, 
        consectetur adipiscing elit.</p>
      </article>
    </div>   
    <div class="equal-heights">
      <figure class="box-1-2">
        PICTURE GOES HERE  
      </figure>
      <article class="box-1-2">
          <p>Lorem ipsum dolor sit amet, 
          consectetur adipiscing elit.</p>
      </article>
    </div>  
  </section>
</div>

Modals

Shipwright uses the lightweight jquery library, 'jquery-modal' to handle modals.

Creating a modal is as easy as adding rel="modal:open" to an anchor tag, targeting the ID of a modal, and going from there. Extra javascript handlers were even added to the open and close objects of jquery-modal, allowing automatic playback of videos in modals, and stopping videos when modals are closed, as you can see here

<a href="#vid-modal" rel="modal:open">here</a>

<div id="vid-modal" class="vidmodal"><div class="video-container"><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/B7wkzmZ4GBw?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe></div></div>

Responsive Video Embeds

Video Embeds from YouTube, Vimeo, etc, are fully responsive in Shipwright when wrapped in a div with the class .video-container

bxSlider

bxSlider is included in Shipwright as the preferred slider plugin to use.

FontAwesome

In earlier versions, Shipwright used a custom iconfont. This was changed to FontAwesome recently. FontAwesome's font files are being used, while the stylesheet is not. You can call any icon in Font Awesome's library via it's proper glyph. The deepest integration FontAwesome has with Shipwright is with displaying social media icons.

Social Media Links

Social Media links are handled via an unordered list with specific class names, which automatically pull the glyphs from FontAwesome for the social media platforms in question.

        
<ul class="social">
      <li class="fb"><a href="#"><span>Facebook</span></a></li>
</ul>

Adding any one of these clases to the parent ul will change the style of fonts: .icon will pull the square icon version of the social media icon. .bgcolor will add the correct brand background color to the social media icon. .color will color the icon itself with the correct brand color of that social media platform. .round with encircle the social media icon in a round circle.

The following platforms have icons, with the following classes.

  • .fb Facebook
  • .tw Twitter
  • .gp Google Plus
  • .yt YouTube
  • .in LinkedIn
  • .vi Vimeo
  • .tu Tumblr
  • .ig Instagram
  • .pi Pinterest
  • .gh Github
  • .dr Dribbble
  • .ye Yelp