Useful Resource Links
This page contains several useful links that will come in handy during the course including the BASIS Online Help, the DWC-specific documentation, as well as links to reference material for the browser's Developer Tools, CSS, CSS Custom Properties, and more.
Course Files
- Sample Code - BBj source files and supporting assets for hands-on exercises, included in the
samples/directory
BASIS Documentation
- BASIS Online Help - The main BBj documentation portal with searchable help for all BBj topics
- DWC Overview - Introduction to the Dynamic Web Client
DWC Component Reference
- dwc.style - The official DWC component documentation. This is your go-to reference for looking up CSS custom properties, shadow parts, attributes, and styling options for every DWC control. Includes guides on themes, animations, form validation, and style directives.
- DWC Design Kit (Figma) - A Figma design kit for mocking up DWC application interfaces
DWC-Related Topics
- Mozilla Developer: Using CSS Custom Properties (Variables) - Defines CSS custom properties, basic usage, inheritance, and fallback values
- CSS Tricks - A Complete Guide to Custom Properties - Everything you'll want to know about CSS variables including naming, using properties to define properties, splitting colors, using the calc() function with custom properties, as well as using custom properties with web components that use a shadow DOM
DWC Themer
- DWC Themer - A "work-in-progress" version of the DWC Themer app shown in the TechCon DWC sessions. You can launch the themer via the link, create a custom theme by changing the values for several of the DWC's CSS custom properties, then download the CSS theme file to your browser's downloads directory. It's also possible to import an existing CSS theme file in order to make changes to it or to use it as a base for an entirely new CSS theme.
Browser Developer Tools Links
- Mozilla Developer: What are browser developer tools? - Covers how to access the tools in different browsers, overviews of the DOM inspector, CSS editor, and JavaScript debugger, watch expressions and breakpoints, and more
- Mozilla Developer: Debugging CSS - Covers viewing the source, editing CSS, adding styles, solving specificity issues, and CSS debugging strategies
- Chrome DevTools Documentation - The official Chrome Developer Tools documentation that covers simulating mobile devices, working with the Elements and Console tabs, analyzing memory use performance, remote debugging, and more
CSS Reference Links
- Mozilla Developer - CSS: Cascading Style Sheets - Mozilla's starting page for everything CSS
- Mozilla Developer: CSS Basics - Learn what CSS is and how to use it
- Mozilla Developer: CSS Reference - An exhaustive CSS reference describing every property and concept of CSS
- Mozilla Developer: CSS Cascade - Describes the algorithm defining how browsers combine property values from different sources
- Mozilla Developer: CSS Specificity - Describes the algorithm defining which declaration is the most relevant for an element by calculating the weight of a CSS selector