Session | BootStrap 4 | Css3 | Css Animation

1. BOOTSTRAP 4
Krishan Mohan
Gaurav mall

2. Outline
■ Top 5 Most Popular CSS Frameworks
■ What is Bootstrap?
■ What is new in B4?
■ Sass
■ Review of REM units and demo
■ FLEXBOX
■ BS Grid History
■ BS4 Grid System

3. Top 5 Most Popular CSS Frameworks

5. What is Bootstrap 4?
■ Bootstrap is the most popular CSS framework for RAPIDWEBSITE PROTOTYPING.
■ What is the grid?
■ FLEXBOX
■ Sass architecture
■ Open source

6. What is new in Bootstrap 4?
■ EnhancedGRID
■ Switched from LESS to SASS
■ Cards component
■ REM instead of Pixels CSS units
■ FLEXBOX grid support
■ Re Boot - replaces normalizer
■ No more IE8!!!!!!

7. What is a CSS reset?
Its an additional block of CSS that will help with consistency in the default styling of
HTML elements.
■ Eric mayer’s CSS reset
■ Normalizer
■ B4 new Reboot
■ HTML5 reset

8. Sass
■ Sass is an extension of CSS that allows for more functional syntax. Sass always needs
to be compiled into CSS.
■ Sass is used by developers to produce more modular and easy to maintain code on the
source code.
■ The easiest way to get started with Sass is with a compiler program like Koala

9. ■ Bootstrap 4 ships with a _custom.scss file for easy overriding of default variables.
■ For Global variables, use _variables.scss
■ Be sure to remove the !default flag from override values.

10. How REM units work
■ The rem unit is relative to the root—or the html—element.That means that we can define a
single font size on the html element and define all rem units to be a percentage of that.
■ html { font-size: 62.5%; }
■ body { font-size: 1.4rem; } /* =14px */
■ h1 { font-size: 2.4rem; } /* =24px */
EMs
■ 1em is equal to the current font size.The default text size in browsers is 16px. So, the
default size of 1em is 16px.
REMs
■ Equal to the computed value of font-size on the root element.When specified on the font-
size property of the root element, the rem units refer to the property's initial value.
PIXELS
■ The pixel (a word invented from "picture element") is the basic unit of programmable color
on a computer display or in a computer image

11. How does the FLEXBOX work?
■ FLEXBOX is a CSS3 layout mode that provides an easier way to arrange elements
within a container
■ No FLOATS
■ No margin collapse
■ Order of elements is controlled from CSS
■ Designed for screens
■ Easier to position child elements
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

12. Can we use FLEXBOX now?
■ YES, but be careful & use fall backs when possible.
■ 90% of Browser support FLEXBOX
■ IE has no support
■ EDGE partial support
■ Legacy mobile browsers no support or partial support
https://caniuse.com/#feat=flexbox

13. Basic FLEXBOX Utilities
Vertical Alignment (row)
■ align-items-start
■ align-items-center
■ align-items-end
Order of itement (col)
■ flex-unordered
■ flex-first
■ flex-last
Horizontal Alignment (row)
■ justify-content-start
■ justify-content-center
■ Justify-content-end
■ justify-content-around
■ justify-content-between

14. The BS Grid History
■ Looking back at Bootstrap 3, the 4 grid tiers (‘xs’, ’sm’, ‘md’ and ‘lg’ breakpoints) .
■ The smallest breakpoint has a wide range of devices less than 768px in width.

15. Bootstrap 4 Grid
■ Introducing the new XL grid tier
There are 5 tiers (or breakpoints) to support typical portrait and landscape screen
widths.
■ New grid breakpoint with the col-xl-*classes
■ Breakpoints:
The XL breakpoint is screen widths>1200px
■ The LG breakpoint is screen widths>992px
■ The MD breakpoint is screen widths>768px
■ The SM breakpoint is screen widths>544px
■ The XS breakpoint is screen widths<544px

16. CSS Layout -The position Property
The position property specifies the type of positioning method used for an element.
■ There are five different position values:
■ static
■ relative
■ fixed
■ absolute
■ Sticky- Note: IE/Edge 15 and earlier versions do not support sticky position.

17. The CSS Box Model
■ Content -The content of the box, where text and images appear
■ Padding - Clears an area around the content.The padding is transparent
■ Border - A border that goes around the padding and content
■ Margin - Clears an area outside the border.The margin is transparent

18. CSSVariables
■ Variables in CSS should be declared within a CSS selector that defines its scope. For a
global scope you can use either the :root or the body selector.
■ The syntax of the var() function is as follows: var(custom-name, value)
Example:
■ https://codepen.io/krishan101090/pen/YvxzWP?editors=1100

19. CSS ANIMATION - KEYFRAMES
■ The @keyframes rule specifies the animation code.
■ During the animation, you can change the set of CSS styles many times.
■ Specify when the style change will happen in percent, or with the keywords "from" and
"to", which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is
when the animation is complete.
■ https://codepen.io/krishan101090/pen/jKLOPG

20. Question And Answes