CSS Frameworks The Ultimate Guide (Sufyan Bin Uzayr) (Z-Library)

CSS Frameworks 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.

CSS Frameworks The Ultimate Guide Sufyan bin Uzayr

First edition published 2024 by CRC Press 6000 Broken Sound Parkway NW, Suite 300, Boca Raton, FL 33487-2742 and by CRC Press 4 Park Square, Milton Park, Abingdon, Oxon, OX14 4RN CRC Press is an imprint of Taylor & Francis Group, LLC © 2024 Sufyan bin Uzayr Reasonable efforts have been made to publish reliable data and information, but the author and publisher cannot assume responsibility for the validity of all materials or the consequences of their use. The authors and publishers have attempted to trace the copyright holders of all material reproduced in this publication and apologize to copyright holders if permission to publish in this form has not been obtained. If any copyright material has not been acknowledged please write and let us know so we may rectify in any future reprint. Except as permitted under U.S. Copyright Law, no part of this book may be reprinted, reproduced, transmitted, or utilized in any form by any electronic, mechanical, or other means, now known or hereafter invented, including photocopying, microfilming, and recording, or in any information storage or retrieval system, without written permission from the publishers. For permission to photocopy or use material electronically from this work, access www.copyright. com or contact the Copyright Clearance Center, Inc. (CCC), 222 Rosewood Drive, Danvers, MA 01923, 978-750-8400. For works that are not available on CCC please contact mpkbookspermissions@ tandf.co.uk Trademark notice: Product or corporate names may be trademarks or registered trademarks and are used only for identification and explanation without intent to infringe. ISBN: 9781032413242 (hbk) ISBN: 9781032413228 (pbk) ISBN: 9781003357520 (ebk) DOI: 10.1201/9781003357520 Typeset in Minion by codeMantra

For Dad

vii Contents About the Author, xxiii Acknowledgments, xxv Chapter 1 ◾ IntroduCtIon to CSS FrameworkS 1 IN THIS CHAPTER 1 WHAT IS CSS? 1 HISTORY 2 CSS SYNTAX 2 DIFFERENT TYPES OF CSS YOU CAN USE 4 A DIFFERENT VERSION OF CSS 4 CSS SPECIFICATION 4 CSS MODULES 5 STARTING WITH A SPECIFIC HTML 5 LINKING YOUR HTML AND CSS FILES 5 HOW CSS AND HTML WORK TOGETHER 6 HOW DOES CSS WORK? 6 USE CLASSES IN CSS 7 How to Apply Classes on Paragraphs in HTML 7 STYLE ITEMS BASED ON THEIR LOCATION IN THE DOCUMENT 8 CSS SELECTORS 9 What Is a Selector? 9 UNIVERSAL SELECTOR 9 ELEMENT TYPE SELECTORS 9

viii ◾ Contents Id Selector 9 Class Selectors 10 Descendant Selectors 10 Child Selectors 11 Adjacent Sibling Selectors 11 Grouping Selectors 12 Grouping Selectors 12 CSS COMMENTS 13 HTML AND CSS COMMENTS 13 CSS COLORS 13 Basic CSS Colors 14 CSS Color Names 14 How to Use These Colors 14 In Hexadecimal Notation 14 In RGB Functional Notation 15 List of Color Properties 15 List of Color Values 16 CSS BACKGROUNDS 16 CSS BACKGROUND COLOR 17 Transparency/Opacity 17 To Demonstrate This Using the RGBA 17 CSS Background-Image 17 CSS Background-Repeat 18 CSS Background-Repeat: No-Repeat 18 CSS Background-Attachment 18 CSS BORDERS 19 CSS Border Style 19 CSS Border Width 19 HEX Values 20 CSS Margins 20 CSS Padding 21 Padding and Element Width 21 CSS LENGTH, WIDTH, AND MAX-WIDTH 22

Contents ◾ ix Length and Width of CSS Values 22 CSS BOX MODEL 22 CSS Layout – Location Area 22 The Position Property 22 CSS TABLES 23 CSS Layout – The Display Property 23 BLOCK-LEVEL ELEMENTS 23 Inline Elements 24 CSS LAYOUT – z-INDEX LAYOUT 24 Without z-Index 24 CSS LAYOUT – WIDTH AND MAX-WIDTH (USING WIDTH, MAX-WIDTH, AND MARGIN: AUTO;) 24 CSS LAYOUT – OVERFLOW 25 CSS LAYOUT – FLOAT AND CLEAR 25 The Float Property 25 CSS3 LAYOUTS 25 How to Use CSS Properties 26 CSS FUNCTIONS 26 CSS FLEXBOX 29 Why Flexbox? 29 CSS BOX SIZE 30 CSS Syntax 30 CSS GRID LAYOUT 30 CSS MEDIA TYPES 31 Introduction to Media Types 31 Method 1: Using @media At-rules 31 Method 2: Using @import At-rules 32 Method 3: Using the <link> Element 32 DIFFERENT MEDIA TYPES 32 MEDIA QUESTIONS AND RESPONSIVE WEB DESIGN 33 MEDIA QUERIES 33 CSS ATTRIBUTE SELECTORS 34

x ◾ Contents CSS FRAGMENTATION 36 Types of Fragmentation 36 Understanding Attribute Selectors 36 Selecting from a List of Values 37 Selecting a Value That Starts with a Character Unit 37 Selecting the Ending Value per Character Unit 38 Selecting a Value That Contains a Character Unit 38 Case Insensitivity 38 Select a Value or a Value Followed by a - 38 BENEFITS YOU MAY KNOW 38 CSS Cons 40 CHAPTER SUMMARY 41 FURTHER READING 41 NOTE 43 Chapter 2 ◾ BootStrap 45 IN THIS CHAPTER 45 INTRODUCTION 45 BOOTSTRAP HISTORY 46 VERSIONS OF BOOTSTRAP 47 BOOTSTRAP 5 50 GETTING STARTED WITH BOOTSTRAP 51 HOW TO DOWNLOAD BOOTSTRAP USING PACKAGE MANAGER 51 Downloading Bootstrap Using npm 52 Downloading Bootstrap Using a Cable 52 Download Bootstrap Using Composer 52 How to Download Bootstrap Using CDN 52 What Is CDN? 53 Bootstrap CDN Link and Scripts 53 For CSS 53 For JavaScript 53 For Jquery Library 53 For Popper.js 53

Contents ◾ xi How Do We Use Bootstrap CDN? 54 BOOTSTRAP TEMPLATE 54 Is Popper.js Required for Bootstrap 4? 56 RESPONSIVE META TAG 56 HISTORY 56 Bootstrap 2 56 Bootstrap 3 57 Bootstrap 4 57 Bootstrap 5 57 FEATURES 58 CREATE A HOME PAGE WITH BOOTSTRAP 59 Add HTML5 Document Type 59 Bootstrap 3 Is Advanced 59 BASIC BOOTSTRAP PAGES 59 BOOTSTRAP CONTAINERS 60 BOOTSTRAP GRID SYSTEM 63 GRID CLASSES 63 BASIC STRUCTURE OF A BOOTSTRAP GRID 64 Explanation 65 Code Example 65 Code Example (Extra Small Grid) 67 Code Example (Small Grid) 67 Code Example (Medium Grid) 69 Code Example (Small and Medium Grid Combined) 69 Code Example (Large Grid) 69 Code Example (Extra-Large Grid) 71 HOW THE GRID WORKS 72 Three Equal Columns 73 Two Unequal Columns 74 FLEXBOX 77 Flexbox Properties in CSS 78 Flexbox Properties in Bootstrap 79 Flex-Direction in CSS 80

xii ◾ Contents Flex Direction in Bootstrap 80 Flexbox Features 81 Flex-Wrap in CSS 82 Flex-Wrap in Bootstrap 83 Flex-Flow 83 Justify-Content in CSS 84 Order 86 Justify Content in Bootstrap 89 Align Self 90 Align Items 91 Grow and Shrink 92 Fill 93 RESPONSIVE BREAKPOINTS 93 z-Index 94 COMPONENTS IN BOOTSTRAP 95 Bootstrap Alerts 95 Alert Links 96 BOOTSTRAP BADGES 97 BOOTSTRAP JUMBOTRON 98 Full-Width Jumbotron 98 BOOTSTRAP BUTTONS 99 Button Sizes 100 Block Level Buttons 100 Active/Disabled Buttons 100 Spinner Buttons 100 Colored Spinners 100 Button Tags 101 Outline Buttons 101 DROPDOWNS 102 NAVBAR 103 How It Works 103 Supported Content 104

Contents ◾ xiii UTILITIES 105 Border 105 CHAPTER SUMMARY 105 FURTHER READING 105 Chapter 3 ◾ Bulma 107 IN THIS CHAPTER 107 INTRODUCTION 107 Requirement 107 Install the Bulma CSS Library 108 Using the npm Bulma Package 108 Features and Benefits 108 For CDN 109 BROWSER SUPPORT 109 Starter Bulma Template 110 Column System 111 CUSTOMIZING VARIABLES 111 Bulma-Start 112 WITH NODE-SASS INSTALLATION 113 Create a Package .json File 113 Install the Dev Dependencies 113 CREATE A SASS FILE 113 Compliance with These Community Guidelines 114 HOW TO USE SASS 114 INSTALL SASS 115 LIBRARIES 115 Install Anywhere (Standalone) 115 Now Create a Sass File 115 Create an HTML Template Which Uses Various Bulma Components 116 UTILITIES 119 Mixins 119

xiv ◾ Contents CSS Mixins 122 Direction Mixins 125 RESPONSIVE MIXINS 126 from() and until() mixins 126 from () 127 Description 127 until () 127 FORM CONTROL MIXINS 129 SIZES 130 CONTROL PLACEHOLDER 130 FUNCTIONS 131 FINDCOLORINVERT () FUNCTION 131 The findLightColor () and findDarkColor ()function 131 EXTENDS 132 CHAPTER SUMMARY 132 FURTHER READING 133 NOTES 133 Chapter 4 ◾ taIlwInd 135 IN THIS CHAPTER 135 INTRODUCTION 135 WHY TAILWIND CSS? 136 WHO SHOULD USE TAILWIND CSS? 136 GET STARTED WITH TAILWIND CSS 136 Install Tailwind CSS 136 Add the Tailwind Directives to CSS 137 Now Start the Tailwind CLI Build Process 137 Start Using Your Tailwind in HTML 137 CDN 137 Add the CDN Script to HTML 137 TAILWIND TYPOGRAPHY 139 Font Family 139 TAILWIND CSS LAYOUT 141

Contents ◾ xv Tailwind Container 141 KEY CONCEPTS 146 How Do We Use JIT Engine Mode? 147 JIT MODE FEATURES? 148 TAILWIND CSS BOX SIZING 148 TAILWIND CSS DISPLAY 150 Display Tailwind CSS Classes 150 FLOAT CLASSES 156 TAILWIND CSS CLEAR 158 CSS CLEAR CLASSES 158 OVERFLOW CLASSES OF TAILWIND CSS 163 TAILWIND CSS FLEX DIRECTION 171 TAILWIND CSS FLEX 174 FLEX 174 TAILWIND CSS ORDER 176 TAILWIND CSS GRID TEMPLATE COLUMNS 178 TAILWIND CSS ALIGNMENT 181 Justify Content 181 TAILWIND CSS JUSTIFY ITEMS 183 TAILWIND CSS SPACING 186 Padding 186 MARGIN 190 SPACE BETWEEN 194 TAILWIND CSS BORDERS 197 Border Radius 197 BORDER WIDTH 203 BORDER COLOR 206 BORDER OPACITY 208 BORDER STYLE 211 RING OPACITY 213 RING WIDTH 213 Ring – Width Classes 213

xvi ◾ Contents TAILWIND EFFECTS 215 TAILWIND TABLES 217 Border Collapse 217 Table Layout 217 BENEFITS OF USING TAILWIND CSS 220 WHY USE TAILWIND CSS? 221 Syntax 221 Small Styles 221 Less Cognitive Load 221 Better Composition 222 Consistency 222 Customization 222 Play CDN 223 Fancy Underline Styles 223 TAILWIND CSS: DISADVANTAGES 223 Style and HTML Are Mixed 223 Learning Takes Time 223 Lack of Essential Style Elements 224 Documentation 224 CHAPTER SUMMARY 224 FURTHER READING 224 NOTE 224 Chapter 5 ◾ FoundatIon 225 IN THIS CHAPTER 225 INTRODUCTION 225 WHY FOUNDATION? 226 INSTALLATION 226 Download Foundation 226 Template 227 FILE STRUCTURE OF FOUNDATION FOLDER 228 HTML5 Doctype 228 MOBILE RESPONSIVE FIRST 228 INITIALIZATION OF COMPONENTS 229

Contents ◾ xvii WHAT COMES WITH FOUNDATION? 229 COMPATIBILITY 229 WHAT WILL NO LONGER WORK? 230 BASIC PRINCIPLES 230 BASIC CSS KITCHEN SINK 231 Accordion 231 FOUNDATION CSS KITCHEN SINK ACCORDION ADVANCED OPTIONS 232 ADVANCED OPTIONS 236 Multi-Expand 236 All Closed 238 ACCORDION AND URLs 238 Deep Linking 238 CALLOUT 240 Coloring 242 SIZING 244 MAKING CLOSABLE 246 CARD 248 CARD DIVIDER 250 Images 250 Sizing 250 DROPDOWN 252 POSITIONING 254 OTHER POSITIONING 257 MEDIA OBJECT 259 SECTION ALIGNMENT 261 OFF-CANVAS 264 OFF-CANVAS POSITION 266 REVEAL (MODEL) 268 SIZING 270 FEATURES 273 FOUNDATION INTEGRATION LEVELS 274

xviii ◾ Contents CHAPTER SUMMARY 274 FURTHER READING 274 Chapter 6 ◾ Skeleton 275 IN THIS CHAPTER 275 INTRODUCTION 275 Installation 276 FILE STRUCTURE 276 SUPPORTED BROWSER 276 SKELETON – THE GRID 277 TYPOGRAPHY 280 Typography Units Used in CSS Frameworks 282 Absolute Lengths 282 RELATIVE LENGTHS 286 BUTTONS 286 FORM 291 LISTS 293 CODE 295 Benefits of Skeleton CSS Framework 297 Disadvantages of Skeleton CSS Framework 297 CHAPTER SUMMARY 297 FURTHER READING 297 NOTES 298 Chapter 7 ◾ mIllIgram 299 IN THIS CHAPTER 299 INTRODUCTION 299 MILLIGRAM INSTALLATION 299 CLI 300 Typography Units Used in CSS Frameworks 300 Absolute Lengths 301 RELATIVE LENGTHS 304 TYPOGRAPHY 304 BLOCKQUOTES 306

Contents ◾ xix BUTTONS 308 LISTS 311 FORMS 313 TABLES 314 GRIDS 316 CODE 318 UTILITIES 319 COLUMN WIDTHS 321 RESPONSIVENESS 323 REASONS TO USE MILLIGRAM 325 WHY NOT TO USE? 325 CHAPTER SUMMARY 326 FURTHER READING 326 NOTES 326 Chapter 8 ◾ pure CSS 327 IN THIS CHAPTER 327 INTRODUCTION 327 Why Pure CSS? 327 INSTALLING PURE CSS 328 OVERVIEW 331 RESPONSIVE DESIGN 331 Standard CSS 331 Extensible 331 PURE CSS MENU RESPONSIVE CSS MENU 331 PURE CSS FOUNDATION 339 Pure CSS Hiding Elements 339 PURE CSS IMAGES 341 PURE CSS BUTTONS 343 BUTTONS SIZES 349 PURE CSS TABLES 352 CHAPTER SUMMARY 358 FURTHER READING 358 NOTE 358