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
