CodePen Embed - SusyCSS Demo

Live

This Pen is owned by Miriam Suzanne on CodePen.

External CSS

https://codepen.io/mirisuzanne/pen/ZBzRvX.css

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\":\"PboVrw\",\"auto_save\":true},\"hashid\":\"PboVrw\",\"itemType\":\"pen\",\"resources\":[{\"url\":\"https://codepen.io/mirisuzanne/pen/ZBzRvX.css\",\"order\":0,\"resource_type\":\"css\",\"par_content\":\"\"}],\"tags\":[\"css\",\"css-variables\",\"grids\",\"susy\",\"custom properties\"],\"id\":10739654,\"user_id\":15542,\"html\":\"<header>\\n  <h1>\\n    <a href=\\\"https://codepen.io/mirisuzanne/pen/ZBzRvX\\\">SusyCSS</a>\\n    Demo\\n  </h1>\\n  <h2>\\n    Susy in the DOM, without Sass!\\n  </h2>\\n  <a href=\\\"http://oocss.org/grids_docs.html\\\">\\n    AG Grid Nesting Test\\n  </a>\\n</h1>\\n\\n<main>\\n  <aside data-susy=\\\"2\\\"><h3>2of10</h3></aside>\\n  \\n  <article data-susy=\\\"6\\\">\\n    \\n    <div data-susy=\\\"3\\\"><h3>3of6</h3></div>\\n    <div data-susy=\\\"3 last\\\"><h3>3of6</h3></div>\\n    \\n    <section>\\n      <div data-susy=\\\"2\\\"><h3>2of6</h3></div>\\n      <article data-susy=\\\"4 last\\\">\\n        <div data-susy=\\\"2\\\"><h3>2of4</h3></div>\\n        <div data-susy=\\\"2 last\\\"><h3>2of4</h3></div>\\n        <footer><h3>full</h3></footer>\\n      </article>\\n    </section>\\n    \\n  </article>\\n  \\n  <aside data-susy=\\\"2 last\\\"><h3>2of10</h3></aside>\\n</main>\\n\",\"css\":\"/* Global Settings */\\n/* --------------- */\\n\\n:root {\\n  --susy-columns: 1;\\n  --susy-gutters: 0.25;\\n  --susy-spread: -1;\\n  --susy-container-spread: -1;\\n/*   --susy-static-grid: 1; */\\n/*   --susy-debug-color: green; */\\n}\\n\\n\\n/* Container */\\n/* --------- */\\n\\nmain {\\n  background-image: var(--debug-image);\\n  background-size: var(--debug-image-size);\\n  margin: var(--static-gutters) auto;\\n  overflow: hidden;\\n}\\n\\n\\n\\n/* Medium Screens */\\n/* -------------- */\\n\\n@media (min-width: 30em) {\\n  /* settings */\\n  :root { --susy-columns: 5; }\\n\\n  /* floats and gutters */\\n  [data-susy] {\\n    --gutters-right: 1;\\n    float: left;\\n    margin-bottom: var(--gutter-width);\\n  }\\n  [data-susy~='last'] { --gutters-right: 0; }\\n  \\n  /* layout */\\n  [data-susy~='2']{ --span: 1; }\\n  \\n  [data-susy~='6'] { --span: 3; }\\n  [data-susy~='6'] * { --susy-columns: 3 }\\n  \\n  [data-susy~='3'] { --span: 3; }\\n\\n  [data-susy~='4'] { --span: 2; }\\n  [data-susy~='4'] * { --susy-columns: 2 }\\n}\\n\\n\\n\\n/* Large Screens */\\n/* ------------- */\\n\\n@media (min-width: 50em) {\\n  /* settings */\\n  :root { --susy-columns: 10; }\\n  \\n  /* layout */\\n  main { max-width: var(--container-width); }\\n  [data-susy~='2']{ --span: 2; }\\n  \\n  [data-susy~='6'] { --span: 6; }\\n  [data-susy~='6'] * { --susy-columns: 6 }\\n  \\n  [data-susy~='4'] { --span: 4; }\\n  [data-susy~='4'] * { --susy-columns: 4 }\\n}\\n\\n\\n\\n/* display styles */\\n/* -------------- */\\n\\n@supports not (--css: variables) {\\n  body::before {\\n    content: 'This browser does not support CSS Variables';\\n    display: block;\\n  }\\n}\\n\\nbody {\\n  padding: var(--static-gutters);\\n}\\n\\nheader {\\n  text-align: center;\\n}\\n\\nh3 {\\n  padding: size(--static-gutter);\\n  text-align: center;\\n  text-shadow: 0 0 2px white;\\n}\\n\\naside::before, aside::after,\\narticle::before, article::after,\\nsection::before, section::after,\\ndiv::before, div::after,\\nfooter::before, footer::after {\\n  content: ' ';\\n  display: table;\\n  clear: both;\\n}\\n\\nsection,\\nfooter {\\n  clear: both;\\n}\\n\\nsection,\\narticle {\\n  outline: 2px dotted;\\n}\\n\\naside {\\n  background-color: hsla(180, 50%, 50%, 0.5);\\n}\\n\\n[data-susy~='6'] [data-susy~='3'],\\n[data-susy~='4'] [data-susy~='2'] {\\n  background-color: hsla(0, 50%, 50%, 0.5);\\n}\\n\\nsection [data-susy~='2'] {\\n  background-color: hsla(45, 50%, 50%, 0.5);  \\n}\\n\\nfooter {\\n  background-color: hsla(-45, 50%, 50%, 0.5);  \\n}\\n\",\"js\":\"\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2016-11-04T21:44:33.000Z\",\"updated_at\":\"2017-08-25T05:45:04.000Z\",\"title\":\"SusyCSS Demo\",\"description\":\"This is a demonstration of [SusyCSS](http://codepen.io/mirisuzanne/pen/ZBzRvX), a near-complete implementation of [Susy 3](https://github.com/oddbird/susy/releases/tag/3.0.0.alpha.1), *without any Sass involved*.\\n\\nThe magic is all in the CSS variables, which can be applied anywhere. The selectors are arbitrary, for the purpose of this demo.\\n\\n**Advantages:**\\n\\n1. SusyCSS understands the DOM structure! *Settings actually inherit*!\\n2. No Sass required!\\n\\n**Disadvantages:** \\n\\n1. CSS has no necessary control structures, so the syntax & settings are bulkier. \\n2. SusyCSS doesn't support asymmetrical grids.\\n\\n**Note:** \\n\\nThe background grid image doesn't handle sub-pixel rounding well. That's nothing new...\",\"slug_hash\":\"PboVrw\",\"head\":\"\",\"private\":false,\"has_animation\":false,\"team_id\":0,\"css_prefix\":\"autoprefixer\",\"template\":true,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":15,\"pick\":false,\"popularity\":306,\"views_count\":2311,\"pick_visible_at\":null,\"cpid\":\"0158314c-e5e8-7892-9e55-e4c575aca6e6\",\"is_new_editor_pen\":false,\"access\":\"Public\",\"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://public.codepenassets.com/css/normalize-5.0.0.min.css","__pen_prefix_free_url":"https://public.codepenassets.com/js/prefixfree-1.0.7.min.js","__pen_reset_css_url":"https://public.codepenassets.com/css/reset-2.0.min.css"}