INDEX
########################################################### 2024-01-30 22:30 ########################################################### Slaying the Dragon... Master Media Queries and Responsive CSS https://www.youtube.com/watch?v=K24lUqcT0Ms Media queries allow you to target width sizes and adjust features @media TYPE (CONDITION) {RULE} # Empty TYPE=fall @media (max-width: 500px) { # Minwidth is reverse (default is a small screen increasing) h1 { color: red; } # Now h1 tags are red when screen is less than 500px } @meda (max-width: 1231px) { # On a small enough scale, buttons resize .header__title { font-size: 1.5rem; } .header__link, # Can share a style between targets .header_btn { font-size: 0.8rem; } } # Add multiple conditions for ever decreasing scales But this is based on a break-fix model - only fix things if you notice, and very repetitive On these pages, objects scale with the page, until they need to scale differently, on problems Alt, just pre-define scales and apply style based on those - rather than at breaking points Do this by creating a border which defines when the object scales change So objects are of a fixed size until they change at a cutoff point .container { width: 100%; margin-left: auto; margin-right: auto; padding-left: 0.5rem; padding-right: 0.5rem; } @media (min-width: Npx) { .container { max-width: Npx; } } # Do this for set N values @media (min-width: 475px) { .container { max-width 475px; } } # Older version: .container { width: 90%; margin: 0 auto; } # Do "desktop first": .container { max-width: 1536px; ... } @media (max-width: Npx) { .container { max-width: Npx; } } # Values go down instead of up # Final "media" element uses "width: 100%" - so you have default at top then reverse steps
Web Dev Simplified... Learn CSS Media Query https://www.youtube.com/watch?v=yU7jJ3NbPdA Media queries act on types of screens - can specifically set print formats CSS reads top to bottom so "media" must be after its target @media all and (max-width: 500px) { # Sets "blue" below width 500px body { color blue; } } @media (orientation: landscape) { # width > height .title { color: green; } }
Jack in the Net... Secret to Mobile Friendly https://www.youtube.com/watch?v=xzVuDo3yvSo PX = absolute units (good for things of fixed size) - font default is 16px Relative units scale based on size - these are based around default font scale So by default 1em=16pm, 1rem=16px, 100%px=16px - these change based on default font scale REM based on defaults, EM based on parent, VW based on viewport width 1vw is 1% of the viewport width - margins are better in % as px changes baesd on device Usually best to set a default size and then scale based on screen
########################################################### 2024-02-07 09:00 ########################################################### Net Ninja... Bulma CSS Tutorial https://www.youtube.com/playlist?list=PL4cUxeGkcC9iXItWKbaQxcyDT1u6E7a8a Bulma is just css, unlike bootstrap - just add a link to stylesheet in header <link rel="stylesheet" href=".../bulma.min.css"> # Strips all default formatting styles - applies basic styling so all tags the same <h1>Hell Bulma<h1> # Has no formatting <h1 class="is-size-1">...<h1> # Sets size to h1 (can similarly do size-3 for h3 size). 1-7 <p class="is-size-4 is-uppercase is-italic"> # Sets text italic, uppercase, size4 class="has-text-weight-bold" # Set font weight to bold - uses "has" in this case class="title" # Sets styling to be large and bold, as a title - similarly "subtitle" class="has-text-centered" # Center text - equally "text-right" and "text-left" (default) class="has-text-primary" # Set colour to primary (green) - or warning, danger etc. class="has-text-primary-dark" # Set darker version of colour - equally "light" class="has-background danger" # Set background of textbox to red Padding and spacing is used to separate elements class="py-6" # y-pad of 6 units (spacing above and below) - also "px" class="my-2" # y-margin of 2 units - also "mx" # Also t=top r=right b=bottom l=left - e.g. "pt-2" for padding above of 2 <div class="section"></div> # Adds preset padding for a section - can use any tag <div class="container"></div> # Centralises and sets left right margins Bulma has a default system for navbars - By default <nav> just adds spacing # index.html <nav class="navbar has-shadow is-white"> # Greys links and formats cleanly <div class="navbar-brand"> <a class="navbar-item"> <img src="FILE" alt="site logo" style="max-height: 70px"> # Override bulma styling </a> # "navbar-burger" changes appearance of items based on "is-active" class - use js to add <a class="navbar-burger" id="burger"> <span></span> </a> </div> <div class="navbar-menu" id=nav-links> <div class="navbar-end"> # Add items at end of navbar <a class="navbar-item">My account"</a> </a></div></div> </nav> <script src="index.js"></script> # index.js const burgerIcon = document.querySelector('#burger'); # Reference item with id="burger" const navbarMenu = document.querySelector('#nav-links'); # Thing to edit with event burgerIcon.addEventListener('click', () => { navbarMenu.classList.toggle('is-active') # Toggles active/inactive on click }); A breadcrumb is esentially the location of the directory <div class="section pt-4 pb-0"> <nav clas="breadcrumb has-arrow-separator"> # Breadcrumb with arrow separators <ul class="container"> # Put in middle <li><a class="has-text-gray">Coffee Ninja</a></li> <li><a class="has-text-gray">Shop</a></li> <li class="is-active"><a>Docker Dark Roast</a></li> # Format current page differently </div></nav></ul> Bulma grids are predefined alignments for columns - On mobile all columns squash together <section class="section"> <div class="container"> # Get 12 columns - so set width (add up to 12) <div class="columns is-vcentered"> # Vertically center all elements <div class="column is-2"> <h1 class="is-size-1 title">Docker</h1> <h2 class="is-size-2 subtitle">Dark Roast</h2> <p>TEXT</p> </div> <div class="column is-7 has-text-centered"> # Center image within columns <img src="assets/FILE" alt="docker coffee image" class="px-6"> </div> <div class="column is-3">... </div> </div></div></section> # Can use classes like "is-half" or "is-one-quarter" or "is-four-fifths" Now for mobile support you control column widths based on "responsive class suffixes" Can apply these to text size and column width - not all classes work # -mobile -tablet -desktop -widescreen -fullhd... sets for devices of that size "and up" class="is-size-3-mobile is-size-1-desktop"> # Set size3 for mobile and size1 for desktop <h1 class="is-size-1-desktop title">Docker</h1> <h2 class="is-size-2-desktop subtitle">Dark Roast</h2> # For mobile device, move 3rd column below <div class="container"> <div class="columns is-vcentered is-multiline"> # Add multiline support for columns <div class="column is-6-tablet is-3-desktop"> <h1 class="is-size-1 title">Docker</h1> <h2 class="is-size-2 subtitle">Dark Roast</h2> <p>TEXT</p> </div> <div class="column is-6-tablet is-5-desktop has-text-centered"> <img src="assets/FILE" alt="docker coffee image" class="px-6"> </div> <div class="column is-12-tablet is-4-desktop">... </div> # Set full width on tablet </div></div> Tabbed content is content sectioned off with tab buttons (e.g. Pictures, Music, Videos) Does not provide the javascript to do this - but relatively simple <div class="tabs is-boxed"> <ul> # Define the tabs themselves <li class="is-active" data-target="product-details"> <a>Product Details</a> </li> <li data-target="delivery-info"> <a>Delivery Info</a> </li> </ul></div> <div class="px-2" id="tab-content"> <div id="product-details"> <h3 class="is-size-5 title">Product Details<h3> <p>INFO.............</p> </div> <div id="delivery-info" class="is-hidden"> # Hide 2nd bit of content <h3 class="is-size-5 title">Delivery Info<h3> <p>INFO.............</p> </div> </div> # Now we want to be able to toggle this # index.js const tabs = document.querySelectorAll('.tabs li') # Get all list items in tabs const tabContentBoxes = document.querySelectorAll('#tab-content > div'); # Get child divs tabs.forEach((tab) => { # Loop through each item as "tab" tab.addEventListener('click', () => { # Define a function on click events tabs.forEach(item => item.classList.remove('is-active')) # Remove class from all tabs tab.classLst.add('is-active') # Add class to this click tab const target = tab.dataset.target; # Access the "data-target" element of that tab tabContentBoxes.forEach(box => { # Loop through all data boxes is (box.getAttribute('id') === target) { box.classList.remove('is-hidden'); # Unhide target data we want to see } else { box.classList.add('is-hidden'); # Hide any other data } }) }) }) Message boxes are framed blocks of content <div class="message"> <div class="message-header"> <p>Earn points with the Coffee Club</p> </div> <div class="message-body"> <p>.......</p> </div> </div> # Change theme in the "message" div class="message is-danger" # Sets whole box theme to be red Buttons in bulma are just elements that change on hover and press <button class="button is-primary">Add to cart</button> # Make a green button class="button is-large is-rounded" # Make a larger button that's rounded # is-loading can be a class added while other async code is being run <div class="has-text-centered"> # Make a centered button <button class="button">sign Up</button> <div> Cards are like arrays of message boxes <section class="section is-hidden-mobile"> # Hide cards on mobile <div class="container"> <h3 class="title has-text-centered is-size-4">Related Products</h3> <div class="columns mt-5 is-8 is-variable is-centered"> # Center for all screens <div class="column is-4-tablet is-3-desktop"> <div class="card"> # Make a card <div class="card-image has-text-centered px-6"> # Image at top <img src="IMAGE", alt="product"> </div> <div class="card-content"> # Text in the card <p>............</p> <p class="title is-size-5">..........</p> </div> <div class="card-footer"> # Buttons at the bottom <p class="card-footer-item"> <a href="" class="has-text-grey">View</a> </p> </div> </div> </div> <div class="column is-4-tablet is-3-desktop"> <div class="card"></div> </div> <div class="column is-4-tablet is-3-desktop"> <div class="card"></div> </div> </div> </div> </section> A modal is a popup with a form - by default doesn't show unless "is-active" on modal <div class="modal"> <div class="modal-background"></div> # Gray out the rest of the content <div class="modal-content has-background-white py-5 px-5"> <h3 class="title mb-6">Join the Club</h3> </div> </div> # Javascript const signupButton = document.querySelector('#signup'); # Find trigger const modalBg = document.querySelector('.modal-background'); # Find background const modal = document.querySelector('.modal'); # Find actual modal signupButton.addEventListener('click', () => { modal.classList.add('is-active'); # On click of button, make modal visible }) modalBg.addEventListener('click', () => { modal.classList.remove('is-active'); # On click of background, remove modal }) Forms is an extensive section in bulma - can do basic things like checkboxes <form> <div class="field"> # Have default spacing between items <label class="label">Name</label> <div class="control"> <input type="text" class="input" placeholder="Name"> </div> </div> <div class="field"> <label class="label">Email</label> <div class="control"> <input type="text" class="input" placeholder="Email"> </div> </div> <div class="field"> <div class="control"> <label class="checkbox"> # To style checkbox correctly <input type="checkbox"> I agree to the <a href="">terms and conditions</a> </label> </div> </div> <div class="field"> <div class="control mb-6"> <div class="select is-dark"> # Make a dropdown menu <select> <option>Small (250g)</option> <option>Large (500g)</option> </select> </div> </div> </div> <div class="mt-6 has-text-centered"> <button class="button is-warning">Sign up</button> </div> </form> A footer is just a basic bit of text at the end <footer class="footer"> <div class="content has-text-centered"> <p>Copyright 2020 ...</p> </div> </footer>