WEB TECHNOLOGIES Ms Rabeea Jaffari CSS Frameworks Frameworks

WEB TECHNOLOGIES Ms Rabeea Jaffari

CSS Frameworks • Frameworks consolidate the designing process which speeds up the entire process of designing and developing websites. • CSS frameworks are front-end frameworks which assist people in structuring their pages to save time from cumbersome coding. These provide: • Provides a standard set of “easy to use” classes. • Typography style definitions. • Creation of grids. • Bring responsiveness and cross-browser compatibility to you. • Best suited for prototyping and building sites rapidly.

CSS Frameworks • Two most popular CSS frameworks are Bootstrap and Foundation. A simple comparison is as follows:

Comparsion of CSS Frameworks • Bootstrap Parameter Description Pros • • • Superiority in mobile support. Widest variety of templates. Possess fluid as well as fixed patterns in its grid system. Immense possibilities of its development as a tool in comparison to Foundation. Most of the celebrated custom web development companies prefer this tool. Cons Codes are not light weighted. Popular brands Lyft, Vogue, Riot Design, Newsweek

Comparsion of CSS Frameworks • Foundation Parameter Description Pros • • • Offers finest of the customization abilities. Possess a robust grid system. Supports a rapid development of projects. Contains set of templates and readily available codes. Offers services for sites as well as emails. Cons • • • A tad bit complexity in customization. Modification of codes is tough for beginners. Less popular in comparison to Bootstrap. Popular brands Adobe, Amazon, Ebay and Pixar etc.

BOOTSTRAP • Bootstrap is a free, open-source front-end library for designing websites and web applications. It contains HTML- and CSS-based design templates for everything from typography, forms, buttons, navigation and other interface components as well as Java. Script extensions for developing responsive, mobile-first websites. Wikipedia • Bootstrap, originally named Twitter Blueprint, was developed by Nirav Panchal and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools. • The latest version of Bootstrap is Bootstrap 4.

Bootstrap 4 vs Bootstrap 3 • Bootstrap 4 stable version released on 18 th Jan 2018 • Switched from Less to Sass. • Bootstrap 4 is written using Flexbox Grid, whereas Bootstrap 3 was written using the float method. • Bootstrap 4 uses rem CSS units whereas Bootstrap 3 uses px. • Added navigation customization options. • Increased global font-size from 14 px to 16 px.

Bootstrap 4 vs Bootstrap 3 • Added responsive spacing and sizing utilities. • Dropped the panel, thumbnail, and well components in favor of cards. • Dropped the Glyphicons, icon font and the pager component. • Added huge number of utility classes. • Improved form styling, buttons, drop-downs etc. • Rewrote almost all components, j. Query plugins and documentation.

Downloading & installing Bootstrap 4 • There are two ways to add the Bootstrap 4 library in your website and start using it. • Method 1: Include Bootstrap 4 from a CDN: If you don't want to download and host Bootstrap 4 yourself (on your webserver), you can include it from a CDN (Content Delivery Network). Max. CDN provides CDN support for Bootstrap's CSS and Java. Script. You can include links for CSS and scripts for JS Bootstrap components in your project between head tags as follows: •

Downloading & installing Bootstrap 4 • Method 1: Include Bootstrap 4 from a CDN (Contd. . ): For only including CSS components and not the JS ones, just include the CSS link file to your head tags as follows: • <link rel="stylesheet“ href="https: //maxcdn. bootstrapcdn. com/bootstrap/4. 0. 0/css/bootstrap. min. css" integrity="sha 384 Gn 5384 xq. Q 1 ao. WXA+058 RXPx. Pg 6 fy 4 IWv. TNh 0 E 263 Xm. Fc. Jl. SAwi. Gg. FAW/d. Ai. S 6 JXm" crossorigin="anonymous"> • Method 2: Download Bootstrap 4: Download the Bootstrap 4 library and use it locally. The library can be downloaded from http: //getbootstrap. com/

Bootstrap Basics • All the Bootstrap styles have been implemented as classes inside the library. So, in order to apply any Bootstrap style to your HTML element simply, use the Bootstrap class name as the “class” attribute of the element as follows: • <button type="button" class="btn">Basic</button> • Here btn Bootstrap class, creates a basic button (gray background and rounded corners). • If you want to incorporate styles from multiple classes, simply separate the class names with a space inside the class attribute of the HTML element as follows: • <button type="button" class="btn btn-primary">Primary</button> • This applies two Bootstrap classes to the HTML button tag, the basic btn class and then the btnprimary class for making the button blue with white text.

Getting started: Basic template • Be sure to have your pages set up with the latest design and development standards for using Bootstrap 4. • Use an HTML 5 doctype • Include all the CSS link and JS scripts in your HTML document (head section recommended). • Including a viewport meta tag for proper responsive behaviors. • <meta name="viewport" content="width=device-width, initial-scale=1, shrink-tofit=no">

Getting started: Basic template

Bootstrap 4 Grid System • Bootstrap is usually built around the grid system that helps you to create your layout and easily build a responsive website. • The grid is divided into 12 columns, so your layout will be based on this. If you do not want to use all 12 columns individually, you can group the columns together to create wider columns. Grid system components are as follows: • Container: Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers by using the container-fluid or the container class in your HTML div: • <div class="container-fluid"> - will display your content with the full available width • <div class="container"> - will center your content and give it appropriate side margins.

Bootstrap 4 Grid System • Rows: Rows create horizontal groups of columns inside the grid. Therefore, if you want to split your layout horizontally, use class row in your HTML div as follows: • <div class="row">. • Columns: As described earlier, the grid system uses 12 columns. Make sure that the sum of columns adds up to 12 or fewer within a row (it is not required that you use all 12 available columns). • To use the grid system you’ll have to add a. row Bootstrap class to the main div of your HTML document and then, add the desired number of columns (tags with appropriate col -*-* classes discussed ahead).

Bootstrap 4 Grid System • The Bootstrap 4 grid system has five classes. • For example, to create four equal-width columns starting at tablets and scaling to extra large desktops we can write the code as:

Building a Sample Landing Page • Let’s start with the Bootstrap template discussed in earlier slides to create a Landing page (one page) site with Bootstrap. Adding Navigation bar: The navbar classes build a responsive navbar. To get it, we are going to add the following HTML code with navbar classes to our Bootstrap template file:

Building a Sample Landing Page

Building a Sample Landing Page • The default design of Bootstrap is based on a minimalistic theme and would create a responsive but simple navigation bar as shown below: • To customize the default css designs, we can code our own style sheet and then include it in the webpage using the link tag as follows: • <link rel="stylesheet" type="text/css" href="mystyle. css">

Building a Sample Landing Page • Custom stylesheet: The code for custom stylesheet is put up in mystyle. css and is as follows:

Building a Sample Landing Page • Custom stylesheet: The output would then be as follows: • It can be seen that the navigation bar is responsive by default for different screen sizes.

Building a Sample Landing Page • Adding Header: Let’s create a layout for the header by adding the following HTML code below the nav bar code:

Building a Sample Landing Page • Adding Header Styles: Now let’s customize the header a bit using the following css in our mystyles. css file: To ensure that the header takes the full window height, we used its width as 100 vh (vh= viewport height). Viewport refers to the currently visible portion of the browser window.

Building a Sample Landing Page • Adding Header: Our site with the header now looks as follows:

TASKS • Complete all the parts of the landing webpage (About, Team, Portfolio etc. ) using BS 4. • You can choose to do the above parts using ready-made BS 4 components’ code snippets available at the following sites: • https: //bootsnipp. com/tags/4. 0. 0 • https: //startbootstrap. com/snippets/