CSS Framework for the lazy.
CSS HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitattributes
.gitignore
README.md
brokenCSS.css
brokenMOD.css
brokenMODplus.css
test.html

README.md

BrokenCSS

A CSS framework for the lazy. The aim is not customizability, but ease of building responsive apps.

Why is it called BrokenCSS?

It's called BrokenCSS because it's invalid/broken according to all the HTML validators out there. Believe it or not, this is by design. I wanted to break all the validator rules, yeah r/madlads!

Why should I use this?

You might not want to use this in production code or if you want to support old browsers. This CSS framework is filled with custom tags that are not defined in the HTML draft. The reason for the existence of those custom tags is to make the DOM content shorter and neater.

Few Example Replacements

Normal Table

<table>
  <tr>
    <th>Row One</th>
    <th>Row Two</th>
    <th>Row Three</th>
  </tr>
  <tr>
    <td>Item 01</td>
    <td>Item 02</td>
    <td>Item 03</td>
  </tr>
  <tr>
    <td>Item 11</td>
    <td>Item 12</td>
    <td>Item 13</td>
  </tr>
  <tr>
    <td>Item 21</td>
    <td>Item 22</td>
    <td>Item 23</td>
  </tr>
</table>

Broken Table

<datagrid striped interactive>
  <item>
    <title>Row One</title>
    <title>Row Two</title>
    <title>Row Three</title>
  </item>
  <item>
    <value>Item 01</value>
    <value>Item 02</value>
    <value>Item 03</value>
  </item>
  <item>
    <value>Item 11</value>
    <value>Item 12</value>
    <value>Item 13</value>
  </item>
  <item>
    <value>Item 21</value>
    <value>Item 22</value>
    <value>Item 23</value>
  </item>
</datagrid>