Adobe Creative Cloud

May 20, 2015 /Code /

Front-end Frameworks: Getting Started with Bootstrap

When I started developing websites way back when, I noticed that there were similar chunks of code and page structures that I would use over and over again. I had this grand idea that I would create templates to reuse for similar projects. The closest I got to this was to create code snippets for my text editor. (See how to create snippets with Dreamweaver here.)

Though creating snippets are really useful, getting from design to code faster or creating quick prototypes can be achieved using front-end frameworks.

What is a Front-end Framework?

In web development, the term front-end generally refers to the content you can see and interact with in the browser (e.g. clicking a green button) and is usually written in HTML, CSS and JavaScript.

A framework is a set of pre-written templates, code snippets and modules that are meant to aide in creating websites and apps faster while still using standards-compliant code. Frameworks are useful to get you up and running quickly. Also, looking at the source code and reverse-engineering the code is also a great way to learn!

There are many to choose from ranging from basic frameworks that provide just a grid to full scale frameworks that include modules such as typography styles, buttons, forms styles, tabs and JavaScript functionality. Find a framework that suits your needs and also has good documentation for usage.

Getting Started with Bootstrap

Bootstrap is a popular, full-scale framework that is also free and open-source.

To use Bootstrap, you must download the files first. Much of the framework styles & functionality come from adding specific CSS classes or data-attributes to your HTML, so in order for the these features to work, the CSS and JavaScript files must be included in your project.

Before you get to all the fun stuff, you must make sure that all the framework files are downloaded and properly linked in your project.

There are three download options (Bootstrap, source code or Sass) to choose from based on different expertise level and/or your particular needs.

Option 1: Download Bootstrap

This option is the easiest way to get up and running quickly. Once downloaded, unzip the compressed folder. The files included look like this:

bootstrap/
    ├── css/
    │   ├── bootstrap.css
    │   ├── bootstrap.css.map
    │   ├── bootstrap.min.css
    │   ├── bootstrap-theme.css
    │   ├── bootstrap-theme.css.map
    │   └── bootstrap-theme.min.css
    ├── js/
    │   ├── bootstrap.js
    │   └── bootstrap.min.js
    └── fonts/
        ├── glyphicons-halflings-regular.eot
        ├── glyphicons-halflings-regular.svg
        ├── glyphicons-halflings-regular.ttf
        ├── glyphicons-halflings-regular.woff
        └── glyphicons-halflings-regular.woff2

All the font files in the fonts folder should be added to your project but not all of these CSS and JavaScript files are required.

Frameworks are usually made up of many different parts. Often the CSS and JavaScript code are broken down into many separate files for organization (e.g. a button.css for only buttons styles) or written using a CSS preprocessor (more on this later). The precompiled files consolidate all the related CSS and JavaScript partial files into one standard file.

bootstrap.css: precompiled file for all of the framework styles

bootstrap-theme.css: precompiled file of all the theme styles

bootstrap.js: precompiled files for all of the JavaScript plugins

So what are those other files?

The “.min.css” and “min.js” files are the same as the three mentioned previously but they are minified files. Unnecessary characters, such as line breaks and spaces, are removed from the source code to make the file size smaller and improve performance. Adding these spaces make the code easier for humans to read but the computer doesn’t need it!

When using a framework, it’s best not to make changes to the original files. You can always create a separate CSS or JavaScript file to add your own customizations. Because of this, it’s recommended to use the minified version in your projects instead.

The “.css.map” files are source maps and can be used with some browsers’ developer tools for advanced debugging.

jQuery is required!

jQuery is a popular JavaScript library and is required for Bootstrap’s JavaScript plugins to work. According to the documentation, you can consult the bower.json file to see which versions of jQuery are supported.

At the bottom of the file, you’ll see something that looks like this:

"dependencies": {
    "jquery": ">= 1.9.1"
}

This means it will support versions 1.9.1 and up.

Option 2: Download the Source code

This option is useful if you’re more experienced with front-end development, familiar with Less and/or want more control over customizing the framework.

It contains the same files as option 1 but also includes the source files for the documentation, example files, CSS and JavaScript. The CSS source files are written using Less, a CSS preprocessor. There are also various other files included to provide support for packages, license information, and development.

This option requires a Less compiler, some setup and is documented here.

Option 3: Download Sass

This version is ported from Less to Sass (another CSS preprocessor) to include in Sass-only projects.

(Learn more about preprocessors here.)

Build a Basic Bootstrap Project

Now that you’ve downloaded all of the required files, you’re ready to create a Bootstrap powered project. Try following along with this exercise example below.

Create a project folder and add all the required Bootstrap files. Also, in your text editor, create a new blank html page and call it index.html. Your folder structure should look something like this:

my-project/
    ├── css/
    │   ├── bootstrap.min.css
    │   └── bootstrap-theme.min.css
    ├── js/
    │   └── bootstrap.min.js
    ├── fonts/
    │   ├── glyphicons-halflings-regular.eot
    │   ├── glyphicons-halflings-regular.svg
    │   ├── glyphicons-halflings-regular.ttf
    │   ├── glyphicons-halflings-regular.woff
    │   ├── glyphicons-halflings-regular.woff2
    └── index.html

In your newly created index.html file, start with the basic HTML tags required for all web pages.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- page information here -->
    <title>My web page title</title>
  </head>
  <body>
    <!-- page content here -->
  </body>
</html>

Then add three <meta> tags: for character encoding, Internet Explorer compatibility mode and mobile device support.

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- The above 3 meta tags *must* come first in the head -->

      <title>My web page title</title>
  </head>
  <body>
    <!-- page content here -->
  </body>
</html>

Next, add the Bootstrap CSS files and HTML5 shim to support IE8. The bootstrap-theme.min.css file is optional but should be added to use Bootstrap’s theme options.

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- The above 3 meta tags *must* come first in the head -->

      <title>My web page title</title>

      <!-- Bootstrap CSS -->
      <link href="css/bootstrap.min.css" rel="stylesheet">
      <link href="css/bootstrap-theme.min.css" rel="stylesheet">

      <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->
  </head>
  <body>
    <!-- page content here -->
  </body>
</html>

And finally, add the jQuery and Bootstrap JavaScript plugin files right before the closing </body> tag.

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- The above 3 meta tags *must* come first in the head -->

      <title>My web page title</title>

      <!-- Bootstrap CSS -->
      <link href="css/bootstrap.min.css" rel="stylesheet">
      <link href="css/bootstrap-theme.min.css" rel="stylesheet">

      <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->

  </head>
  <body>
    <!-- page content here -->


    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Phew! Now you’re ready to go!

The full basic template and documentation can be found here.

What next?

When using frameworks, be sure to read all the instructions and documentation to see what options are available. The main reason for using frameworks is to avoid re-inventing the wheel.

For example, if you want a round image, all you have to do is add an img-circle class to the <img> tag.

<img src="..." alt="..." class="img-circle">

But there’s so much documentation!

Here are some recommendations for where to start:

  • Grid System – Grid systems are used for creating page layouts through a series of rows and columns that house your content. Also includes responsive options.
  • Buttons – Bootstrap has all kinds of button styles! Different sizes, colors and even states (active, disabled). The button styles are consistent whether using a <button>, <a> or <input> tag.
  • Images – Images can be made responsive and also include different image styles.
  • Typography – Various typographical styles.
  • Glyphicons – Icon fonts.
  • Navs – Many different navigation styles ranging from tabs to pills to navigation bars.

If you want to add your own customizations, create your own css file and include if after the Bootstrap files. Use your own classes or use the Bootstrap classes to add your own styles.

Frameworks are great for common styles but don’t let that limit your imagination. Try out the different options, use what you want to use and leave out what you don’t need.

Experiment and have fun!

Code

Join the discussion

  • By Nikeyla - 4:07 AM on June 23, 2015  

    I have written many html5 websites, built four fluid grid websites, but I’ve just downloaded the Dreamweaver 2015 and would like to build a website using the bootstrap it offers. Can you direct me to a tutorial that steps me through it?

    Thanks

    • By Lindsay Munro - 4:22 PM on June 23, 2015  

      This might help get you started: http://adobe.ly/1JgxLpF

      We’re currently working on more in-depth tutorials on this exact topic and should have them posted on the blog in coming weeks. Be sure to subscribe in the footer for updates!

  • By Sibusiso Manyoni - 10:02 AM on July 3, 2015  

    If you want to design a front end application with dreamweaver cs5 that has the following:
    • Allow user to login secure then:
    o Capture client name and surname
    o Capture client’s birthdate
    • Save client data to the database
    • Validate captured details
    • Allow user to logout
    how can I do it e.g starting page?

  • By Gani - 3:17 AM on April 21, 2016  

    Hi, I wanted to learn Adobe digital front end technology.

    Please share me with latest Adobe technology and training details