Slides bootstrap-4

BootStrap 4
v4.0.0-alpha.6
@micposso
Front-End Developer

Outline:
● What is Bootstrap?
● What is new in B4?
● Sass review and coding exercise
● Review of REM units and demo
● FLEXBOX coding exercise
● Review of B4 components

What is Bootstrap 4?
Bootstrap is the most popular CSS framework for
RAPID WEBSITE PROTOTYPING.
● What is the grid?
● What is bootstrap.js and Jquery?
● Grid vs FLEXBOX
● Sass architecture
● Open source
● Battle tested
● Still in Alpha!!!!!!
https://v4-alpha.getbootstrap.com/

z
Bootstrap componentsYour website
https://v4-alpha.getbootstrap.com/components/navbar/

What is new in Bootstrap 4?
● Enhanced GRID
● Switched from LESS to SASS
● Cards component
● REM instead of Pixels CSS units
● FLEXBOX grid support
● ReBoot - replaces normalizer
● No more IE8!!!!!!

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

How to use Bootstrap 4 in your project
● Download source files
● Customize download
● Use CDN versions
● NPM package
● Customize files
● Via RubyGems
● Composer

All bootstrap websites look the same!
How to customize B4?

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
http://sass-lang.com/guide

Sass
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.
https://v4-alpha.getbootstrap.com/getting-started/options/

Coding Time!
1. Open project folder /B4-sass
2. Install Koala
3. Open Koala
4. Specify SRC and DEST folders
5. Open the SASS files to add custom rules
6. Create a new Variable for a color
7. Create a new mixing for a border radius rule
8. Check compiles CSS file
http://koala-app.com/
https://www.canva.com/color-palette/

https://css-tricks.com/snippets/css/a-guide-to-flexbox/
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

Coding Time!
1. Open project folder /flexbox/flexbox.html
2. Create
3. Open Koala
4. Specify SRC and DEST folders
5. Change B4 Sass files
6. Create a new Variable for a color
7. Create a new mixing for a border radius rule
8. Check compiles CSS file
http://koala-app.com/
https://www.canva.com/color-palette/

https://snook.ca/archives/html_and_css/font-size-with-rem
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 */

Can I use FLEXBOX now?
YES, but be careful & use fallbacks 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

The BS4 Grid
Container
-----Row
---------columns
--------------components
BS4 uses Rems and Ems for columns widths, but is using PX for
Responsive breakpoints.

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
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Horizontal Alignment (row)
justify-content-start
justify-content-center
Justify-content-end
justify-content-around
justify-content-between

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.
Measurement units in digital media are not exact! Designers use
software that was meant for print to design websites.

Bootstrap Components
Always check the documentation to find out if a
component needs other dependencies!

Bootstrap CARDS components
A card is a flexible and extensible content
container. It includes options for headers and
footers, a wide variety of content, contextual
background colors, and powerful display options.
https://material.io/

The Media Object
The media object helps build complex and
repetitive components where some media is
positioned alongside content that doesn’t wrap
around said media. Plus, it does this with only two
required classes thanks to flexbox.
https://acss.io/

JavaScript Components
● Slideshow
● ScrollSpy
● ToolTips
● PopOvers
● Modals
JS components use Jquery and the Bootstrap JS file. The components can be
configured in the HTML via data attributes.
$(document).off('.data-api')
https://v4-alpha.getbootstrap.com/getting-started/javascript/

Coding Time!
1. Open project folder /SITE1/
2. Open wireframes files
3. Look at layout and identify blocks
4. Set up your HTML file
5. Begin building the layout from top to bottom
6. Refer to BS4 site for components
7. Create custom CSS rules

Slides bootstrap-4

More Related Content

What's hot (17)

Similar to Slides bootstrap-4 (20)

Recently uploaded (20)

Slides bootstrap-4