CSS Frameworks: The Ultimate Guide [Team-IRA]

✍ Scribed by Sufyan bin Uzayr

• Publisher: CRC Press
• Year: 2023
• Tongue: English
• Leaves: 511
• Edition: 1
• Category: Library

✦ Synopsis

Cascading Style Sheets (CSS) is a programming language that integrates all relevant information related to the display of a web page. CSS defines the style and format of a web page or page, including layout, colors, fonts, & (the space around each element), and more. Together with HTML and JavaScript, CSS forms the basis of the functioning of the Internet.

CSS Frameworks: The Ultimate Guide discusses the fundamental concepts of CSS that will help developers and coders do more with CSS Frameworks. This book is for anyone who wants to create a website and write optimized and well-structured code in CSS. It follows a hands-on approach and offers practical lessons and tutorials related to CSS Frameworks.

Features:

• Provides a detailed focus on CSS programming

• Introduces CSS Frameworks using real-world industry concepts

• Discusses optimization and maintenance of code in CSS Frameworks

This book is a valuable resource for developers already familiar with HTML, and who have an understanding of JavaScript. After finishing this book, anyone will quickly build their website with absolute ease.

✦ Table of Contents

Cover
Half Title
Title Page
Copyright Page
Dedication
Table of Contents
About the Author
Acknowledgments
Chapter 1 Introduction to CSS Frameworks
In this Chapter
What is CSS?
History
CSS Syntax
Different types of CSS you can Use
A Different Version of CSS
CSS Specification
CSS Modules
Starting with a Specific HTML
Linking your HTML and CSS Files
How CSS and HTML Work Together
How Does CSS Work?
Use Classes in CSS
How to Apply Classes on Paragraphs in HTML
Style Items Based on Their Location in the Document
CSS Selectors
What Is a Selector?
Universal Selector
Element Type Selectors
Id Selector
Class Selectors
Descendant Selectors
Child Selectors
Adjacent Sibling Selectors
Grouping Selectors
Grouping Selectors
CSS Comments
HTML and CSS Comments
CSS Colors
Basic CSS Colors
CSS Color Names
How to Use These Colors
In Hexadecimal Notation
In RGB Functional Notation
List of Color Properties
List of Color Values
CSS Backgrounds
CSS Background Color
Transparency/Opacity
To Demonstrate This Using the RGBA
CSS Background-Image
CSS Background-Repeat
CSS Background-Repeat: No-Repeat
CSS Background-Attachment
CSS Borders
CSS Border Style
CSS Border Width
HEX Values
CSS Margins
CSS Padding
Padding and Element Width
CSS Length, Width, and Max-Width
Length and Width of CSS Values
CSS Box Model
CSS Layout – Location Area
The Position Property
CSS Tables
CSS Layout – The Display Property
Block-Level Elements
Inline Elements
CSS Layout – z-Index Layout
Without z-Index
CSS Layout – Width and Max-Width (Using Width, Max-Width, and Margin: Auto;)
CSS Layout – Overflow
CSS Layout – Float and Clear
The Float Property
CSS3 Layouts
How to Use CSS Properties
CSS Functions
CSS Flexbox
Why Flexbox?
CSS Box Size
CSS Syntax
CSS Grid Layout
CSS Media Types
Introduction to Media Types
Method 1: Using @media At-rules
Method 2: Using @import At-rules
Method 3: Using the Element
Different Media Types
Media Questions and Responsive Web Design
Media Queries
CSS Attribute Selectors
CSS Fragmentation
Types of Fragmentation
Understanding Attribute Selectors
Selecting from a List of Values
Selecting a Value That Starts with a Character Unit
Selecting the Ending Value per Character Unit
Selecting a Value That Contains a Character Unit
Case Insensitivity
Select a Value or a Value Followed by a -
Benefits you may Know
CSS Cons
Chapter Summary
Further Reading
Note
Chapter 2 Bootstrap
In this Chapter
Introduction
Bootstrap History
Versions of Bootstrap
Bootstrap 5
Getting Started with Bootstrap
How to Download Bootstrap Using Package Manager
Downloading Bootstrap Using npm
Downloading Bootstrap Using a Cable
Download Bootstrap Using Composer
How to Download Bootstrap Using CDN
What Is CDN?
Bootstrap CDN Link and Scripts
For CSS
For JavaScript
For Jquery Library
For Popper.js
How Do We Use Bootstrap CDN?
Bootstrap Template
Is Popper.js Required for Bootstrap 4?
Responsive Meta Tag
History
Bootstrap 2
Bootstrap 3
Bootstrap 4
Bootstrap 5
Features
Create a home page with Bootstrap
Add HTML5 Document Type
Bootstrap 3 Is Advanced
Basic Bootstrap Pages
Bootstrap Containers
Bootstrap Grid System
Grid Classes
Basic Structure of a Bootstrap Grid
Explanation
Code Example
Code Example (Extra Small Grid)
Code Example (Small Grid)
Code Example (Medium Grid)
Code Example (Small and Medium Grid Combined)
Code Example (Large Grid)
Code Example (Extra-Large Grid)
How the Grid Works
Three Equal Columns
Two Unequal Columns
Flexbox
Flexbox Properties in CSS
Flexbox Properties in Bootstrap
Flex-Direction in CSS
Flex Direction in Bootstrap
Flex-Wrap in CSS
Flex-Wrap in Bootstrap
Flex-Flow
Justify-Content in CSS
Order
Justify Content in Bootstrap
Align Self
Align Items
Grow and Shrink
Fill
Flexbox Features
Responsive Breakpoints
z-Index
Components in Bootstrap
Bootstrap Alerts
Alert Links
Bootstrap Badges
Bootstrap Jumbotron
Full-Width Jumbotron
Bootstrap Buttons
Button Sizes
Block Level Buttons
Active/Disabled Buttons
Spinner Buttons
Colored Spinners
Button Tags
Outline Buttons
Dropdowns
Navbar
How It Works
Supported Content
Utilities
Border
Chapter Summary
Further Reading
Chapter 3 Bulma
In this Chapter
Introduction
Requirement
Install the Bulma CSS Library
Using the npm Bulma Package
Features and Benefits
For CDN
Browser Support
Starter Bulma Template
Column System
Customizing Variables
Bulma-Start
With Node-Sass Installation
Create a Package .json File
Install the Dev Dependencies
Create a Sass File
Compliance with These Community Guidelines
How to Use Sass
Install Sass
Libraries
Install Anywhere (Standalone)
Now Create a Sass File
Create an HTML Template Which Uses Various Bulma Components
Utilities
Mixins
CSS Mixins
Direction Mixins
Responsive Mixins
From() and Until() Mixins
From ()
Description
Until ()
Form Control Mixins
Sizes
Control Placeholder
Functions
Findcolorinvert () Function
The FindLightColor () and FindDarkColor ()Function
Extends
Chapter Summary
Further Reading
Notes
Chapter 4 Tailwind
In this Chapter
Introduction
Why Tailwind CSS?
Who Should Use Tailwind CSS?
Get Started with Tailwind CSS
Install Tailwind CSS
Add the Tailwind Directives to CSS
Now Start the Tailwind CLI Build Process
Start Using Your Tailwind in HTML
CDN
Add the CDN Script to HTML
Tailwind Typography
Font Family
Tailwind CSS Layout
Tailwind Container
Key Concepts
How Do We Use JIT Engine Mode?
Jit Mode Features?
Tailwind CSS Box Sizing
Tailwind CSS Display
Display Tailwind CSS Classes
Float Classes
Tailwind CSS Clear
CSS Clear Classes
Overflow Classes of Tailwind CSS
Tailwind CSS Flex Direction
Tailwind CSS Flex
Flex
Tailwind CSS Order
Tailwind CSS Grid Template Columns
Tailwind CSS Alignment
Justify Content
Tailwind CSS Justify Items
Tailwind CSS Spacing
Padding
Margin
Space Between
Tailwind CSS Borders
Border Radius
Border Width
Border Color
Border Opacity
Border Style
Ring Opacity
Ring Width
Ring – Width Classes
Tailwind Effects
Tailwind Tables
Border Collapse
Table Layout
Benefits of Using Tailwind CSS
Why Use Tailwind CSS?
Syntax
Small Styles
Less Cognitive Load
Better Composition
Consistency
Customization
Play CDN
Fancy Underline Styles
Tailwind CSS: Disadvantages
Style and HTML Are Mixed
Learning Takes Time
Lack of Essential Style Elements
Documentation
Chapter Summary
Further Reading
Note
Chapter 5 Foundation
In this Chapter
Introduction
Why Foundation?
Installation
Download Foundation
Template
File Structure of Foundation Folder
HTML5 Doctype
Mobile Responsive First
Initialization of Components
What Comes with Foundation?
Compatibility
What will no Longer Work?
Basic Principles
Basic CSS Kitchen Sink
Accordion
Foundation CSS Kitchen Sink Accordion Advanced Options
Advanced Options
Multi-Expand
All Closed
Accordion and URLs
Deep Linking
Callout
Coloring
Sizing
Making Closable
Card
Card Divider
Images
Sizing
Dropdown
Positioning
Other Positioning
Media Object
Section Alignment
Off-Canvas
Off-Canvas Position
Reveal (Model)
Sizing
Features
Foundation Integration Levels
Chapter Summary
Further Reading
Chapter 6 Skeleton
In this Chapter
Introduction
Installation
File Structure
Supported Browser
Skeleton – The Grid
Typography
Typography Units Used in CSS Frameworks
Absolute Lengths
Relative Lengths
Buttons
Form
Lists
Code
Benefits of Skeleton CSS Framework
Disadvantages of Skeleton CSS Framework
Chapter Summary
Further Reading
Notes
Chapter 7 Milligram
In this Chapter
Introduction
Milligram Installation
Cli
Typography Units Used in CSS Frameworks
Absolute Lengths
Relative Lengths
Typography
Blockquotes
Buttons
Lists
Forms
Tables
Grids
Code
Utilities
Column Widths
Responsiveness
Reasons to Use Milligram
Why not to Use?
Chapter Summary
Further Reading
Notes
Chapter 8 Pure CSS
In this Chapter
Introduction
Why Pure CSS?
Installing Pure CSS
Overview
Responsive Design
Standard CSS
Extensible
Pure CSS Menu Responsive CSS Menu
Pure CSS Foundation
Pure CSS Hiding Elements
Pure CSS Images
Pure CSS Buttons
Buttons Sizes
Pure CSS Tables
Chapter Summary
Further Reading
Note
Chapter 9 Materialize
In this Chapter
Introduction
Why Use Materialize CSS?
Installing Materialize CSS
Method 1
Method 2
Method 3
Method 4
Materialize Color
Materialized CSS Grids
Columns for Small Screen Devices
Columns for Medium Size Screen Devices
Columns for Large Size Screen Devices
Materialize CSS Utility Classes
Materialize CSS Media
Materialize – Tables
Materialize – Buttons
Materialize – Cards
Materialize – Form
Features
Chapter Summary
Further Reading
Chapter 10 CSS Cheat Sheet
Getting to Know CSS
Using CSS in HTML Pages
Inline CSS, by Adding a Style Attribute to the HTML Tag
Internal CSS, by Inserting a Style Tag in the Head Section
External CSS
CSS Cheat Sheet
Font
Text
Backgrounds
Borders
Box Model
Margin
Padding
Template Layout
Table
Colors
Grid Positioning
Columns
List and Markers
Animations
Outline
Positioning
Transitions
3D/2D Transform
Pseudo-Class
Pseudo-Element
Chapter Summary
Chapter 11 Appraisal
Prerequisites of CSS Frameworks
Alternative Versions of CSS Frameworks
Index