riot/made-with-riot

A list of apps and components made with Riot.js library

Simple and elegant component-based UI library

Custom components • Concise syntax • Simple API • Tiny Size

Riot brings custom components to all modern browsers. It is designed to offer you everything you wished the native web components API provided.

Tag definition

<timer>
  <p>Seconds Elapsed: { state.time }</p>

  <script>
    export default {
      tick() {
        this.update({ time: ++this.state.time })
      },
      onBeforeMount(props) {
        // create the component initial state
        this.state = {
          time: props.start,
        }

        this.timer = setInterval(this.tick, 1000)
      },
      onUnmounted() {
        clearInterval(this.timer)
      },
    }
  </script>
</timer>

Open this example on Plunker

Mounting

// mount the timer with its initial props
riot.mount('timer', { start: 0 })

Nesting

Custom components let you build complex views with HTML.

<timetable>
  <timer start="0"></timer>
  <timer start="10"></timer>
  <timer start="20"></timer>
</timetable>

HTML syntax is the de facto language on the web and it's designed for building user interfaces. The syntax is explicit, nesting is inherent to the language and attributes offer a clean way to provide options for custom tags.

Performant and predictable

• Absolutely the smallest possible amount of DOM updates and reflows.
• Fast expressions bindings instead of virtual DOM memory performance issues and drawbacks.
• One way data flow: updates and unmounts are propagated downwards from parent to children.
• No "magic" or "smart" reactive properties or hooks
• Expressions are pre-compiled and cached for high performance.
• Lifecycle methods for more control.

Close to standards

• No proprietary event system.
• Future proof thanks to the javascript module syntax.
• The rendered DOM can be freely manipulated with other tools.
• No extra HTML root elements, data- attributes or fancy custom attributes.
• No new syntax to learn.
• Plays well with any frontend framework.

Use your dearest language and tools

• Create components with CoffeeScript, Jade, LiveScript, Typescript, ES6 or any pre-processor you want.
• Build with @riotjs/cli, webpack, Rollup, parcel, Browserify.
• Test however you like; you can load your riot tags directly in node

Powerful and modular ecosystem

The Riot.js ecosystem is completely modular, it's designed to let you pick only the stuff you really need:

• @riotjs/cli - CLI to locally compile your tags to javascript
• @riotjs/ssr - Super simple server side rendering
• @riotjs/hydrate - Hydration strategy for your SPA
• @riotjs/route - Isomorphic router
• @riotjs/lazy - Lazy components loader
• @riotjs/hot-reload - Live reload plugin
• @riotjs/compiler - Advanced tags compiler
• @riotjs/parser - HTML parser
• @riotjs/dom-bindings - Expressions based template engine
• @riotjs/custom-elements - native custom elements implementation

CDN hosting

• unpkg
• jsDelivr
• cdnjs

How to contribute

If you are reading this it's already a good sign and I am thankful for it! I try my best working as much as I can on riot but your help is always appreciated.

If you want to contribute to riot helping the project maintenance please check first the list of open issues to understand whether there is a task where you could help.

Riot is mainly developed on UNIX systems so you will be able to run all the commands necessary to build and test the library using our Makefile. If you are on a Microsoft machine it could be harder to set up your development environment properly.

Following the steps below you should be able to properly submit your patch to the project

1) Clone the repo and browse to the riot folder

git clone [email protected]:riot/riot.git && cd riot

2) Set up your git branch

git checkout -b feature/my-awesome-patch

3) Install the npm dependencies

npm i

4) Build and test riot using the Makefile

# To build and test riot
$ make riot

# To build without testing
$ make raw

5) Pull request only against the dev branch making sure you have read our pull request template

6) Be patient

Credits

Riot is actively maintained with ❤️ by:

Gianluca Guarini

Many thanks to all smart people from all over the world who helped improving it.

Official Website

https://riot.js.org

Backers

Support us with a monthly donation and help us continue our activities. Become a backer

Sponsors

Become a sponsor to get your logo on our README. Become a sponsor

Thanks

Special thanks to Browserstack for their support

made-with-riot's Issues

Define approach for making Ajax calls

Should we use some micro-library? Vanilla JS? Just a wrapper?

Migrated from discussion on #6

Big URLs conflicting with button

Big URLs should be cropped to prevent this from happening:

need to be added as a collaborator

pls add me as a collaborator to made-with-riot

[component] Finish card-list component

Todo list for this component:

• Make it responsible for small devices

As the functionality remains the same on large and small devices, there is no much left to do on this one.

Document which projects are fit to become part of this repo

Hello there!

I'd love to know what kind of content you'd like to be submitted.

Tiny apps?
Tools?
Helper?
Registration required to see it in action?

Thanks in advance!

Showcasing riot tags

Do we some place to showcase riot custom components / tags instead of complete application? Please share the detail.

riot tag for typewriter effect

Add margin bottom to the showcases

At moment the showcases seem to be to close to each other at least on desktop

Adding 10/20px margin bottom would be a reasonable solution

Include Author(s) credit link?

Adds a little more incentive to sharing a Riot project?

Simple block to add to the projects.json file:

"author": {
  "name": "Luke Edwards",
  "link": "http://whatever"
}

Author info would display nicely inside the Details pane

Make tags clickable

Right now, tags in details view is not clickable.
Do you intend to implement this feature some day?

Make Right Drawer

We need a semi transparent right drawer which is supposed to open in desktop when "View details button" is clicked
and this becomes fullscreen when on mobile

Tech stack

This is to discuss what we use for made-with-riot...
For sure Riot :D
but open pieces remain AjaxCalls...?
where we store submitted projects...?
backend?
do we adapt a Flux implementation?(i prefer)
any css framework?
Iso-morphic stack? (for SEO)
what do we do for critical CSS?

LICENSE

Hello! Can you please provide any information which License applies to this repo? Thank you!

include compass

lets include compass for browser based animation prefixes etc....
also add a helpers.scss for commonly used stuff
like display block
position relative etc...
and extend then in components

[component] Finish top-bar component

Todo list for this component:

• Make it responsible for small devices
• Make offcanvas action effect on small devices
• Make search input work

I think for now this is it.

Order projects by descending id

New projects should stay on top IMO so new stuff would always come first to those re-visiting the webpage.

As projects are already added in ascending order to the .json, perhaps just a Array.reverse() should do the trick?

breakpoints for RWD

what the responsive screen breakpoints that we are setting here in this project?

Enable filtering by tags

Right now one can add tags to help identify projects, but they're no being found by search input.

Update to riot3

The site is still using an old riot version, it would be nice to see it updated