new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

GitHub Primer · all subjects

layout/responsive

4 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Responsive grid breakpoints and shorthands

Responsive grid breakpoints use the following shorthands: sm (min-width: 544px), md (min-width: 768px), lg (min-width: 1004px), xl (min-width: 1280px). The lg breakpoint matches the current page width of 980px including left and right padding of 12px, so content doesn't touch the edges of the window when resized. All column width classes can be set per breakpoint to create responsive grid layouts, and each responsive style is applied to the specified breakpoint and up.

Responsive adaptation: split into different pages

List-detail patterns such as settings pages can be split into different pages on narrow viewports. In this behavior, only one of the pane or content regions is shown at a time. Users can switch between the two by selecting an item from the list to drill into its details or navigate back using a parent link in the page header.

Responsive adaptation: pane as bottom sheet

Panes can be displayed as bottom sheets on narrow viewports when used to display auxiliary information such as metadata, details, or actions. Use narrow viewport-specific button triggers to open the pane as a bottom sheet. If using a pane as a sidebar for navigation or filtering, refer to responsive sidebar navigation patterns.

Responsive adaptation: stack vertically

When a pane displays an overview of the content, it can be stacked vertically on top of the content region on narrow viewports. Metadata and auxiliary information can appear stacked below the content region. Avoid stacking a pane on top of main content if the pane has many links, as it will push the main content down and force users to scroll. A small pane summary may appear above the content with a trigger to display full details as a bottom sheet.

Give your agent this brain