UX/UI Development
Foundational knowledge for all types of UX/UI development tasks ranging from theming to client-side software.
Table of contents
Themes & Styles
HyperText Markup Language (HTML)
Tools:
Additional resources:
Cascading Style Sheets (CSS)
TODO: Add overview and fundamentals.
Additional resources:
Aggregation and Minimization / Compression
TODO: Add notes on tech like webpack.
PX vs. REM vs. EM
PX stands for pixel.
When to use PXs
- When you need a fixed layout size to prevent scaling from breaking functionality (e.g. overlapping buttons or not being able to fit a control panel in the viewport).
REM is a relative unit of measurement REM stands for root EM.
When to use REMs
- When you want elements to be scalable based on the HTML element font size which is typically based on user browser settings. So it’s good to generally use REMs to respect user browser settings.
REM Details
- REM computes px relative to the parent HTML (i.e. what the browser or website has set at the root HTML element)
- The computed value is HTML_parent_font_px * element_rem. E.g. HTML element font size is set to 16px font-size and current element width is set to 10rem then the current element width will be computed as 160px.
- Note: The HTML element font size is often set by the browser (default or user settings) and not directly in stylesheets. This is different from window zoom which scales up the size of a pixel to take up more device pixels (see more details on StackOverflow).
EM is a relative unit of measurement.
When to use EMs
- When an element size must scale with the font size of that element. A good example is the padding of a button since you would want the padding to scale with the font size of the button (regardless of the HTML element font size).
EM Details
- EM computes px relative to the element that the em value is used on
- The computed value is element_font_px * element_rem. E.g. Current element font size is set to 16px font-size and current element width is set to 10em then the current element width will be computed as 160px.
- Using ems can be tricky because font-size of the current element is inerited from parent elements by default. Therefore, if we have nested elements setting font size with ems then there could be an exponential increase in font-size through inheritance. A fast fix in this case would be to set the current element (or its parent) font-size to 1rem so that it resets the font-size inheritance chain to the HTML element.
When to use neither EMs nor REMs nor PXs
- When setting line height, do not use any units. Unitless line height will compute the line height based on the children font settings.
See a comprehensive comparison guide or a visual overview.
Bootstrap
Bootstrap is a front-end styling framework focused on responsive, mobile first, and modern design. Bootstrap uses SASS to generate large libraries of CSS that is used to style HTML elements mostly through HTML classes.
Additional resources:
Client-Side Software
Javascript Linters, Formatters, and Codemods
Web Components
TODO: Add overview and fundamentals.
Additional resources:
Storybook
Storybook is a small, development-only, framework agnostic workshop to isolate, render, and test web components (Web Components, React, Vue.js) in various states.
Additional resources: