Elysia Tools
Navigation
Workflow Playbook
Write and review CSS with readable formatting, selector diagnostics, responsive snippets, visual effects, and rendered-intent checks.
Hubs
Write and review CSS with readable formatting, selector diagnostics, responsive snippets, visual effects, and rendered-intent checks.
Use this guide to turn the stated scope into a reviewable result. Keep the source, intermediate outputs, and decisions together so the next person can understand what was checked and why.
Keep a readable source copy and identify target browsers.
List components, breakpoints, and states the change must support.
Capture a baseline rendering before changing selectors or visual values.
Decision: Which layout model fits?. Choose grid, masonry, or another explicit structure from content flow and responsive constraints.
Decision: Is the cascade intentional?. Extract selectors and compare specificity before adding a workaround or increasing nesting.
Decision: Which visual effect is needed?. Use filters, gradients, typography, or easing only when they serve a component state.
Beautify the working copy for line-by-line review. Use css-beautifier.
Extract selectors, calculate specificity, and prefer order, scope, or a token before !important. Use css-selector-extractor, css-selector-specificity-calculator.
Generate masonry and fluid clamp values, then test columns, gaps, line lengths, and type. Use css-masonry-layout-generator, css-fluid-typography-clamp-calc.
Create filter, color, gradient-text, and easing values for named states; check contrast, fallbacks, and reduced motion. Use css-filter-generator, css-target-color-filter-generator, css-gradient-text, css-easing-visualizer.
Minify only a reviewed copy, compare parsed rules with source, and inspect representative states. Use css-minifier.
Workflow playbook
Beautify the working copy for line-by-line review.
Extract selectors, calculate specificity, and prefer order, scope, or a token before !important.
Generate masonry and fluid clamp values, then test columns, gaps, line lengths, and type.
Create filter, color, gradient-text, and easing values for named states; check contrast, fallbacks, and reduced motion.
Minify only a reviewed copy, compare parsed rules with source, and inspect representative states.
Choose grid, masonry, or another explicit structure from content flow and responsive constraints.
Extract selectors and compare specificity before adding a workaround or increasing nesting.
Use filters, gradients, typography, or easing only when they serve a component state.