Web technologies
Tehnologii web
COURSE 06
CSS
FRAMEWORKS
lect. eng. Rajmond JÁNÓ, PhD
[Link]@[Link]
[Link]/janorajmond
Room E05
C06 – CSS FRAMEWORKS
• CSS Frameworks
• Bootstrap 4
• Bootstrap 4 components
• Bootstrap 4 demo
CSS FRAMEWORKS
• A CSS framework is a software framework that is meant to
allow for easier, more standards-compliant web design using
the CSS language
• Most of these frameworks contain at least a grid
• More functional frameworks also come with more features and
additional JavaScript based functions, but are mostly design
oriented and unobtrusive (this differentiates these from
functional and full JavaScript frameworks)
CSS FRAMEWORKS
CSS frameworks offer different modules and tools:
• reset style sheet
• grid especially for responsive web design
• web typography
• set of icons in sprites or icon fonts
• styling for tooltips, buttons, elements of forms
• parts of graphical user interfaces like accordion, tabs, slideshow or modal
windows (Lightbox)
• equalizer to create equal height content
• often used CSS helper classes (left, hide)
CSS FRAMEWORKS
Most widely used CSS Frameworks:
• Bootstrap 4
• Foundation
• Bulma
• Tailwind CSS
• Semantic UI
• Materialize CSS
BOOTSTRAP 4
INSTALLING/USING BOOTSTRAP
4
There are two ways of including Bootstrap 4 into your
project:
• Pulling Bootstrap source files by using package managers
(npm, RubyGems, Composer, NuGet) – check documentation
• With this method you can customize which files to include in your
final product and reduce load
• Using the BootstrapCDN1
• Not customizable, includes all the framework
1
CDN – Content delivery network
USING THE BOOTSTRAP CDN
To use the Bootstrap CDN just:
• Navigate to [Link] – Get Started
• Copy-paste the CSS and JS includes in the <head> section of
your HTML document
BOOTSTRAP 4 COMPONENTS
Alerts
• Provide contextual feedback messages for typical user actions
with the handful of available and flexible alert messages
BOOTSTRAP 4 COMPONENTS
Badges
• Small count and labeling component
BOOTSTRAP 4 COMPONENTS
Breadcrumb
• Indicate the current page’s location within a navigational
hierarchy that automatically adds separators via CSS
BOOTSTRAP 4 COMPONENTS
Buttons
• Use Bootstrap’s custom button styles for actions in forms,
dialogs, and more with support for multiple sizes, states, and
more
BOOTSTRAP 4 COMPONENTS
Button group
• Group a series of buttons together on a single line with the
button group, and super-power them with JavaScript
BOOTSTRAP 4 COMPONENTS
Card
• Bootstrap’s cards provide a flexible and extensible content
container with multiple variants and options
BOOTSTRAP 4 COMPONENTS
Carousel
• A slideshow component for cycling through elements—images
or slides of text—like a carousel
BOOTSTRAP 4 COMPONENTS
Collapse
• Toggle the visibility of content across your project with a few
classes and our JavaScript plugins
BOOTSTRAP 4 COMPONENTS
Dropdowns
• Toggle contextual overlays for displaying lists of links and
more with the Bootstrap dropdown plugin
BOOTSTRAP 4 COMPONENTS
Forms
• Form control styles, layout options, and custom components for
creating a wide variety of forms
BOOTSTRAP 4 COMPONENTS
Input group
• Easily extend form controls by adding text, buttons, or button
groups on either side of textual inputs, custom selects, and
custom file input
BOOTSTRAP 4 COMPONENTS
Jumbotron
• Lightweight, flexible component for showcasing hero unit style
content
BOOTSTRAP 4 COMPONENTS
List group
• List groups are a flexible and powerful component for
displaying a series of content. Modify and extend them to
support just about any content within
BOOTSTRAP 4 COMPONENTS
Media object
• Bootstrap’s media object to construct highly repetitive
components like blog comments, tweets, and the like
BOOTSTRAP 4 COMPONENTS
Modal
• Use Bootstrap’s JavaScript modal plugin to add dialogs to your
site for lightboxes, user notifications, or completely custom
content
BOOTSTRAP 4 COMPONENTS
Navs
• Bootstrap’s included navigation components
BOOTSTRAP 4 COMPONENTS
Navbar
• Bootstrap’s powerful, responsive navigation header, the navbar.
Includes support for branding, navigation, and more, including
support for collapse plugin
BOOTSTRAP 4 COMPONENTS
Pagination
• Component for showing pagination to indicate a series of
related content exists across multiple pages
BOOTSTRAP 4 COMPONENTS
Alerts
• Component for adding Bootstrap popovers, like those found in
iOS, to any element on your site
BOOTSTRAP 4 COMPONENTS
Progress
• Custom progress bars featuring support for stacked bars,
animated backgrounds, and text labels
BOOTSTRAP 4 COMPONENTS
Scrollspy
• Automatically update Bootstrap navigation or list group
components based on scroll position to indicate which link is
currently active in the viewport
BOOTSTRAP 4 COMPONENTS
Spinners
• Indicate the loading state of a component or page with
Bootstrap spinners, built entirely with HTML, CSS, and no
JavaScript
BOOTSTRAP 4 COMPONENTS
Toasts
• Push notifications to your visitors with a toast, a lightweight
and easily customizable alert message
BOOTSTRAP 4 COMPONENTS
Tooltips
• Bootstrap tooltips with CSS and JavaScript using CSS3 for
animations and data-attributes for local title storage
BOOTSTRAP DEMO I read the
documentation
How did !
you do that?
Where’d you
get that from?
[Link]
BOOTSTRAP DEMO
BOOTSTRAP DEMO
BOOTSTRAP DEMO
HTML
BootstrapCDN Social media Local stylesheet
icons
Brand logo
Navigation Dropdown
menu menu
Hamburger collapse button Main menu Secondary menu
Carousel indicators Carousel images First image overlay items
Bootstrap Screen size
designator interval
xs <576px
sm [576; 768)px
md [768; 992)px
lg [992; 1200) px
xl ≥1200px
Bootstrap 4 grid system
col-x
[1..12]
col-1 col-1 col-1 col-1 col-1 col-1 col-1 col-1 col-1 col-1 col-1 col-1
col-12
col-4 col-4 col-4
col-8 col-4
col-size-x
[1..12]
{xs, sm, md, lg,
xl}
col-md-4 col-md-4 col-md-4
col-lg-8 col-lg-4
Card #1
Card #2
Card #3
Column #1
Column #2
Column #3
THEMING BOOTSTRAP
• Theming is accomplished by SASS variables, SASS
maps, and custom CSS
• You can only theme projects with Bootstrap imported
locally, you cannot theme the CDN
POLL RESULTS
Partial exam poll results RO
60 ENG
50
40
30
20
10
0
A. Partial exam on B. Partial exam on C. No partial exam
Saturday, 9 Nov. Monday, 18 Nov.
SCHEDULE FOR NEXT 4 WEEKS
Week Week span Activity
#6 04 – 10 November C06 + L06: Bootstrap
#7 11 – 17 November OFF – Web Technologies (C + L)
#8 18 – 24 November Course Partial Exam:
C01 – C06
Time allocation/student or group will be sent out
Laboratory Test 01:
L02 – L05: HTML, CSS, SCSS
#9 25 Nov – 1 Dec C07 + L07: JavaScript (Part 1)
… to be continued!
BIBLIOGRAPHY
• [Link]
• [Link]
• [Link]
COURSES
Available online at:
[Link]
Information for Students -> Courses -> Web Technologies
