Web technologies-course 06.pptx

COURSE 06
CSS
FRAMEWORKS
lect. eng. Rajmond JÁNÓ, PhD
rajmond.jano@ael.utcl
uj.ro
fb.com/janorajmond

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

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
1CDN – Content delivery network

USING THE BOOTSTRAP CDN
To use the Bootstrap CDN just:
• Navigate to https://getbootstrap.com – 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

Badges
• Small count and labeling component

Breadcrumb
• Indicate the current page’s location within a
navigational hierarchy that automatically adds
separators via CSS

Buttons
• Use Bootstrap’s custom button styles for actions in
forms, dialogs, and more with support for multiple
sizes, states, and more

Button group
• Group a series of buttons together on a single line
with the button group, and super-power them with
JavaScript

Card
• Bootstrap’s cards provide a flexible and extensible
content container with multiple variants and options

Carousel
• A slideshow component for cycling through
elements—images or slides of text—like a carousel

Collapse
• Toggle the visibility of content across your project
with a few classes and our JavaScript plugins

Dropdowns
• Toggle contextual overlays for displaying lists of
links and more with the Bootstrap dropdown plugin

Forms
• Form control styles, layout options, and custom
components for creating a wide variety of forms

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

Jumbotron
• Lightweight, flexible component for showcasing
hero unit style content

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

Media object
• Bootstrap’s media object to construct highly
repetitive components like blog comments, tweets,
and the like

Modal
• Use Bootstrap’s JavaScript modal plugin to add
dialogs to your site for lightboxes, user
notifications, or completely custom content

Navs
• Bootstrap’s included navigation components

Navbar
• Bootstrap’s powerful, responsive navigation header,
the navbar. Includes support for branding,
navigation, and more, including support for collapse
plugin

Pagination
• Component for showing pagination to indicate a
series of related content exists across multiple
pages

Alerts
• Component for adding Bootstrap popovers, like
those found in iOS, to any element on your site

Progress
• Custom progress bars featuring support for stacked
bars, animated backgrounds, and text labels

Scrollspy
• Automatically update Bootstrap navigation or list
group components based on scroll position to
indicate which link is currently active in the viewport

Spinners
• Indicate the loading state of a component or page
with Bootstrap spinners, built entirely with HTML,
CSS, and no JavaScript

Toasts
• Push notifications to your visitors with a toast, a
lightweight and easily customizable alert message

Tooltips
• Bootstrap tooltips with CSS and JavaScript using
CSS3 for animations and data-attributes for local
title storage

BOOTSTRAP DEMO
How did
you do
that?
Where’d
you get that
from?
I read the
documentati
on!
https://getbootstrap.com/docs/4.3/getting-

BOOTSTRAP DEMO
HTML
BootstrapCDN Social media
icons
Local
stylesheet

Brand logo
Navigation
menu
Dropdown
menu

Secondary
Main menu
Hamburger collapse

First image overlay
Carousel
Carousel indicators

Bootstra
p
designat
or
Screen size
interval
xs <576px
sm [576; 768)px
md [768; 992)px
lg [992; 1200)
px
xl ≥1200px

col-x
col-size-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
[1..12]
{xs, sm, md,
lg, xl}
col-md-4 col-md-4 col-md-4
col-lg-8 col-lg-4

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
0
10
20
30
40
50
60
A. Partial exam on
Saturday, 9 Nov.
B. Partial exam on
Monday, 18 Nov.
C. No partial exam
Partial exam poll results RO
ENG

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
• https://getbootstrap.com/docs/4.3/getting-
started/download/
started/introduction/
started/theming

COURSES
Available online at:
http://www.ael.utcluj.ro/
Information for Students -> Courses -> Web
Technologies

Web technologies-course 06.pptx

Web technologies-course 06.pptx

Recommended

Recommended

More Related Content

Similar to Web technologies-course 06.pptx

Similar to Web technologies-course 06.pptx (20)

More from Stefan Oprea

More from Stefan Oprea (20)

Recently uploaded

Recently uploaded (20)

Web technologies-course 06.pptx