diff --git a/.circleci/config.yml b/.circleci/config.yml new file mode 100644 index 00000000..4a8a9e2d --- /dev/null +++ b/.circleci/config.yml @@ -0,0 +1,17 @@ +version: 2.1 +orbs: + node: circleci/node@1.1.6 +jobs: + build-and-test: + executor: + name: node/default + steps: + - checkout + - node/with-cache: + steps: + - run: npm install + - run: npm test +workflows: + build-and-test: + jobs: + - build-and-test \ No newline at end of file diff --git a/README.md b/README.md index 55a6385d..7fb21b2a 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,17 @@ -![ htmx](https://raw.githubusercontent.com/bigskysoftware/htmx/77cc4ba1798750fc6469ae1659baffe2c945ad8f/www/img/htmx_logo.1.png "high power tools for HTML") +![ htmx](https://raw.githubusercontent.com/bigskysoftware/htmx/master/www/img/htmx_logo.1.png "high power tools for HTML") *high power tools for HTML* +[![Gitter](https://badges.gitter.im/intercooler-js/Lobby.svg)](https://gitter.im/intercooler-js/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) +[![Netlify Status](https://api.netlify.com/api/v1/badges/dba3fc85-d9c9-476a-a35a-e52a632cef78/deploy-status)](https://app.netlify.com/sites/htmx/deploys) + ## Introduction htmx is a set of extensions (attributes, request headers, etc.) that help you build [modern UI](https://htmx.org/examples) with the [simplicity](https://en.wikipedia.org/wiki/HATEOAS) and [power](https://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm) of HTML. -Htmx is small ([~6k min.gz'd](https://unpkg.com/htmx.org/dist/)), IE11 compatible, [dependency-free](https://github.com/bigskysoftware/htmx/blob/master/package.json) +htmx is small ([~6k min.gz'd](https://unpkg.com/htmx.org/dist/)), IE11 compatible, [dependency-free](https://github.com/bigskysoftware/htmx/blob/master/package.json) & you can try it out quickly, without a huge rewrite. ## Quick Start diff --git a/www/examples/delete-row.md b/www/examples/delete-row.md index b556ac85..09434ac6 100644 --- a/www/examples/delete-row.md +++ b/www/examples/delete-row.md @@ -6,7 +6,7 @@ layout: demo_layout.njk This example shows how to implement a delete button that removes a table row upon completion. -Each row has a button with a `kt-delete` attribute containing the url on which to issue a DELETE request to delete the row from the server. +Each row has a button with a `hx-delete` attribute containing the url on which to issue a DELETE request to delete the row from the server. This request should respond with empty content. ```html @@ -15,19 +15,19 @@ This request should respond with empty content. angie@macdowell.org Active - ``` -In order to tell where to put this empty content, the table body has an `kt-target` attribute set to `closest tr` . This will target the row containing the button which triggred the action, replacing it by... nothing. +In order to tell where to put this empty content, the table body has an `hx-target` attribute set to `closest tr` . This will target the row containing the button which triggred the action, replacing it by... nothing. -It also has a `kt-swap` attribute set to `outerHTML 1s` in order to replace the row itself, with a 1 second delay allowing for a CSS3 transition to fade the row out. +It also has a `hx-swap` attribute set to `outerHTML 1s` in order to replace the row itself, with a 1 second delay allowing for a CSS3 transition to fade the row out. During this one second delay, the class "kutty-swapping" is added to `tr` element about to be replaced. -Finally, the body also has a `kt-confirm` attribute so that a confirmation popup is shown before triggering the action for real. +Finally, the body also has a `hx-confirm` attribute so that a confirmation popup is shown before triggering the action for real. ```html @@ -39,7 +39,7 @@ Finally, the body also has a `kt-confirm` attribute so that a confirmation popup - + ...
@@ -92,7 +92,7 @@ Finally, the body also has a `kt-confirm` attribute so that a confirmation popup ${contact["email"]} ${contact["status"]} - @@ -116,7 +116,7 @@ Finally, the body also has a `kt-confirm` attribute so that a confirmation popup - + ${rows} `; diff --git a/www/examples/progress-bar.md b/www/examples/progress-bar.md index de56e84d..f8985f26 100644 --- a/www/examples/progress-bar.md +++ b/www/examples/progress-bar.md @@ -30,6 +30,7 @@ This div is then replaced with a new div that reloads itself every 600ms: ``` + This HTML is rerendered every 600 milliseconds, with the "width" style attribute on the progress bar being updated. Because there is an id on the progress bar div, htmx will smoothly transition between requests by settling the style attribute into its new value. This, when coupled with CSS transitions, make the visual transition continuous @@ -52,6 +53,34 @@ Finally, when the process is complete, a restart button is added to the UI: ``` +This example uses styling cribbed from the bootstrap progress bar: + +```css +.progress { + height: 20px; + margin-bottom: 20px; + overflow: hidden; + background-color: #f5f5f5; + border-radius: 4px; + box-shadow: inset 0 1px 2px rgba(0,0,0,.1); +} +.progress-bar { + float: left; + width: 0%; + height: 100%; + font-size: 12px; + line-height: 20px; + color: #fff; + text-align: center; + background-color: #337ab7; + -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); + box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); + -webkit-transition: width .6s ease; + -o-transition: width .6s ease; + transition: width .6s ease; +} +``` + {% include demo_ui.html.liquid %}