Wingman Components

In addition to Bootstrap, Wingman includes various custom CSS & JS components to enhance the functionality of your site
  • Accordion
    Formats default Bootstrap 4 Collapse as an accordion
    Pane 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium lorem non vestibulum scelerisque. Proin a vestibulum sem, eget tristique massa. Aliquam lacinia rhoncus nibh quis ornare.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium lorem non vestibulum scelerisque. Proin a vestibulum sem, eget tristique massa. Aliquam lacinia rhoncus nibh quis ornare.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium lorem non vestibulum scelerisque. Proin a vestibulum sem, eget tristique massa. Aliquam lacinia rhoncus nibh quis ornare.

    Markup
    <div class="accordion" id="accordion-1" data-children=".accordion-item">
      <div class="accordion-item">
        <a data-toggle="collapse" data-parent="#accordion-1" href="#accordion-panel-1" aria-expanded="true" aria-controls="accordion-1">
          <h5>Pane 1</h5>
          <i class="h5 icon-chevron-small-right"></i>
        </a>
        <div id="accordion-panel-1" class="collapse show" role="tabpanel">
          <p>
            Pane 1 content
          </p>
        </div>
      </div>
      <div class="accordion-item">
        <a data-toggle="collapse" data-parent="#accordion-1" href="#accordion-panel-2" aria-expanded="false" aria-controls="accordion-1">
          <h5>Pane 2</h5>
          <i class="h5 icon-chevron-small-right"></i>
        </a>
        <div id="accordion-panel-2" class="collapse" role="tabpanel">
          <p>
            Pane 2 Content
          </p>
        </div>
      </div>
      <div class="accordion-item">
        <a data-toggle="collapse" data-parent="#accordion-1" href="#accordion-panel-3" aria-expanded="false" aria-controls="accordion-1">
          <h5>Pane 3</h5>
          <i class="h5 icon-chevron-small-right"></i>
        </a>
        <div id="accordion-panel-3" class="collapse" role="tabpanel">
          <p>
            Pane 3 Content
          </p>
        </div>
      </div>
    </div>

  • Avatar
    A set of CSS classes to easily format avatar images.
    Image .avatar-xlg
    Image .avatar-lg
    Image .avatar
    Image .avatar-square
    Image .avatar-sm
    Image .avatar-xs
    Class Reference
    .avatar
    Apply to <img> to format as a round avatar
    .avatar-square
    Apply to .avatar to format avatar with squared edges instead of rounded
    .avatar-xs
    Apply to .avatar to decrease default size considerably
    .avatar-sm
    Apply to .avatar to decrease default size
    .avatar-lg
    Apply to .avatar to increase default size
    .avatar-xlg
    Apply to .avatar to increase default size considerably

  • Background Images
    A CSS class that turns any <img> into a background for the parent element
    Image
    This element has an img.bg-image
    Class Reference
    .bg-image
    Apply to <img> to set image as the background for the parent element
    Caveats
    • Ensure the parent element has the position:relative; property set, as the Background Images feature uses absolute positioning.

  • Feature List
    A CSS and HTML component for formatting grid lists
    • Feature List Item
    • Feature List Item
    • Feature List Item
    • Feature List Item
    • Feature List Item
    • Feature List Item
    Class Reference
    .feature-list
    Apply to <ul> to format child <li> items with space below
    .feature-list-sm
    Apply to .feature-list to decrease default space below each <li> item
    .feature-list-lg
    Apply to .feature-list to increase default space below each <li> item
    .feature-list-xlg
    Apply to .feature-list to increase default space below each <li> item considerably

  • Flickity Plugin
    Slider jQuery plugin with robust options, optimised for touch devices View the Flickity Plugin site
    Markup
    <div class="main-carousel" data-flickity='{ "cellAlign": "center", "contain": true, "prevNextButtons": true, "pageDots":true, "wrapAround":true, "autoPlay":5000, "imagesLoaded":true }'>
      <div class="carousel-cell">
        ...
      </div>
      <div class="carousel-cell">
        ...
      </div>
      <div class="carousel-cell">
        ...
      </div>
    </div>

  • Icons Entypo
    A suite of 411 carefully crafted premium pictograms by Daniel Bruce View the Icons Entypo Plugin site
    Class Reference
    .icon-*
    Apply to <i> element with relevant class name

    Please see here  for a full class name reference to all available icons


  • Icons Socicon
    A suite of popular social media service icons View the Icons Socicon Plugin site
    Class Reference
    .socicon-*
    Apply to <i> element with relevant class name

    Please see here  for a full class name reference to all available icons


  • jQuery Smart Wizard 4 Plugin
    Wizard jQuery plugin for creating stepped interfaces. Useful for onboarding, signups etc. View the jQuery Smart Wizard 4 Plugin site
    Step One Content
    Step Two Content
    Step Three Content
    Step Four Content
    Markup
    <div class="wizard">
      <ul class="nav nav-tabs text-center row mb-5">
        <li class="col-3"><a href="#first" class="step-circle step-circle-sm">1</a></li>
        <li class="col-3"><a href="#second" class="step-circle step-circle-sm">2</a></li>
        <li class="col-3"><a href="#third" class="step-circle step-circle-sm">3</a></li>
        <li class="col-3"><a href="#fourth" class="step-circle step-circle-sm">4</a></li>
      </ul><!--end of col-->
      <div class="tab-content">
        <div id="first">
          ...
        </div>
        <div id="second">
          ...
        </div>
        <div id="third">
          ...
        </div>
        <div id="fourth">
          ...
        </div>
      </div>
    </div>
    Class Reference
    .wizard
    A wrapper element to contain .nav and .tab-content
    .sw-btn-next
    Apply to and element inside .tab-content to progress the wizard forward
    .sw-btn-prev
    Apply to and element inside .tab-content to progress the wizard backward

  • Steps
    A CSS component for creating rounded 'step' elements
    1
    .step-circle
    2
    .step-circle-sm
    3
    .step-circle.bg-primary
    Class Reference
    .step-circle
    Apply to an element to format it as circular with centered text
    .step-circle-sm
    Apply to .step-circle to decrease the default size
    .bg-primary,danger,warning,success,info
    Apply to .step-circle to change background color

  • Scroll Monitor Plugin
    A simple and fast Javascript API to monitor elements as you scroll View the Scroll Monitor Plugin site
    Class Reference
    .modal-header-borderless
    Apply to .modal-header to remove border and padding from bottom

  • Utilities - Height
    A set of CSS classes to set an element's height as a proportion of the viewport
    This element has a minimum height of 10vh
    .height-10
    This element has a minimum height of 20vh
    .height-20
    Class Reference
    .height-10,20,30,40,50,60,70,80,90,100
    Apply to an element to set it's min-height value to in vh (viewport height) units.

  • Utilities - Opacity
    A set of CSS classes to set an element's opacity
    .opacity-0
    .opacity-10
    .opacity-20
    .opacity-30
    .opacity-40
    .opacity-50
    .opacity-60
    .opacity-70
    .opacity-80
    .opacity-90
    .opacity-100
    Class Reference
    .opacity-0,10,20,30,40,50,60,70,80,90,100
    Apply to an element to set it's opacity value to in the corresponding value.

  • Utilities - Text Color
    A set of CSS classes to set an element's text color
    blue .text-blue
    indigo .text-indigo
    purple .text-purple
    pink .text-pink
    red .text-red
    orange .text-orange
    yellow .text-yellow
    green .text-green
    teal .text-teal
    cyan .text-cyan
    Class Reference
    .text-blue,indigo,purple,pink,red,orange,yellow,green,teal,cyan
    Apply to an element to set it's color property to the corresponding value. The color values correspond to the default colors found in the variable.scss file

  • Utilities - Other
    Other utility classes used in Wingman
    This card has the .box-shadow class
    Class Reference
    .box-shadow
    Apply to any element to add a box shadow effect
    .overflow-hidden
    Apply to any element to set overflow: hidden;
    .overflow-visible
    Apply to any element to set overflow: visible;

  • Video Cover
    A CSS and Javascript component to play videos with aesthetically pleasing image posters
    Image
    Markup
    <div class="video-cover">
      <img alt="Image" src="..." class="bg-image" />
      <div class="video-play-icon">
        <i class="icon-controller-play"></i>
      </div>
      <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" data-src="..." allowfullscreen></iframe>
      </div>
    </div>

  • Zoom Plugin
    A simple, vanilla JS library for image zooming; as seen on Medium. View the Zoom Plugin site
    Image
    Class Reference
    [data-action="zoom"]
    Apply to an <img> to enable the Zoom lightbox feature

Start building feature-rich websites

Purchase Now