rui

A ruby user interface library for building your web app using a component based approach. The first of it's kind, rui provides a new way of architecting HTML and CSS.

Providing frontend development the abstractions they've been waiting for, rui is a templating language and a CSS replacement. It enforces component based design in your ruby applications.

rui comes with rails asset pipeline integration. In fact it's the fastest CSS preprocessor on rails. Not only fast in development, rui can coordinate your HTML and CSS so much so that it not only minifies CSS but also your HTML, including class names.

The Style Sheet

With both the beauty and power of ruby, large scale frontend becomes easier to manage. Sass and Less are scrambling to implement programming language features that ruby has always had.

Style::Sheet.register(:blog_post) do |s|
  header do
    title.extend(typography: [:title, :large])
  end

  content(margin_top: '1.5em') do |content|
    content.extend(typography: :standard)

    p(margin_top: '1.5em')

    a(color: :black) do |a|
      a.hover(color: :red)
      a.visited(color: :grey)
    end
  end

  s.media(min_width: '50em') do
    article(max_width: '50em')
  end
end

The Component

The structure of a HTML component is expressed in a concise manner mirroring that of the Style Sheet. Many have commented on the eloquence of rui.

Component.register(blog_post: :article) do |component, post|
  header do
    title(:h1) { post.title }
  end

  content(:section) { post.content }

  footer do
    p { ['By', cite { post.author.name }] }
  end
end

The Concept

Frontend development has been trending towards component based architecture for quite a while. Think SMACSS, BEM, OOCSS, ACSS. Think semantic web.

The tooling for frontend development has come along way too. We now have abstractions on top of CSS such as Sass and Less, amongst many others.

Both of these advancements in frontend development aim to abstract the developer a level above what HTML and CSS provide. However they still keep the developers headspace much in the realm of HTML and CSS.

Eventually this will have to give. CSS preprocessors are effectively implementing their own programming languages to give stylesheets the programming power they now require. Complex programs require abstractions. The style of your application is no different as the rise of frontend architectures and preprocessors confirms.

rui is an experiment of sorts to take the developers headspace a level higher. By giving a developer the power of ruby whilst defining the styles of their application is to give frontend design the power it now requires. Using rui is to admit that there are more benefits to be had using an existing language rather than implementing a new one like SCSS. Using ruby to describe the style of your application provides your style definitions the same abstractions your backend logic already takes advantage of. Abstractions such as inheritance, mixins, variables are all available in modern languages so why reinvent them for CSS? Why not have this power today?

Well that's the theory anyway. Here's a short wishlist that could be achieved with something like rui:

• No longer worry about naming conventions for classes. Using rui will allow you to describe things, not HTML elements and class references to them. Your components will be mapped to HTML and CSS; your styles will only ever apply to the components you assign them to.
• Compile only the styles used in your components. Dead weight will automatically be detected and removed. Same goes for redundant classes, elements will only be given classes if they require them.
• No longer worry about the cascading nature of CSS, rui will handle this.
• HTML minification is a breeze if your CSS and HTML is handled by the same compiler. We can create minified versions of CSS and HTML for production. That's not just whitespace removal in your CSS but minification of class names that link your CSS and HTML together!

The Plan

rui is a nascent library. So far it provides very basic compilation of ruby style sheets into CSS. In bullet point form I will now describe the short term aims for rui.

• Media query support
• Pseudo selector support
• Rails asset pipeline railtie
• Component templating DSL
• Rails templating railtie for component DSL

The longer plan term will involve layers of abstraction above a ruby DSL atop of HTML and CSS. Plans also involve implementing some optimisations for deployment.

More Examples

The most up to date examples will be the specs. The style sheet compiler spec gives you an end-to-end look at what ruby style sheets look like and what they compile into.

You can also find my random ideas in the example/ directory of this repository. This is where I first document my ideas before implementing them TDD style.

Contributing

rui is a crazy experiment. If you have the time to help out I would very much appreciate anything you can do. Whether it's giving feedback or submitting pull requests, all help is welcome.

Just create an issue and start a conversation.

Author

Luke Morton. Find me on twitter.

License

This idea is MIT.