absurd icon indicating copy to clipboard operation
absurd copied to clipboard

Idea: an alternative form for html and css using mostly arrays

Open RayoGundead opened this issue 10 years ago • 2 comments

Well, it looks more like multilevel CSV than JSON... This is just something that I think could work with absurd when it comes to CSS rule properties with fallback cascades within rules.

CSS:

[[".media", ".testing_class"],
    "display", "block",
    ["&__figure",
      "float", "left",
      "height", "auto"],
    ["&__body",
      "float", "left"]]
  • Selector/ Selectors list as index 0 in array
  • Sub array for nesting rules

HTML:

['article.media[class="media"]', {"class": "media"},
  ["img.media__figure", {"src": "http://example.com/sample.png"}],
  [".media__body", 
    ["p", "Sample Paragraph Text"]]]
  • JSONML
    • Object type index 1 for attributes
    • String, Array, Integer, or Boolean type Index 1+ for sub elements/values
  • Single value array for self closing element
  • For me its the closest JSON form to html markup

RayoGundead avatar Jul 06 '14 14:07 RayoGundead

As far as CSS that is pretty much DadaJS, a framework built on top of AbsurdJS.

You can do things like this

[['h1','h2','h3'].join(','), {
     textAlign    : center,
     overflow     : hidden,
 },
 [['&.next-page', { 'float' : left} ]],
 [['&.prev-page', { 'float' : right} ]]
]

There is also the ability to do dada.select.allWith('h1','h2','h3'), but I usually just use join because it is shorter.

I'm not sure how Dada would transform into HTML because I don't use Absurd much for templating.

stockholmux avatar Jul 06 '14 15:07 stockholmux

@RayoGundead looks interesting. I'm a little bit reserved about implementing such changes in the core of AbsurdJS. I still think that it is good to keep it as simple as possible. To achieve your goals and start supporting such syntax you just need to write a small preprocessor of that input. A function that accepts something and outputs JSON that works with the current version.

Let me know your thoughts.

krasimir avatar Jul 06 '14 16:07 krasimir