{"id":14514,"date":"2022-04-13T15:04:23","date_gmt":"2022-04-13T13:04:23","guid":{"rendered":"https:\/\/hesmid.nl\/test\/?p=14514"},"modified":"2022-04-13T15:04:23","modified_gmt":"2022-04-13T13:04:23","slug":"corset-cascading-binding-sheets","status":"publish","type":"post","link":"https:\/\/hesmid.nl\/test\/corset-cascading-binding-sheets\/","title":{"rendered":"Corset &#8211; Cascading binding sheets"},"content":{"rendered":"\n<p>Reactive UI without the complexity of SPA frameworks. Use any backend you like; bind to the HTML you already produced.<\/p>\n\n\n\n<p><a href=\"https:\/\/corset.dev\/learn\/installation\/\">Get started<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/corset.dev\/api\/\">Documentation<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Bring your HTML to life.<\/h2>\n\n\n\n<p>Corset binds JavaScript to HTML. It doesn&#8217;t matter how the HTML is produced and Corset doesn&#8217;t need to own your templating choice. Instead it uses a CSS-like syntax to enhance whatever you give it. <\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"has-text-align-center\"><strong>HTML<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code has-small-font-size\"><code>&lt;div class=\"counter\">\n  &lt;button\n    type=\"button\"\n    class=\"increment\">Increment&lt;\/button>\n  &lt;button\n    type=\"button\"\n    class=\"decrement\"\n    disabled>Decrement&lt;\/button>\n\n  &lt;div\n    class=\"result\">\n    Count: &lt;strong class=\"count\">0&lt;\/strong>\n  &lt;\/div>\n&lt;\/div><\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"has-text-align-center\"><strong>JavaScript with Corset<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code has-small-font-size\"><code>import sheet, { mount } from 'https:\/\/cdn.corset.dev\/v1';\n\nmount(document, class {\n  count = 0;\n\n  bind() {\n    const { count } = this;\n\n    return sheet`\n      .counter {\n        --count: ${count};\n        --inc: ${() => this.count = count + 1};\n        --dec: ${() => this.count = count - 1};\n      }\n      \n      .count {\n        text: var(--count);\n      }\n      \n      .increment {\n        event&#91;click]: var(--inc);\n      }\n      \n      .decrement {\n        attr-toggle&#91;disabled]: ${count === 0};\n        event&#91;click]: var(--dec);\n      }\n    `;\n  }\n});<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<p><a href=\"https:\/\/codepen.io\/matthewp\/pen\/dyVeNrJ\"><em>CodePen \ud83d\udc49<\/em><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Reactive UI without the complexity of SPA frameworks. Use any backend you like; bind to the HTML you already produced. Get started Documentation Bring your HTML to life. Corset binds JavaScript to HTML. It doesn&#8217;t matter how the HTML is produced and Corset doesn&#8217;t need to own your templating choice. Instead it uses a CSS-like [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[7],"tags":[758,101,760,759],"acf":[],"_links":{"self":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/14514"}],"collection":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/comments?post=14514"}],"version-history":[{"count":1,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/14514\/revisions"}],"predecessor-version":[{"id":14515,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/14514\/revisions\/14515"}],"wp:attachment":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/media?parent=14514"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/categories?post=14514"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/tags?post=14514"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}