Advanced Web Programming

Part 02 – Web Design - Advance CSS

Dr. Amjad AbuHassan

11/23/2024 Dr. Amjad AbuHassan 1

Responsive Design Principles

11/23/2024 Dr. Amjad AbuHassan 2

What is Responsive Design?
● Definition: "Responsive design is an approach to web development that ensures
web pages render well on a variety of devices and window or screen sizes.”

● Key Goals:
● Provide optimal viewing experience

● Easy reading and navigation

● Minimal resizing, panning, and scrolling

11/23/2024 Dr. Amjad AbuHassan 3

Implementing Responsive Design
A Step-by-Step Guide
1. Start with a Mobile-First Approach
2. Use Fluid Grids
3. Implement Flexible Images
4. Apply Media Queries

11/23/2024 Dr. Amjad AbuHassan 8

Step 1: Mobile-First Approach
● Explanation: "Design for the smallest screens first, then enhance for larger
screens.”

● Benefits:
● Focus on core content and functionality

● Improved performance on mobile devices

11/23/2024 Dr. Amjad AbuHassan 9

Step 2: Using Fluid Grids
● Implementation: "Use relative units to create a flexible layout.”
● Example:

11/23/2024 Dr. Amjad AbuHassan 10

Step 3: Implementing Flexible Images
● Implementation: "Ensure images resize within their containing element.”
● Example:

11/23/2024 Dr. Amjad AbuHassan 11

Step 4: Applying Media Queries
● Implementation: "Apply different styles for different screen sizes.”
● Example:

11/23/2024 Dr. Amjad AbuHassan 12

CSS Flexbox Layout

11/23/2024 Dr. Amjad AbuHassan 16

Introduction to Flexbox
● A layout model that provides an efficient way to lay out, align, and distribute space
among items in a container.
● Designed to provide a consistent layout structure across different screen sizes.

11/23/2024 Dr. Amjad AbuHassan 17

Flex Container and Flex Items
● Flex Container: The parent element that holds flex items. Set with display:
flex;
● Flex Items: The children of a flex container that are laid out using Flexbox
properties.

11/23/2024 Dr. Amjad AbuHassan 18

Main Axis and Cross Axis
● Main Axis: The primary axis along which flex items are laid out (default is
horizontal).
● Cross Axis: The perpendicular axis to the main axis (default is vertical).

11/23/2024 Dr. Amjad AbuHassan 19

Basic Flexbox Properties
● flex-direction: Defines the direction of the
main axis (row, row-reverse, column, column-
reverse).
● justify-content: Aligns items along the main
axis (flex-start, flex-end, center, space-between,
space-around).
● align-items: Aligns items along the cross axis
(flex-start, flex-end, center, stretch, baseline).
11/23/2024 Dr. Amjad AbuHassan 20
Advanced Flexbox Properties
● flex-wrap: Controls whether items should wrap
onto multiple lines (nowrap, wrap, wrap-reverse).
● align-content: Aligns flex lines within the flex
container (flex-start, flex-end, center, space-between,
space-around, stretch).
● align-self: Allows individual items to override the
align-items property (auto, flex-start, flex-end, center,
baseline, stretch).
11/23/2024 Dr. Amjad AbuHassan 21
Flexbox Sizing Properties
● flex-grow: Defines the ability for a flex item to
grow (default is 0).
● flex-shrink: Defines the ability for a flex item to
shrink (default is 1).
● flex-basis: Defines the initial size of a flex item
before growing or shrinking.

11/23/2024 Dr. Amjad AbuHassan 22

Simple Flexbox Layout

11/23/2024 Dr. Amjad AbuHassan 23

Practical Example - Responsive Navigation Bar

11/23/2024 Dr. Amjad AbuHassan 24

Common Layout Patterns
● Centered Content
● Holy Grail Layout
● Responsive Navbar
● Sidebar Layout
● Simple Grid

11/23/2024 Dr. Amjad AbuHassan 25

CSS Grid Layout

11/23/2024 Dr. Amjad AbuHassan 30

Introduction to CSS Grid
● What is CSS Grid?
● A two-dimensional layout system

● Enables precise placement of elements

● Offers flexibility and control

● Benefits:
● Simplifies complex layouts

● Responsive design made easier

● Supports both rows and columns simultaneously

11/23/2024 Dr. Amjad AbuHassan 31

Basic Concepts and Terminology
● Grid Container
● Defines the grid

● display: grid;

● Grid Items: Direct children of the grid container

● Grid Lines: Horizontal and vertical lines dividing the grid
● Grid Tracks: Rows and columns
● Grid Cells: Individual unit of the grid
● Grid Areas: Named sections of the grid
11/23/2024 Dr. Amjad AbuHassan 32
Creating a Simple Grid

11/23/2024 Dr. Amjad AbuHassan 33

Defining Rows and Columns
● CSS Properties:
● grid-template-rows

● grid-template-columns

● Example:

11/23/2024 Dr. Amjad AbuHassan 34

Positioning Grid Items
● Using Grid Lines:
● grid-column-start

● grid-column-end

● grid-row-start

● grid-row-end

11/23/2024 Dr. Amjad AbuHassan 35

Advanced Grid Features
● Creating grids within grids
● CSS Grid Functions:
● repeat()

● minmax()

● auto-fit and auto-fill

11/23/2024 Dr. Amjad AbuHassan 36

Practical Example: Responsive Grid Layout

11/23/2024 Dr. Amjad AbuHassan 37

Common Layout Patterns
● Two-Column Layout
● Asymmetric Layout

● Three-Column Layout
● Holy Grail Layout
● Magazine Layout
● Gallery Layout
● Masonry Layout

11/23/2024 Dr. Amjad AbuHassan 38

Responsive Media Queries for
Different Device Sizes

11/23/2024 Dr. Amjad AbuHassan 44

Introduction to Responsive Design
● Definition: Responsive design ensures web pages look good on all devices.
● Importance: Enhances user experience, accessibility, and SEO.
● Techniques: Flexible grids, flexible images, and media queries.
● Benefits: Increased reach across devices, improved usability, and better
performance.

11/23/2024 Dr. Amjad AbuHassan 45

What are Media Queries?
● Definition: CSS technique to apply styles based on device characteristics.
● Syntax: @media rule followed by media type and condition.

● Benefits: Allows for tailored user experiences and optimized performance.

11/23/2024 Dr. Amjad AbuHassan 46
Common Breakpoints
● Standard breakpoints:
● Small devices (phones): max-width: 600px

● Medium devices (tablets): max-width: 768px

● Large devices (desktops): min-width: 1024px

● Custom breakpoints based on project needs.

11/23/2024 Dr. Amjad AbuHassan 47

Media Queries for Responsive Typography
● Adjust font sizes based on screen size.
● Benefits: Ensures readability across devices,
enhances user experience.

11/23/2024 Dr. Amjad AbuHassan 48

Responsive Layouts with Media Queries
● Change layout styles based on device size.
● Benefits: Provides optimal layout for
different screen sizes, improves usability.

11/23/2024 Dr. Amjad AbuHassan 49

Handling Images and Media Responsively
● Use media queries to adjust image sizes.
● Benefits: Ensures images fit within the layout,
improves loading times.

11/23/2024 Dr. Amjad AbuHassan 50

Responsive Background Images
● Use media queries to adjust background images.
● Benefits: Ensures appropriate image resolution, improves performance.

11/23/2024 Dr. Amjad AbuHassan 51

Responsive Images with srcset
● Use the srcset attribute to provide multiple image sources.
● Benefits: Ensures optimal image resolution for different devices, improves loading
times.

11/23/2024 Dr. Amjad AbuHassan 52

Orientation Media Queries
● Apply styles based on device
orientation.
● Benefits: Optimizes layout and styles
for different orientations.

11/23/2024 Dr. Amjad AbuHassan 53

Combining Multiple Media Queries
● Use multiple conditions in a single media query.
● Benefits: Tailors styles for specific device ranges, ensures precise control.

11/23/2024 Dr. Amjad AbuHassan 54

Activity

11/23/2024 Dr. Amjad AbuHassan 66

CSS Preprocessors: Enhancing
Your Stylesheets

11/23/2024 Dr. Amjad AbuHassan 67

Introduction to CSS Preprocessors
● Definition: CSS preprocessors extend CSS with variables, nesting, and more.
● Popular Preprocessors:
● Sass

● Less

● Stylus.

● SCSS

● Benefits: Simplifies CSS, increases maintainability, and provides advanced features.

11/23/2024 Dr. Amjad AbuHassan 68

Benefits of Using CSS Preprocessors
● Variables: Store values for reuse, promoting consistency.
● Nesting: Reflect the HTML structure in your CSS, improving readability.
● Mixins: Reuse blocks of styles, reducing redundancy.
● Inheritance: Share a set of properties between selectors.
● Functions and Operations: Perform calculations and transformations directly in
CSS.

11/23/2024 Dr. Amjad AbuHassan 69

Introduction to Sass
● Definition: Sass (Syntactically Awesome Style Sheets) is a popular CSS
preprocessor.
● Syntax Options: SCSS (Sassy CSS) and Sass (Indented Syntax).
● Compilation: Requires a compiler to convert Sass to CSS.
● Compatibility: Works with all CSS3 features and allows you to use any available CSS
libraries.

11/23/2024 Dr. Amjad AbuHassan 70

Variables in Sass
● Definition: Variables store reusable values like colors, fonts, and other CSS values.
● Benefits: Enhances maintainability and consistency across your stylesheets.

11/23/2024 Dr. Amjad AbuHassan 71

Nesting in Sass
● Definition: Nesting allows you to nest
your CSS selectors in a way that follows
the same visual hierarchy of your HTML.
● Benefits: Improves readability and
organization of your stylesheets.

11/23/2024 Dr. Amjad AbuHassan 72

Mixins in Sass
● Definition: Mixins allow you to create
reusable chunks of CSS.
● Benefits: Reduces redundancy and
keeps your code DRY (Don't Repeat
Yourself).

11/23/2024 Dr. Amjad AbuHassan 73

Extending and Inheritance in Sass
● Definition: Extend allows one
selector to inherit the styles of
another.
● Benefits: Ensures consistency and
reduces code duplication.

11/23/2024 Dr. Amjad AbuHassan 74

Functions and Operations in Sass
● Definition: Functions and operations allow calculations and transformations.
● Benefits: Simplifies complex calculations and dynamic styling.

11/23/2024 Dr. Amjad AbuHassan 75

Introduction to Less
● Definition: Less (Leaner Style Sheets) is another popular CSS preprocessor.
● Similarities to Sass: Variables, nesting, mixins, functions.
● Unique Features: JavaScript-like syntax and client-side compilation.
● Compatibility: Works seamlessly with existing CSS.

11/23/2024 Dr. Amjad AbuHassan 76

Variables and Nesting in Less

11/23/2024 Dr. Amjad AbuHassan 77

Mixins and Functions in Less

11/23/2024 Dr. Amjad AbuHassan 78

Compiling Sass and Less
● Tools: Command line, task runners (Gulp, Grunt), build tools (Webpack).
● Example Command (Sass):
sass input.scss output.css
● Example Command (Less):
lessc input.less output.css
● Integration: Easily integrated into your development workflow.

11/23/2024 Dr. Amjad AbuHassan 79

Comparison Between LESS and SASS
Feature LESS SASS (SCSS Syntax)
Variable Syntax @variable-name $variable-name
Mixins .mixin-name {} or .mixin-name() @mixin mixin-name {}

Include Mixins .mixin-name; or .mixin-name(); @include mixin-name;

Functions Limited built-in functions Extensive built-in functions

Extending Selectors Using mixins @extend directive

File Imports @import "filename.less"; @import 'filename';

Conditional Statements Supports if/else constructs Supports if/else, for, each, while loops

Community and Adoption Widely used but less than SASS Larger community and industry standard

11/23/2024 Dr. Amjad AbuHassan 80

Introduction to Major CSS
Frameworks

11/23/2024 Dr. Amjad AbuHassan 81

What is a CSS Framework?
● Definition: A CSS framework is a pre-prepared library meant to be used as a base
for starting the development of a website or web application.
● Benefits:
● Speeds up development

● Ensures consistency

● Provides responsive design out of the box

● Encourages best practices

11/23/2024 Dr. Amjad AbuHassan 82

Overview of W3.CSS
● History: W3.CSS was introduced by W3Schools as a lightweight alternative to
Bootstrap..
● Core Features:
● No JavaScript dependency.

● Mobile-first responsive design.

● Simple class naming system.

● Built-in themes and colors.

● Compatible with all modern browsers.

11/23/2024 Dr. Amjad AbuHassan 83

W3.CSS Grid System
● W3.CSS has a responsive grid system that is flexible and simple to use.
● The grid has 12 columns and allows for easy layout control with classes like w3-row
and w3-col.

11/23/2024 Dr. Amjad AbuHassan 84

W3.CSS Components
● Pre-styled Components:
● Buttons: Easily styled with classes like w3-button w3-blue.

● Cards: Create card-like sections with w3-card.

● Navigation: Responsive navigation bars using w3-bar and w3-bar-item.

11/23/2024 Dr. Amjad AbuHassan 85

Overview of Tailwind CSS
● History: Developed by Adam Wathan, first released in 2017.
● Core Features:
● Utility-first approach

● Highly customizable

● No pre-designed components

● Responsive design with ease

● Consistent utility classes

11/23/2024 Dr. Amjad AbuHassan 86

Utility-First Approach in Tailwind CSS
● Definition: Uses utility classes to build custom designs.
● Benefits:
● Rapid prototyping

● Consistent styling

● Easy maintenance

● Reduced need for custom CSS

11/23/2024 Dr. Amjad AbuHassan 87

Customization in Tailwind CSS
● Tailwind Configuration: Customizable via
tailwind.config.js.
● Benefits: Tailor the framework to your
needs, add custom themes and utilities,
integrate with design systems.

11/23/2024 Dr. Amjad AbuHassan 88

Responsive Design with Tailwind CSS
● Responsive Utilities: Apply styles based on screen size.
● Mobile-First Approach: Start with styles for the smallest screens and enhance
them for larger screens.
● Benefits: Ensures designs adapt seamlessly to different devices, improves user
experience.

11/23/2024 Dr. Amjad AbuHassan 89

W3.CSS vs. Tailwind CSS
W3.CSS
● Advantages:
● Easy to use with simple class names.

● Mobile-first and responsive by default.

● Includes ready-made components.

● Customization:
● Limited without writing additional CSS.

● Themes available but less flexible than Tailwind CSS.

11/23/2024 Dr. Amjad AbuHassan 90

W3.CSS vs. Tailwind CSS cont.
Tailwind CSS
● Advantages:
● Highly customizable utility classes.

● Fine-grained control over styling.

● Excellent for building custom designs.

● Customization:
● Extensive customization via configuration file.

● Ability to add plugins for additional functionality.

11/23/2024 Dr. Amjad AbuHassan 91

Getting Started with W3.CSS
● Include W3.CSS:
● Via CDN

● Via NPM

npm install w3-css

● Documentation: Comprehensive docs with examples and guidelines.

11/23/2024 Dr. Amjad AbuHassan 92
Getting Started with Tailwind CSS
● Include Tailwind CSS:
● Via CDN

● Via NPM and PostCSS

npm install tailwindcss

npx tailwindcss init

● Documentation: Detailed docs with configuration options and best practices

11/23/2024 Dr. Amjad AbuHassan 93
Example: Responsive Page with W3.CSS

11/23/2024 Dr. Amjad AbuHassan 94

Example: Responsive Page with Tailwind CSS

11/23/2024 Dr. Amjad AbuHassan 95

Activity

11/23/2024 Dr. Amjad AbuHassan 96