This slide was presented during the Latino Web Developer NYC meetup. Learn the new flexbox grid and components of bootstrap 4. Customize styles using the source Sass files - Michael Posso @micposso
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/
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
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.
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
