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
DWCTraining Repository - Github repository with the various files used throughout the course
BASIS Documentation
BASIS Online Help - Covers almost everything in the BBj language
BBj DWC-specific Documentation - Covers attributes, directives, themes, and validation as well as control-specific information such as attributes, shadow parts, class names, and CSS custom properties.
BBj DWC Theme Engine - Covers CSS custom properties, CSS parts in the shadow DOM, color palettes, component themes, and application themes. It also includes topics on typography, sizing and spacing, CSS custom properties for styles, transitions, and custom properties specific to windows.
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. The DWC Themer isn't yet finished and does not yet support writing out unique color properties for the DWC's predefined app themes: light, dark, and dark-pure.
Using the DWC Themer - A document that covers the DWC Themer's capabilities along with background information on CSS custom properties. It's also a work in progress but contains a lot of information about the program and its options, including a walk-through and sample code showing how to apply saved theme files.
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