Technical Notes Of
Ehi Kioya

Technical Notes Of Ehi Kioya

Getting Started with Frontend Frameworks Using Bootstrap

Tagged: , , , , , ,

Viewing 1 post (of 1 total)
  • Author
    Posts
  • February 16, 2020 at 3:33 pm #85948
    Participant
    @oghenemarho

    bootstrap-illustration

    Web development can be a tedious process to manage these days because of the growing number of moving parts that a developer has to keep track of, not to mention the myriad types of languages and methodologies required for implementing a design according to best practices. It is because of reasons like this that some developers have come up with frameworks to help ease the burden of development.

    While there are several languages and tools that are required to develop a website or web application, the truth is that a lot of web based projects have parts that are common to each of them. For instance, almost every website will have a layout that will include a header and footer that will be common across almost all the pages of the site, or a menu that has a consistent design across pages. And not just for a particular website, these elements are part of a standard for modern websites and it’s very rare to see a website that doesn’t have one or more of these elements. So why build them from scratch every time you have to develop a web application or website? That’s where frameworks come in, especially frontend ones.

    A frontend framework can be described as a collection or library of components and code snippets commonly used in frontend development, that have been prewritten and packaged in standardized formats. In this case, frontend simply refers to all the parts of a web development project that are visible to the end user. The purpose of the framework is to simply the process of development by making these commonly used components readily available to the developer to customize and use as they see fit. Another advantage of using these frontend frameworks is the knowledge that your code will work because of the extensive testing and widespread compatibility that is built into most of these frameworks.

    One of the most commonly used frontend frameworks available to developers today is Bootstrap, an open source CSS framework that was first launched in 2011 as a tool for mobile first frontend development. It contains CSS and JavaScript code snippets that can serve as design templates for common web interface component such as forms, buttons, headers, footers, menus and typography. By implementing Bootstrap in your frontend design, you can ensure consistency across all the various user facing sections of your web development project.

    Let’s get started with designing a simple homepage using Bootstrap to get a feel of the syntax and how bootstrap works.

    Installing Bootstrap

    There are 2 popular ways to get Bootstrap running in your local development environment. The first and most obvious way is to download the Bootstrap files to your computer. This will give you the compiled versions of the Bootstrap CSS and JavaScript files. Visit the Bootstrap website (getbootstrap.com) and click on the download button there to get a zipped folder containing the necessary files. Once the download is completed, extract the files from the zipped folder and then copy them to the directory of your web project.

    Inside your Bootstrap folder you should have 2 subfolders:

    • one named CSS which contains all the stylesheet files for the bootstrap framework, in CSS format, minified map format for CSS preprocessors, and;
    • the other named js which contain the relevant javascript code for the framework, also available in different formats.

    If you do not want to host the Bootstrap files locally, then you can link to them using one of several Bootstrap content delivery networks (CDNs). The advantage of this is that you minimize the load of your web project, thereby reducing load times of your website.

    Now we need to link our bootstrap files to our web project. Specifically, we will need links to the minified versions of the Bootstrap CSS and JS files. For Bootstrap to run well, we would also need to add links to the latest version of jQuery. We can either download the jQuery file or use a CDN for it. To do the linking, open the index.html file of your web project in whatever text editor or IDE you use and in the HEAD section of your html code, after including the necessary TITLE and META tags, you will need to add in code in the format below:

    The viewport meta tag is to ensure that the page will render properly on mobile and touch based devices. The first stylesheet link is to the Bootstrap CSS files on your local system that you downloaded and extracted. Same with the script tags for jQuery and Bootstrap JS. If you wish to use the CDN versions rather than downloading the files, then your code will look like this instead:

    Now that we’ve sorted out the basics, time to start adding some common webpage components to our project.

    NavBar

    For the navigation elements, which is one of the most common elements for websites, Bootstrap has a special NavBar CSS class to implement this feature. This class comes with some generic styling that can be modified in the body of your code to make it more unique. Special attributes can be added to change the alignment, invert the color, add buttons or fix its position. For our example, we will stick with the default styling:

    Notice the following sub-classes in the navbar component that add special attributes, such as the navbar-brand for your company or project name, navbar-nav for full height and lightweight navigational sub components and navbar-default which indicates that we are using the default navbar style.

    Container

    After the NavBar, we will add a container that will wrap all the elements of site and provide some styling with respect to the spacing from the edges of our screen. The Bootstrap CSS class for implementing a responsive, fixed width container is container-fluid. Below is an example with some sample text:

    Jumbotron

    This is simply a big box area, usually located at the top of a page that can be used to call attention to some content on the webpage. The jumbotron can be located inside or outside the container, depending on what styling you want to implement. Bootstrap uses the jumbotron class to implement this as shown below:

    Buttons

    Yet another element with unique stylings in Bootstrap depending on what sort of interactions you intend to use it for. In our example, we will use the default button class as shown below, adding it to our jumbotron:

    Grids

    Bootstrap makes use of a grid system to arrange content on webpages. The grid system allows for a maximum of 12 columns that can be grouped and resized according to how you want the content to appear on different screen sizes. There are 4 main classes Bootstrap uses to identify screen sizes:

    • xs (for phones – screens less than 768px wide)
    • sm (for tablets – screens equal to or greater than 768px wide)
    • md (for small laptops – screens equal to or greater than 992px wide)
    • lg (for laptops and desktops – screens equal to or greater than 1200px wide)

    The basic structure for a Bootstrap grid involves first creating a row using the row class, and then specifying the required number of columns in such a way that the total number adds up to 12. For example:

    The code above will create a row containing 3 small and equal width columns that will be displayed side by side on large screens but stacked on top of each other on smaller devices.

    Conclusion

    If we put together all the sample code we’ve written using the Bootstrap framework and add some very simple inline styling, it will look like this:

    Saving and running this code will produce a website with this look:

    And viewing the same webpage on a mobile device produces slightly different results:

    All of this is achieved with just the bare minimum of HTML and CSS implementation on the part of the developer because of the advantages of frameworks such as Bootstrap. It is easy to see how frameworks like this can serve as a prototyping tool to roll out a barebones interface that clients or team members can provide feedback on, or even be implemented in full-fledged development environments to fast track development and rollout.

    What is covered here is the bare minimum of what can be achieved with Bootstrap. Detailed documentation of the framework is available at https://getbootstrap.com/docs/4.4/getting-started/introduction/ to guide your development process and enable frontend developers come up with even more intricate designs.

  • Author
    Posts
Viewing 1 post (of 1 total)
  • You must be logged in to reply to this topic.