Templates

Why Use BootStrap On Your Website?

If you have ever tried to work out how to create a website that not only works well, but also looks great, you have most likely look at design frameworks. You download the relevant CSS, JavaScript and any other files (usually fonts) and end up with various elements that you can start piecing together to create your website’s design. If you just want a simple one-page web app, you can start with Bootstrap and add in the components as required. For a more complicated website, you might look for a specific theme or template that meets with the website image you have in your head.

That said, this is barely scratching the surface of what you can do with Bootstrap. You can also create single-page applications that use a JavaScript framework such as backbone or AngularJS. You can use Laravel or Ruby on Rails to support your back-end code, and start creating fantastically complicated and profitable websites. You might even find a Bootstrap Theme that uses great photography or that you can plug in images from your favourite stock image website, and find the perfect illustration for your web presence.

Firstly, it can be of huge benefit since it’s far more cost-effective than hiring a designer and working through a complete design process. That’s not to say that working with a designer isn’t worthwhile. Bootstrap just gives you a leg-up and a helping hand on the road to getting started. Starting with a Bootstrap template can also help prototype website designs at the absolute lowest of costs and time constraints. Suddenly you are free to try multiple designs and sketches, live, and in real-time, in your desktop browser, or on your phone. By using Bootstrap’s CSS goodies, you have instantly given yourself the confidence to create brilliant websites. Visitors will be delighted with your easy-to-use website that doesn’t rely on unusual design trends, or slow down their browser to the point of being useless. With Bootstrap alone you get this all for free.

There are other benefits of using a theme based on Bootstrap. Thanks to its widespread use, many designers and developers will be able to jump into your project with their legs running, while you lay safe in the knowledge that the standard way of doing things is being continued. Even better, you can continue to experiment with the vast number of Bootstrap-related items available on the internet and know for certain that it’ll be easy to add them to your website.

At the end of the day, the main thing Bootstrap gives you and your website visitors is convenience. Whether this has come about via a custom design, or a template or theme, you’re making it far easier for all concerned to use and develop your website. And that’s what really matters: a great experience for everyone concerned. If, thanks to your choice of CSS framework, you can make more money as a direct result, everybody wins and can go home happy.

Choose Bootstrap For Your Website

Bootstrap is the most popular and the most effective CSS framework currently available on the internet. In addition to being completely free and open source to all developers, it makes creating web layouts very easy, often with great looking results. You are supplied with an awesome set of widgets in the familiar Bootstrap style. The theme framework is also a constantly evolution project, where developers and designers alike can provide suggestions, make corrections, and even design their own custom Bootstrap templates from scratch. Last of all, this incredible bundle of CSS joy can be used without any special licenses or payment of any kind. In fact, Twitter have gone so far as to release Bootstrap under the MIT license and set its developers free of any obligations they had to continue developing it under the company banner.

Bootstrap’s Early Days

While Bootstrap has become a core feature on the internet, the original idea and the basic building blocks of the front-end framework was first developed by two developers from Twitter: Mark Otto and Jacob Thornton. Its first name was Twitter Blueprint, and its purpose was to give Twitter’s internal tools a consistent look right across the board, something that the company had been struggling with for quite some time. A small internal group quickly picked up the reigns, and the project was renamed from Blueprint to Bootstrap. Come August 19, 2011, the project was released as an open-source project. Not many months later, Bootstrap 2 was released at the end of January 2012. This added the now-familiar 12-column layout to Bootstrap, and was the first attempt at supporting responsive designs for smartphones and tablets. Another year later, this time in August 2013, Bootstrap 3 was released, aiming to get developers and designers to create sites for mobile devises first. Version 4 of Bootstrap started development in April of 2015.

Bootstrap can be set up with a single click to download the CSS, Javascript and font files. It only needs to be added to your project, and you can quickly get started putting together your new website design. Even better, with the vast number of Bootstrap templates now available, you don’t have to worry about formatting common design elements, or setting up JavaScript notification scripts; the themes and templates come with such features baked-in. Here are some helpful tips for you to know:

1. Bootstrap is Responsive & Mobile Friendly

Bootstrap happens to have been built for mobile devices from the ground up. “Mobile First” is a term that tells us we should create sites with mobile devices in mind right from day one; not as an afterthought way down the development and design template. Thanks to Bootstrap’s mobile-friendliness, your website will look great on every device, where laptop, desktop PC, iPhone or iPad. It also means that you can rely on any themes you see to have been built with mobile in mind from the start.

2. Beautiful Forms

Forms are a pain for many developers, and yet they’re absolutely vital to any website if you’re going to get any conversions. Bootstrap comes with many form control designs and layouts making it as easy as could be to quickly put together forms that look great – and convert even better.

3. Winning Modal Popups

Bootstrap’s modal popups are a fantastic JavaScript plugin that can quickly display vital information to the end-user. Not only can they display information, the modal windows give you multiple opportunities to get information from your website’s users, all bundled up into a lightweight package for instant use.

4. Alerts, Buttons, and User Interface Wins

Once again leaving you with more time to develop, and less time worrying about making buttons look great, Bootstrap provides various controls that pop out to website visitors. Alerts are a fact of life on the internet, and the ones you find on here are hard to beat.

5. Bootstrap Themes Take Design Further

It’s easy to start recognising when a site has been built with Bootstrap. Thanks to the design ingenuity of Bootstrap template designers, this should no longer be a worry. Extra components, button designs, and unique JavaScript plugin integrations mean that you can end up with an incredibly professional-looking design for a very small initial price. An undeniably big win.

Bootstrap – Way To Go!

You should use Bootstrap if you want a great general-purpose site design. This is one of the easiest and convenient methods to get your design up and running. You don’t even need to have any real design skills! You can just keep look at the examples, and then start piecing together the design elements as you develop. It’s a highly recommended way to create websites. Give the new Bootstrap a go; you’ll be very happy that you did!

HTML5 Boilerplate

Scratch is built on the HTML5 Boilerplate. Here are the Javascript features that Scratch utilizes in full:

  • HTML5 ready. Use the new elements with confidence.
  • Designed with progressive enhancement in mind.
  • Includes:
    • jQuery via CDN, with a local fallback
    • A custom build of Modernizr for feature detection
  • An optimized version of the Google Universal Analytics snippet.
  • Protection against any stray console statements causing JavaScript errors in older browsers.
  • Extensive inline and accompanying documentation.

Modals via Magnific Popup

Scratch is bundled with Magnific Popup for the best responsive modals in the biz. main.js includes several helper functions to make modal usage trivial.

This is what it would look like if you added the image via the WordPress content editor, and then added the class .image-link to its parent link in the advanced options. See Inserting Images into Posts and Pages.

Basically all you need is an <a> tag with an href of the image source and a class of .image-link.EXAMPLE

Click to view larger image.

The code is generated automatically, but it should look like this:

<div id="attachment_112" style="width: 310px" class="wp-caption aligncenter">
  <a class="image-link" href="https://unsplash.it/600/600/?image=0">
    <img class="wp-image-112 size-medium" src="https://unsplash.it/300/200/?image=0" alt="Click to view larger image" width="300" height="200">
  </a>
  <p class="wp-caption-text">
    Click to view larger image.
  </p>
</div>

Add class .popup-link to an <a> tag with an href that matches the target popup’s id.EXAMPLE

<p>
  <a href="#popup" class="button popup-link">Click</a>
</p>

Add class .iframe-link to an <a> tag with an href that is a YouTube or Vimeo video URL.EXAMPLE

<p>
  <a href="https://www.youtube.com/watch?v=ndnjBq8ROpo" class="button iframe-link">Click</a>
</p>

Use Magnific Popup Directly

Check out the Magnific Popup API if you need something more custom than what Scratch comes with.


jQuery Waypoints

Scratch comes with jQuery Waypoints. Scratch does not use this library by default, but it’s a great utility, especially for sticky navs. This documentation page uses Waypoints to set its sticky nav:

jQuery(document).ready(function($) {
  if (!Modernizr.touch) {
    $('#docs-main').waypoint(function(dir) {
      if (dir === 'down') {
        $('#docs-nav').addClass('fixed').css('width', $('#sidebar').width());
      } else {
        $('#docs-nav').removeClass('fixed').css('width', 'auto');
      }
    });
  }
});

Animations with Velocity.js

Scratch comes with Velocity.js, a JavaScript library for highly performant animations. main.js includes snippets for smooth “scroll-to” links and accordions, or “toggles” as we call them.

EXAMPLE

Scroll here.

<p>
  <a href="#scroll-here" class="button scroll-link">Click</a>
</p>
<div id="scroll-here" class="scratch-bg gray-bg">
  <div class="valign-always center">
    Scroll here.
  </div>
</div>

Toggles

EXAMPLE

Toggle Heading 1
Toggle Heading 2
Toggle Heading 3
<h5 class="toggle-heading"
    data-direction="down">
  Toggle Heading 1
</h5>
<div class="toggle-content">
  <p>Toggle content 1.</p>
</div>
<h5 class="toggle-heading"
    data-direction="down">
  Toggle Heading 2
</h5>
<div class="toggle-content">
  <p>Toggle content 2.</p>
</div>
<h5 class="toggle-heading"
    data-direction="down">
  Toggle Heading 3
</h5>
<div class="toggle-content">
  <p>Toggle content 3.</p>
</div>

Use Velocity.js Directly

Never use jQuery’s $.animate() and $.fade() functions. They slow everything else down, including other animation libraries. Always use Velocity’s built-in solutions instead of rolling your own (or relying on jQuery): looping, reversing, delaying, hiding/showing elements, property math (+, -, *, /), and hardware acceleration can all be done within Velocity.

Example usage:

jQuery(document).ready(function($) {
  $element.velocity("fadeIn", {
    duration: 1500
  }).velocity("fadeOut", {
    delay: 500,
    duration: 1500
  });
});

Check out Velocity’s excellent documentation for more info.


Sliders via Glide.js

Scratch includes Glide.js, a simple, responsive, and fast slider. Use a slider in your project:EXAMPLE

<div id="Glide" class="glide">

  <div class="glide__arrows">
    <button class="glide__arrow prev" data-glide-dir="<">
      <i class="ion-chevron-left"></i>
    </button>
    <button class="glide__arrow next" data-glide-dir=">">
      <i class="ion-chevron-right"></i>
    </button>
  </div>

  <div class="glide__wrapper">
    <ul class="glide__track">
      <li class="glide__slide"
          style="background-image: url('https://unsplash.it/1800/1200?image=1');">
      </li>
      <li class="glide__slide"
          style="background-image: url('https://unsplash.it/1800/1200?image=2');">
      </li>
      <li class="glide__slide"
          style="background-image: url('https://unsplash.it/1800/1200?image=3');">
      </li>
    </ul>
  </div>

  <div class="glide__bullets"></div>

</div>

Armed with the knowledge of Glide.js’s options, control the slider’s configuration in main.js:

jQuery(document).ready(function($) {
  $('.glide').glide({
    autoplay: false
  });
});

Using MAMP to Complete the WordPress Installation

Open the MAMP start page, and then head over to phpMyAdmin. Click on the Users tab, then scroll down and click Add User. Create a memorable username, strong password, and set the host to localhost. Check Create database with same name and grant all privileges, then click Go.

Now, navigate to the host you configured in MAMP. Complete the WordPress installation and log in. (You won’t need to do this specific part if you ran wp core install.)

Once logged in to WordPress, navigate to Appearance > Themes and activate Scratch. Follow the subsequent prompts to install the recommended plugins. If you want, delete Akismet and Hello Dolly.

Running Grunt, BrowserSync, and Compiling SCSS and JavaScript

Run npm install in the assets/grunt/ directory from your command line to install all of the Node packages. Make sure to change your proxied host for BrowserSync. Once that’s done, you can run grunt from the same directory to begin your automated workflow.

Update: as of v1.5.9, Gulp is also available. Run npm install and then gulp in the assets/gulp/ directory.

Adding Scratch’s Style Guide and Main Navigation Menu

Navigate to Appearance > Menus and click Create Menu. Make sure the menu points to the Main Nav location, and then save it again. Next, go to Pages > Add New and set the Page Template to Style Guide. Publish and view the page.

Update: as of v1.6.8, the pages and navigation menu are automatically generated on theme activation.

Implementing Your Own Typography with Scratch

This example uses Google Fonts and sets them to SCSS variables in config/_variables.scss.

Implementing Your Own Color Scheme with Scratch

Edit config/_variables.scss and page-style_guide.php.

Basically, root/ contains files that should be moved to the root of your site if you desire to use the configuration that comes with HTML5 Boilerplate.

Navigate to Settings > Permalinks, and change the Permalink Structure to Post Name for cleaner, SEO-friendly URLs.

Congratulations!

High fives, you’re all finished! If you’re having trouble, feel free to submit an issue on GitHub.