CodePen Embed - 3. CSS Type Grinding - Grind Identifiers into Single Bits

Live

This Pen is owned by Jane Ori 💜 on CodePen.

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer *; ambient-light-sensor *; camera *; display-capture *; encrypted-media *; geolocation *; gyroscope *; microphone *; midi *; payment *; vr *; web-share *; serial *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups-to-escape-sandbox allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":{"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}],"data":null},"url":"https://codepen.io/graphql","api":"cprails"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":14,\"font_type\":\"system\",\"format_on_save\":false,\"html_pre_processor\":\"none\",\"indent_with\":\"spaces\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":2,\"theme\":\"twilight\",\"id\":\"KKRRgjg\",\"auto_save\":true},\"hashid\":\"KKRRgjg\",\"itemType\":\"pen\",\"resources\":[],\"tags\":[],\"id\":63582296,\"user_id\":5018232,\"html\":\"<div\\n  class=\\\"type-grinding\\\"\\n  style=\\\"--size: sm;\\\"\\n>\\n  My inline style is setting the `--size` variable - edit it in the HTML panel!<br>\\n  Throw both good and bad data it, try removing it!<br>\\n  See how it affects our bits:\\n</div>\\n\\n\\n\\n<style>\\n  /* This is boilerplate to render our bits as-is for demonstration before we move on to makeing them useful. The CSS panel has our library code; Our users will not be using these variables directly. */\\n  div::after {\\n    display: block;\\n    white-space: pre;\\n    font-family: monospace;\\n    counter-reset: sm var(--_if-sm-then-1-else-0) md var(--_if-md-then-1-else-0) lg var(--_if-lg-then-1-else-0);\\n    content: \\\"\\\\a --_if-sm-then-1-else-0: \\\" counter(sm)\\n      \\\"\\\\a --_if-md-then-1-else-0: \\\" counter(md)\\n      \\\"\\\\a --_if-lg-then-1-else-0: \\\" counter(lg);\\n  }\\n</style>\\n\",\"css\":\".type-grinding {\\n  /* --size: md; */\\n  /* ^ this is a dev-user variable, we don't have to set it in the library if we're not worried about resetting it to allow recursive component nesting. If it's not nested and they don't set it, it will use its initial-value (md) when read. */\\n  --_sm-else-0: var(--size);\\n  --_if-sm-then-1-else-0: var(--_sm-else-0);\\n\\n  --_md-else-0: var(--size);\\n  --_if-md-then-1-else-0: var(--_md-else-0);\\n\\n  --_lg-else-0: var(--size);\\n  --_if-lg-then-1-else-0: var(--_lg-else-0);\\n}\\n\\n/* Register Dev-User Variable: */\\n@property --size {\\n  syntax: \\\"sm|md|lg\\\";\\n  initial-value: md;\\n  inherits: true;\\n}\\n\\n/* Register our internal/private vars: */\\n@property --_sm-else-0 {\\n  syntax: \\\"sm|<integer>\\\";\\n  initial-value: 0;\\n  inherits: true;\\n}\\n@property --_if-sm-then-1-else-0 {\\n  syntax: \\\"<integer>\\\";\\n  initial-value: 1;\\n  inherits: true;\\n}\\n\\n@property --_md-else-0 {\\n  syntax: \\\"md|<integer>\\\";\\n  initial-value: 0;\\n  inherits: true;\\n}\\n@property --_if-md-then-1-else-0 {\\n  /* same definition as --_if-sm-then-1-else-0 */\\n  syntax: \\\"<integer>\\\";\\n  initial-value: 1;\\n  inherits: true;\\n}\\n\\n@property --_lg-else-0 {\\n  syntax: \\\"lg|<integer>\\\";\\n  initial-value: 0;\\n  inherits: true;\\n}\\n@property --_if-lg-then-1-else-0 {\\n  /* same definition as --_if-sm-then-1-else-0 */\\n  syntax: \\\"<integer>\\\";\\n  initial-value: 1;\\n  inherits: true;\\n}\\n\",\"js\":\"// Nope!\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2022-10-01T15:10:19.320Z\",\"updated_at\":\"2022-10-01T15:13:47.396Z\",\"title\":\"3. CSS Type Grinding - Grind Identifiers into Single Bits\",\"description\":\"\",\"slug_hash\":\"KKRRgjg\",\"head\":\"\",\"private\":true,\"slug_hash_private\":\"78b2638b7fb39c0b69c82c338be0aa4f\",\"has_animation\":false,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":null,\"cpid\":\"01839419-24b8-71f1-907e-ff58a07a4fb5\",\"is_new_editor_pen\":false,\"protected\":false,\"access\":\"Private\",\"pen_hash\":null}","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6d8bf8b4b479137260842506acbb12717dace0823c023e08b96360e60b0840d9.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css","__pen_prefix_free_url":"https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js","__pen_reset_css_url":"https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"}