--- title: "Classless CSS frameworks" author: "Yaroslav Shmarov" date: "2022-05-03" canonical_url: "https://blog.superails.com/classless-css-frameworks" markdown_url: "https://blog.superails.com/classless-css-frameworks.md" description: "When building a small website or rails app, sometimes adding a CSS framework and styling your pages can be a time-consuming overkill." tags: ["rails","html","css"] license: "GNU AGPL v3. Credit Yaroslav Shmarov and link the canonical URL." video_url: "https://www.youtube.com/watch?v=dqwg0sdQHZ4" --- # Classless CSS frameworks When building a small website or rails app, sometimes adding a CSS framework and styling your pages can be a time-consuming overkill. Luckily there exist **Classless CSS frameworks** like [SimpleCSS](https://simplecss.org/) or [MVP.CSS](https://andybrewer.github.io/mvp/). A classless CSS frameworks directly styles HTML attributes. ```html ``` So if you write **semantic HTML**, when adding a classless CSS framework, the styling will be applied automatically! Just include the CDN in your layout: ```diff # app/views/layouts/application.html.erb ... + ``` Here's how your app can look **Without** VS **With** an included Classless CSS framework: ![semantic html with a classless css framework](https://blog.superails.com/assets/images/classless-css-semantic-html.png) Also, if you read the actual [CSS file that you import](https://cdn.simplecss.org/simple.css), you can learn some great practices to writing CSS. Thinking further, you can potentially swap classless CSS frameworks in your app like **themes**!... There's also [a great discussion about classless css frameworks on ycombinator news](https://news.ycombinator.com/item?id=29929438)