Building circuits in CSS with Silon

Last week a buddy of mine sent me a link to Silon, a CSS library. This library allows you to express boolean logic using CSS selectors. As the author of the library notes,

"Silon is implemented using LESS to generate CSS selectors for every combination of inputs that will turn each gate on. In effect, I created a LESS-based DSL that expresses (almost-)arbitrary boolean expressions."

I believe this a great teaching aid for explaining how signals traverse a circuit. There is a slight learning curve as you need to be familiar with basic concepts in HTML, CSS and Less. Once you have these under your belt you can begin your circuit designing journey using Silon.

In my last post, I provided instructions on building a NAND gate using LEGO and showed that boolean logic can be implemented using logic gates built with non-conventional materials.  However, due to mechanical and physical limitations building complex circuity might not be feasible with all materials.

This is where Silon shines! You can abstract away from the physical implementation of a circuit and focus on showing "what an entity does" instead of "how it does it". 


I have implemented a NAND gate using Silon here. Check it out and let me know what you think.