SlideShare a Scribd company logo
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!!!!!!
https://v4-alpha.getbootstrap.com/
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
https://v4-alpha.getbootstrap.com/
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

More Related Content

What's hot

Bootstrap 5 ppt
Bootstrap 5 pptBootstrap 5 ppt
Bootstrap 5 ppt
Mallikarjuna G D
 
Bootstrap [part 1]
Bootstrap [part 1]Bootstrap [part 1]
Bootstrap [part 1]
Ghanshyam Patel
 
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by StepBootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap Creative
 
Bootstrap 5 whats new
Bootstrap 5   whats newBootstrap 5   whats new
Bootstrap 5 whats new
Sandun Perera
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
McSoftsis
 
Bootstrap
BootstrapBootstrap
Bootstrap
AvinashChunduri2
 
Bootstrap
BootstrapBootstrap
Bootstrap
Jadson Santos
 
Getting started with CSS frameworks using Zurb foundation
Getting started with CSS frameworks using Zurb foundationGetting started with CSS frameworks using Zurb foundation
Getting started with CSS frameworks using Zurb foundation
Melanie Archer
 
Bootstrap 5 basic
Bootstrap 5 basicBootstrap 5 basic
Bootstrap 5 basic
Jubair Ahmed Junjun
 
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
Battle of the Front-End Frameworks: Bootstrap vs. FoundationBattle of the Front-End Frameworks: Bootstrap vs. Foundation
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
Rachel Cherry
 
Module 3 - Intro to Bootstrap
Module 3 - Intro to BootstrapModule 3 - Intro to Bootstrap
Module 3 - Intro to Bootstrap
Katherine McCurdy-Lapierre, R.G.D.
 
WordPress Theming Best Practices
WordPress Theming Best PracticesWordPress Theming Best Practices
WordPress Theming Best Practices
Brian Krogsgard
 
Bootstrap - Web Development Framework
Bootstrap - Web Development FrameworkBootstrap - Web Development Framework
Bootstrap - Web Development Framework
Cindy Royal
 
Bootstrap - Basics
Bootstrap - BasicsBootstrap - Basics
Bootstrap - Basics
FirosK2
 
Zurb foundation
Zurb foundationZurb foundation
Zurb foundation
sean_todd
 
Put A Map On It! Enhanced geolocation in WordPress with Geo Mashup
Put A Map On It! Enhanced geolocation in WordPress with Geo MashupPut A Map On It! Enhanced geolocation in WordPress with Geo Mashup
Put A Map On It! Enhanced geolocation in WordPress with Geo Mashup
Jer Clarke
 
Design Concepts and Web Design
Design Concepts and Web DesignDesign Concepts and Web Design
Design Concepts and Web Design
Mindy McAdams
 

What's hot (17)

Bootstrap 5 ppt
Bootstrap 5 pptBootstrap 5 ppt
Bootstrap 5 ppt
 
Bootstrap [part 1]
Bootstrap [part 1]Bootstrap [part 1]
Bootstrap [part 1]
 
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by StepBootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
Bootstrap 4 Tutorial PDF for Beginners - Learn Step by Step
 
Bootstrap 5 whats new
Bootstrap 5   whats newBootstrap 5   whats new
Bootstrap 5 whats new
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Getting started with CSS frameworks using Zurb foundation
Getting started with CSS frameworks using Zurb foundationGetting started with CSS frameworks using Zurb foundation
Getting started with CSS frameworks using Zurb foundation
 
Bootstrap 5 basic
Bootstrap 5 basicBootstrap 5 basic
Bootstrap 5 basic
 
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
Battle of the Front-End Frameworks: Bootstrap vs. FoundationBattle of the Front-End Frameworks: Bootstrap vs. Foundation
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
 
Module 3 - Intro to Bootstrap
Module 3 - Intro to BootstrapModule 3 - Intro to Bootstrap
Module 3 - Intro to Bootstrap
 
WordPress Theming Best Practices
WordPress Theming Best PracticesWordPress Theming Best Practices
WordPress Theming Best Practices
 
Bootstrap - Web Development Framework
Bootstrap - Web Development FrameworkBootstrap - Web Development Framework
Bootstrap - Web Development Framework
 
Bootstrap - Basics
Bootstrap - BasicsBootstrap - Basics
Bootstrap - Basics
 
Zurb foundation
Zurb foundationZurb foundation
Zurb foundation
 
Put A Map On It! Enhanced geolocation in WordPress with Geo Mashup
Put A Map On It! Enhanced geolocation in WordPress with Geo MashupPut A Map On It! Enhanced geolocation in WordPress with Geo Mashup
Put A Map On It! Enhanced geolocation in WordPress with Geo Mashup
 
Design Concepts and Web Design
Design Concepts and Web DesignDesign Concepts and Web Design
Design Concepts and Web Design
 

Similar to Slides bootstrap-4

Know the reason behind choosing bootstrap as css framework
Know the reason behind choosing bootstrap as css frameworkKnow the reason behind choosing bootstrap as css framework
Know the reason behind choosing bootstrap as css framework
Omkarsoft Bangalore
 
Krishan gaurav-sapient bootstrapsession
Krishan gaurav-sapient bootstrapsessionKrishan gaurav-sapient bootstrapsession
Krishan gaurav-sapient bootstrapsession
Krishan Mohan
 
Html & CSS - Best practices 2-hour-workshop
Html & CSS - Best practices 2-hour-workshopHtml & CSS - Best practices 2-hour-workshop
Html & CSS - Best practices 2-hour-workshop
Vero Rebagliatte
 
CSS Frameworks: Categories, Criteria and Recommendations
CSS Frameworks: Categories, Criteria and RecommendationsCSS Frameworks: Categories, Criteria and Recommendations
CSS Frameworks: Categories, Criteria and Recommendations
sirajrkhan
 
ACM TechTalks : Apache Arrow and the Future of Data Frames
ACM TechTalks : Apache Arrow and the Future of Data FramesACM TechTalks : Apache Arrow and the Future of Data Frames
ACM TechTalks : Apache Arrow and the Future of Data Frames
Wes McKinney
 
Html,CSS & UI/UX design
Html,CSS & UI/UX designHtml,CSS & UI/UX design
Html,CSS & UI/UX design
Karthikeyan Dhanasekaran CUA
 
Why you need to switch to bootstrap 4.0?
Why you need to switch to bootstrap 4.0?Why you need to switch to bootstrap 4.0?
Why you need to switch to bootstrap 4.0?
MarkupBox
 
BP-9 Share Customization Best Practices
BP-9 Share Customization Best PracticesBP-9 Share Customization Best Practices
BP-9 Share Customization Best Practices
Alfresco Software
 
Analyzing bootsrap and foundation font-end frameworks : a comparative study
Analyzing bootsrap and foundation font-end frameworks : a comparative studyAnalyzing bootsrap and foundation font-end frameworks : a comparative study
Analyzing bootsrap and foundation font-end frameworks : a comparative study
IJECEIAES
 
Prueba ppt
Prueba pptPrueba ppt
Prueba ppt
Ulises Torelli
 
Html5v1
Html5v1Html5v1
Code igniter
Code igniterCode igniter
Code igniter
Reenner Salazar
 
Framework
FrameworkFramework
Framework
FrameworkFramework
Framework
guest7560f49e
 
Building Commercial Applications with Oracle Applications Express by Scott Sp...
Building Commercial Applications with Oracle Applications Express by Scott Sp...Building Commercial Applications with Oracle Applications Express by Scott Sp...
Building Commercial Applications with Oracle Applications Express by Scott Sp...
Enkitec
 
The ultimate cheat sheet on .net core, .net framework, and .net standard
The ultimate cheat sheet on .net core, .net framework, and .net standardThe ultimate cheat sheet on .net core, .net framework, and .net standard
The ultimate cheat sheet on .net core, .net framework, and .net standard
Concetto Labs
 
Best 5 CSS Frameworks You Should Know To Design Attractive Websites .pdf
Best 5 CSS Frameworks You Should Know To Design Attractive Websites .pdfBest 5 CSS Frameworks You Should Know To Design Attractive Websites .pdf
Best 5 CSS Frameworks You Should Know To Design Attractive Websites .pdf
Appdeveloper10
 
Le Wagon Tokyo | Build your Landing Page in 2 hours
Le Wagon Tokyo | Build your Landing Page in 2 hoursLe Wagon Tokyo | Build your Landing Page in 2 hours
Le Wagon Tokyo | Build your Landing Page in 2 hours
YannKlein2
 
Web technologies-course 06.pptx
Web technologies-course 06.pptxWeb technologies-course 06.pptx
Web technologies-course 06.pptx
Stefan Oprea
 
Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017
Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017
Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017
La Drupalera
 

Similar to Slides bootstrap-4 (20)

Know the reason behind choosing bootstrap as css framework
Know the reason behind choosing bootstrap as css frameworkKnow the reason behind choosing bootstrap as css framework
Know the reason behind choosing bootstrap as css framework
 
Krishan gaurav-sapient bootstrapsession
Krishan gaurav-sapient bootstrapsessionKrishan gaurav-sapient bootstrapsession
Krishan gaurav-sapient bootstrapsession
 
Html & CSS - Best practices 2-hour-workshop
Html & CSS - Best practices 2-hour-workshopHtml & CSS - Best practices 2-hour-workshop
Html & CSS - Best practices 2-hour-workshop
 
CSS Frameworks: Categories, Criteria and Recommendations
CSS Frameworks: Categories, Criteria and RecommendationsCSS Frameworks: Categories, Criteria and Recommendations
CSS Frameworks: Categories, Criteria and Recommendations
 
ACM TechTalks : Apache Arrow and the Future of Data Frames
ACM TechTalks : Apache Arrow and the Future of Data FramesACM TechTalks : Apache Arrow and the Future of Data Frames
ACM TechTalks : Apache Arrow and the Future of Data Frames
 
Html,CSS & UI/UX design
Html,CSS & UI/UX designHtml,CSS & UI/UX design
Html,CSS & UI/UX design
 
Why you need to switch to bootstrap 4.0?
Why you need to switch to bootstrap 4.0?Why you need to switch to bootstrap 4.0?
Why you need to switch to bootstrap 4.0?
 
BP-9 Share Customization Best Practices
BP-9 Share Customization Best PracticesBP-9 Share Customization Best Practices
BP-9 Share Customization Best Practices
 
Analyzing bootsrap and foundation font-end frameworks : a comparative study
Analyzing bootsrap and foundation font-end frameworks : a comparative studyAnalyzing bootsrap and foundation font-end frameworks : a comparative study
Analyzing bootsrap and foundation font-end frameworks : a comparative study
 
Prueba ppt
Prueba pptPrueba ppt
Prueba ppt
 
Html5v1
Html5v1Html5v1
Html5v1
 
Code igniter
Code igniterCode igniter
Code igniter
 
Framework
FrameworkFramework
Framework
 
Framework
FrameworkFramework
Framework
 
Building Commercial Applications with Oracle Applications Express by Scott Sp...
Building Commercial Applications with Oracle Applications Express by Scott Sp...Building Commercial Applications with Oracle Applications Express by Scott Sp...
Building Commercial Applications with Oracle Applications Express by Scott Sp...
 
The ultimate cheat sheet on .net core, .net framework, and .net standard
The ultimate cheat sheet on .net core, .net framework, and .net standardThe ultimate cheat sheet on .net core, .net framework, and .net standard
The ultimate cheat sheet on .net core, .net framework, and .net standard
 
Best 5 CSS Frameworks You Should Know To Design Attractive Websites .pdf
Best 5 CSS Frameworks You Should Know To Design Attractive Websites .pdfBest 5 CSS Frameworks You Should Know To Design Attractive Websites .pdf
Best 5 CSS Frameworks You Should Know To Design Attractive Websites .pdf
 
Le Wagon Tokyo | Build your Landing Page in 2 hours
Le Wagon Tokyo | Build your Landing Page in 2 hoursLe Wagon Tokyo | Build your Landing Page in 2 hours
Le Wagon Tokyo | Build your Landing Page in 2 hours
 
Web technologies-course 06.pptx
Web technologies-course 06.pptxWeb technologies-course 06.pptx
Web technologies-course 06.pptx
 
Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017
Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017
Efficiently theming a multi-site Drupal 8 portal - Drupal Dev Days Seville 2017
 

Recently uploaded

Null Bangalore | Pentesters Approach to AWS IAM
Null Bangalore | Pentesters Approach to AWS IAMNull Bangalore | Pentesters Approach to AWS IAM
Null Bangalore | Pentesters Approach to AWS IAM
Divyanshu
 
Open Channel Flow: fluid flow with a free surface
Open Channel Flow: fluid flow with a free surfaceOpen Channel Flow: fluid flow with a free surface
Open Channel Flow: fluid flow with a free surface
Indrajeet sahu
 
Data Driven Maintenance | UReason Webinar
Data Driven Maintenance | UReason WebinarData Driven Maintenance | UReason Webinar
Data Driven Maintenance | UReason Webinar
UReason
 
Software Engineering and Project Management - Introduction, Modeling Concepts...
Software Engineering and Project Management - Introduction, Modeling Concepts...Software Engineering and Project Management - Introduction, Modeling Concepts...
Software Engineering and Project Management - Introduction, Modeling Concepts...
Prakhyath Rai
 
2. protection of river banks and bed erosion protection works.ppt
2. protection of river banks and bed erosion protection works.ppt2. protection of river banks and bed erosion protection works.ppt
2. protection of river banks and bed erosion protection works.ppt
abdatawakjira
 
Accident detection system project report.pdf
Accident detection system project report.pdfAccident detection system project report.pdf
Accident detection system project report.pdf
Kamal Acharya
 
一比一原版(爱大毕业证书)爱荷华大学毕业证如何办理
一比一原版(爱大毕业证书)爱荷华大学毕业证如何办理一比一原版(爱大毕业证书)爱荷华大学毕业证如何办理
一比一原版(爱大毕业证书)爱荷华大学毕业证如何办理
nedcocy
 
Call For Paper -3rd International Conference on Artificial Intelligence Advan...
Call For Paper -3rd International Conference on Artificial Intelligence Advan...Call For Paper -3rd International Conference on Artificial Intelligence Advan...
Call For Paper -3rd International Conference on Artificial Intelligence Advan...
ijseajournal
 
原版制作(Humboldt毕业证书)柏林大学毕业证学位证一模一样
原版制作(Humboldt毕业证书)柏林大学毕业证学位证一模一样原版制作(Humboldt毕业证书)柏林大学毕业证学位证一模一样
原版制作(Humboldt毕业证书)柏林大学毕业证学位证一模一样
ydzowc
 
AI-Based Home Security System : Home security
AI-Based Home Security System : Home securityAI-Based Home Security System : Home security
AI-Based Home Security System : Home security
AIRCC Publishing Corporation
 
LLM Fine Tuning with QLoRA Cassandra Lunch 4, presented by Anant
LLM Fine Tuning with QLoRA Cassandra Lunch 4, presented by AnantLLM Fine Tuning with QLoRA Cassandra Lunch 4, presented by Anant
LLM Fine Tuning with QLoRA Cassandra Lunch 4, presented by Anant
Anant Corporation
 
AI + Data Community Tour - Build the Next Generation of Apps with the Einstei...
AI + Data Community Tour - Build the Next Generation of Apps with the Einstei...AI + Data Community Tour - Build the Next Generation of Apps with the Einstei...
AI + Data Community Tour - Build the Next Generation of Apps with the Einstei...
Paris Salesforce Developer Group
 
Mechanical Engineering on AAI Summer Training Report-003.pdf
Mechanical Engineering on AAI Summer Training Report-003.pdfMechanical Engineering on AAI Summer Training Report-003.pdf
Mechanical Engineering on AAI Summer Training Report-003.pdf
21UME003TUSHARDEB
 
Mechatronics material . Mechanical engineering
Mechatronics material . Mechanical engineeringMechatronics material . Mechanical engineering
Mechatronics material . Mechanical engineering
sachin chaurasia
 
Applications of artificial Intelligence in Mechanical Engineering.pdf
Applications of artificial Intelligence in Mechanical Engineering.pdfApplications of artificial Intelligence in Mechanical Engineering.pdf
Applications of artificial Intelligence in Mechanical Engineering.pdf
Atif Razi
 
P5 Working Drawings.pdf floor plan, civil
P5 Working Drawings.pdf floor plan, civilP5 Working Drawings.pdf floor plan, civil
P5 Working Drawings.pdf floor plan, civil
AnasAhmadNoor
 
Supermarket Management System Project Report.pdf
Supermarket Management System Project Report.pdfSupermarket Management System Project Report.pdf
Supermarket Management System Project Report.pdf
Kamal Acharya
 
TIME TABLE MANAGEMENT SYSTEM testing.pptx
TIME TABLE MANAGEMENT SYSTEM testing.pptxTIME TABLE MANAGEMENT SYSTEM testing.pptx
TIME TABLE MANAGEMENT SYSTEM testing.pptx
CVCSOfficial
 
一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理
uqyfuc
 
OOPS_Lab_Manual - programs using C++ programming language
OOPS_Lab_Manual - programs using C++ programming languageOOPS_Lab_Manual - programs using C++ programming language
OOPS_Lab_Manual - programs using C++ programming language
PreethaV16
 

Recently uploaded (20)

Null Bangalore | Pentesters Approach to AWS IAM
Null Bangalore | Pentesters Approach to AWS IAMNull Bangalore | Pentesters Approach to AWS IAM
Null Bangalore | Pentesters Approach to AWS IAM
 
Open Channel Flow: fluid flow with a free surface
Open Channel Flow: fluid flow with a free surfaceOpen Channel Flow: fluid flow with a free surface
Open Channel Flow: fluid flow with a free surface
 
Data Driven Maintenance | UReason Webinar
Data Driven Maintenance | UReason WebinarData Driven Maintenance | UReason Webinar
Data Driven Maintenance | UReason Webinar
 
Software Engineering and Project Management - Introduction, Modeling Concepts...
Software Engineering and Project Management - Introduction, Modeling Concepts...Software Engineering and Project Management - Introduction, Modeling Concepts...
Software Engineering and Project Management - Introduction, Modeling Concepts...
 
2. protection of river banks and bed erosion protection works.ppt
2. protection of river banks and bed erosion protection works.ppt2. protection of river banks and bed erosion protection works.ppt
2. protection of river banks and bed erosion protection works.ppt
 
Accident detection system project report.pdf
Accident detection system project report.pdfAccident detection system project report.pdf
Accident detection system project report.pdf
 
一比一原版(爱大毕业证书)爱荷华大学毕业证如何办理
一比一原版(爱大毕业证书)爱荷华大学毕业证如何办理一比一原版(爱大毕业证书)爱荷华大学毕业证如何办理
一比一原版(爱大毕业证书)爱荷华大学毕业证如何办理
 
Call For Paper -3rd International Conference on Artificial Intelligence Advan...
Call For Paper -3rd International Conference on Artificial Intelligence Advan...Call For Paper -3rd International Conference on Artificial Intelligence Advan...
Call For Paper -3rd International Conference on Artificial Intelligence Advan...
 
原版制作(Humboldt毕业证书)柏林大学毕业证学位证一模一样
原版制作(Humboldt毕业证书)柏林大学毕业证学位证一模一样原版制作(Humboldt毕业证书)柏林大学毕业证学位证一模一样
原版制作(Humboldt毕业证书)柏林大学毕业证学位证一模一样
 
AI-Based Home Security System : Home security
AI-Based Home Security System : Home securityAI-Based Home Security System : Home security
AI-Based Home Security System : Home security
 
LLM Fine Tuning with QLoRA Cassandra Lunch 4, presented by Anant
LLM Fine Tuning with QLoRA Cassandra Lunch 4, presented by AnantLLM Fine Tuning with QLoRA Cassandra Lunch 4, presented by Anant
LLM Fine Tuning with QLoRA Cassandra Lunch 4, presented by Anant
 
AI + Data Community Tour - Build the Next Generation of Apps with the Einstei...
AI + Data Community Tour - Build the Next Generation of Apps with the Einstei...AI + Data Community Tour - Build the Next Generation of Apps with the Einstei...
AI + Data Community Tour - Build the Next Generation of Apps with the Einstei...
 
Mechanical Engineering on AAI Summer Training Report-003.pdf
Mechanical Engineering on AAI Summer Training Report-003.pdfMechanical Engineering on AAI Summer Training Report-003.pdf
Mechanical Engineering on AAI Summer Training Report-003.pdf
 
Mechatronics material . Mechanical engineering
Mechatronics material . Mechanical engineeringMechatronics material . Mechanical engineering
Mechatronics material . Mechanical engineering
 
Applications of artificial Intelligence in Mechanical Engineering.pdf
Applications of artificial Intelligence in Mechanical Engineering.pdfApplications of artificial Intelligence in Mechanical Engineering.pdf
Applications of artificial Intelligence in Mechanical Engineering.pdf
 
P5 Working Drawings.pdf floor plan, civil
P5 Working Drawings.pdf floor plan, civilP5 Working Drawings.pdf floor plan, civil
P5 Working Drawings.pdf floor plan, civil
 
Supermarket Management System Project Report.pdf
Supermarket Management System Project Report.pdfSupermarket Management System Project Report.pdf
Supermarket Management System Project Report.pdf
 
TIME TABLE MANAGEMENT SYSTEM testing.pptx
TIME TABLE MANAGEMENT SYSTEM testing.pptxTIME TABLE MANAGEMENT SYSTEM testing.pptx
TIME TABLE MANAGEMENT SYSTEM testing.pptx
 
一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理
 
OOPS_Lab_Manual - programs using C++ programming language
OOPS_Lab_Manual - programs using C++ programming languageOOPS_Lab_Manual - programs using C++ programming language
OOPS_Lab_Manual - programs using C++ programming language
 

Slides bootstrap-4

  • 2. 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
  • 3. 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/
  • 5. 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!!!!!! https://v4-alpha.getbootstrap.com/
  • 6. 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
  • 7. How to use Bootstrap 4 in your project ● Download source files ● Customize download ● Use CDN versions ● NPM package ● Customize files ● Via RubyGems ● Composer https://v4-alpha.getbootstrap.com/
  • 8. All bootstrap websites look the same! How to customize B4?
  • 9. 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
  • 10. 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/
  • 11. 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/
  • 12. 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
  • 13. 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/
  • 14. 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 */
  • 15. 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
  • 16. The BS4 Grid Container -----Row ---------columns --------------components BS4 uses Rems and Ems for columns widths, but is using PX for Responsive breakpoints.
  • 17. 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
  • 18. 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.
  • 19. Bootstrap Components Always check the documentation to find out if a component needs other dependencies!
  • 20. 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/
  • 21. 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/
  • 22. 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/
  • 23. 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