Star ⭐️ this project on GitHub!

simpledev.css

simpledev.css is a mostly classless CSS framework.

Get Started

What is a mostly classless framework?

The classless part means that most of the CSS code should just work without you having to add classes or IDs to your HTML code. You can just add the CDN links and transform your HTML page. However, we do have a handful of CSS classes that we use for our components, so that's why we call it a mostly classless framework.

Inspiration

This project is inspired by Water.css, Pico, and Bootstrap. Pico is the closest framework to this project, but there are a few differences between simpledev.css and Pico. For example, all of the source code is written in plain CSS and there are more classes available.

Classes

Classless

All Classes

Here is a list of all the classes in simpledev.css:

All Classes

Accessibility

Navbar

Container

Buttons

Text

Code

Other

Footer

Accessibility

<a href="#main" class="skip-link">Skip to main content</a>

You can add a link right after the opening body tag with the class skip-link to add a skip to content link above your navbar. You can try it on this page by pressing the Tab key to access it.

<a href=""><i class="bi bi-facebook"></i><span class="visually-hidden">Facebook</span></a>

We also have a visually-hidden class you can use for text that should be read by screen readers but should not be seen on the page.


    <nav class="navbar">
      <div class="navbar-bar">
        <a href="" class="navbar-brand">Brand</a>
        <button type="button" class="navbar-menu">Menu</button>
      </div>
      <ul class="navbar-links">
        <li><a href="" class="active" aria-current="page">Home</a></li>
        <li><a href="">Pricing</a></li>
        <li><a href="">About</a></li>
        <li><a href="" class="button">Contact</a></li>
      </ul>
    </nav>
Test navbar message.

    <div class="navbar-message">Test navbar message.</div>
    <nav class="navbar">...</nav>

You can add a <div> with the navbar-message class above your <nav> element with the navbar class. All it does is add a background color and center the text, but you can customize it in your custom CSS file.


  <nav class="navbar-simple">
    <a href="">Brand</a>
    <a href="" class="active">Home</a>
    <a href="" class="button">About</a>
  </nav>

Use the navbar-simple class if you want a navbar that doesn't collapse on smaller screens. It doesn't require any JavaScript, but it can only hold 1 or 2 links. You can also use the active and button classes, just like the normal navbar component.

Container


    <div class="container">

    </div>

Use the container class with a <div> element to apply a max width and center the contents.

Visit the Recipes page to learn how to customize the container width.

Section

Brand Name

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

Learn More 

  <div class="section text-center">
  <h1>Brand Name</h1>
  <p class="lead">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
  <a href="" class="button large">Learn More</a>
</div>

Use the section class on a <div> element to create a section with extra padding on the top or bottom. Use the class lead to make regular text bigger. Use the class large to make a button component look bigger.

Background

Test Heading

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magni, aliquid. Sapiente, explicabo eveniet quae sequi maxime consequuntur iusto autem aut cupiditate iure at quod delectus animi ipsa enim ut nisi?


  <div class="background section">
  <div class="container">
    <h3>Test Heading</h3>
    <p class="lead">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magni, aliquid. Sapiente, explicabo eveniet quae sequi maxime consequuntur iusto autem aut cupiditate iure at quod delectus animi ipsa enim ut nisi?</p>
  </div>
</div>

If you want a background color that spans the whole width of the page, wrap your container in another <div> with the background class. If you only want the background to be on a certain section of the page, you will need to use multiple container divs on your page.

Buttons

Anchor Anchor
Large 

    <a href="" class="button">Anchor</a>
    <a href="" class="button-outline">Anchor</a>
    <button type="button">Button</button>
    <button type="button" disabled>Button</button>
    <button type="button" class="button-outline">Button</button>
    <button type="button" class="button-outline" disabled>Button</button>
    <button type="button" class="link">Button</button>
    <button type="button" class="link" disabled>Button</button>

You can use the button class on an <a> element to make it look like a button. Use the class button-outline to create a link or button with an outline style. Use the link class to make a <button> element look like a link.

Visit the Recipes page to learn how to make your buttons rounded or pill-shaped.

Floating Button

Top 
<a href="#" class="button floating">Float</a>

You can add the floating class to a button or link with the button class to create a floating button in the lower right hand corner. You can see an example of our floating button in the lower right-hand corner. It can be applied to an <a> element or a <button> element.

Text Align

Test heading

Test Link

Test heading

Test Link

Test heading

Test Link 

    <div class="text-start">
      <h3>Test heading</h3>
      <a href="" class="button">Test Link</a>
    </div>

    <div class="text-center">
      <h3>Test heading</h3>
      <a href="" class="button">Test Link</a>
    </div>

    <div class="text-end">
      <h3>Test heading</h3>
      <a href="" class="button">Test Link</a>
    </div>

You can wrap an anchor element, button or heading in a <div> and use the text-center class to center it (you can also apply it directly to a heading element). You can also use the text-end class to move it to the end.

Text Utilities

This is uppercase.

This is lowercase.

This is capitalized.

This has no text transform.

This is italic.

This is not italic.

This is bold.

This is not bold. 

    <p class="uppercase">This is uppercase.</p>
    <p class="lowercase">This is lowercase.</p>
    <p class="capitalize">This is capitalized.</p>
    <p class="nocase">This has no text transform.</p>
    <p class="italic">This is italic.</p>
    <em class="not-italic">This is not italic.</em>
    <p class="bold">This is bold.</p>
    <b class="not-bold">This is not bold.</b>

You can use the uppercase, lowercase, capitalize, nocase, italic, not-italic, bold and not-bold classes to change how a section of text looks.

Blockquote

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Asperiores iusto optio blanditiis. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut dolorem aut, ab reprehenderit quas iste sed id asperiores, repudiandae, quibusdam obcaecati recusandae ratione aspernatur velit? Exercitationem in ratione eos harum!

Someone famous in Source Title


      <div class="blockquote">
        <blockquote>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Asperiores iusto optio blanditiis. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut dolorem aut, ab reprehenderit quas iste sed id asperiores, repudiandae, quibusdam obcaecati recusandae ratione aspernatur velit? Exercitationem in ratione eos harum!</p>
        </blockquote>
        <p>Someone famous in <cite title="Source Title">Source Title</cite></p>
      </div>

Code

p {
  color: red;
}
echo "hello world"
echo "hello world"
echo "hello world"
echo "hello world"
echo "hello world"

    <pre class="code"><code>p {
      color: red;
    }</code></pre>
    <pre class="code"><code>echo "hello world"</code></pre>
    <pre class="code bash"><code>echo "hello world"</code></pre>
    <pre class="code zsh"><code>echo "hello world"</code></pre>
    <pre class="code bash dark"><code>echo "hello world"</code></pre>
    <pre class="code zsh dark"><code>echo "hello world"</code></pre>

Use the code class to create a code snippet. You can also add the classes bash and zsh to add a dollar sign or percent symbol to the beginning of the snippet. If you're going to have a lot of code snippets, I recommend using Prism or a similar library.

Grid

Box1
Box2
Box3
Box4
Box5
    
      <div class="grid">
        <div>Box1</div>
        <div>Box2</div>
        <div>Box3</div>
        <div>Box4</div>
        <div>Box5</div>
      </div>

A simple responsive layout using CSS grid with auto layout columns. Use the grid class to create a row of evenly sized columns. You can technically put as many divs as you want inside it, but we recommend only 4 or 5 maximum. The row collapses into a single column at a certain breakpoint.

Bottom Banner


    <div class="bottom-banner">
      <p>Lorem ipsum dolor.</p>
    </div>

You can use the bottom-banner class with a <div> to create a sticky bottom banner. You will need to write your own JS if you want to dismiss it. (This component isn't visible on this page since it would interfere with our floating button demo, but you can see it on our demo page.)


    <footer class="footer">
      <ul class="footer-links">
        <li><a href="">Facebook </a></li>
        <li><a href="">Twitter</a></li>
        <li><a href="">Instagram</a></li>
        <li><a href="">LinkedIn</a></li>
        <li><a href="">YouTube</a></li>
      </ul>
      <small>© 2024 Business Name.</small>
    </footer>

    <footer class="footer">
      <ul class="footer-links">
        <li><a href=""><i aria-hidden="true" class="bi bi-facebook"></i><span class="visually-hidden">Facebook</span></a></li>
        <li><a href=""><i aria-hidden="true" class="bi bi-twitter-x"></i><span class="visually-hidden">X</span></a></li>
        <li><a href=""><i aria-hidden="true" class="bi bi-instagram"></i><span class="visually-hidden">Instagram</span></a></li>
        <li><a href=""><i aria-hidden="true" class="bi bi-linkedin"></i><span class="visually-hidden">LinkedIn</span></a></li>
        <li><a href=""><i aria-hidden="true" class="bi bi-youtube"></i><span class="visually-hidden">YouTube</span></a></li>
      </ul>
      <small>© 2024 Business Name.</small>
    </footer>

You can add a footer to your site using a <footer> element with the footer class. We use a footer class since the <footer> element can be used in different contexts. All it does is add some padding and center the text. You can also add an unordered list with a list of links and use the class footer-links to turn it into a row of links. The footer-links class should also work with SVG icons or icon fonts like Bootstrap Icons.

Images

You can use images without a class. We apply a max width of 100% to the <img> element so the image stays inside the container. (Photo by Joshua Aragon on Unsplash.)

Inline Text Elements

Use the mark tag to highlight text.

Use the code tag for inline code.

Use the kbd tag for keyboard shortcuts, like Ctrl + ,.

Use the small tag for text is meant to be treated as fine print.

Use the del tag for deleted text.

Use the s tag for text that is no longer accurate.

Use the ins tag for text that is meant to be treated as an addition to the document.

Th u tag will render as underlined.

The strong tag is rendered as bold text.

The b tag is rendered as bold text.

This em tag is rendered as italicized text.

This i tag is rendered as italicized text.

Use the sub tag for subscripts, like this: C8H10N4O2.

Use the sup tag for superscripts, like this: 5th.

Use the var tag for variables, like this: y = mx + b.

Details and Summary

You can use the <details> and <summary> elements without a class.

Summary text

Details text

Summary text

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatum nisi, aliquid deleniti delectus neque, rem iusto distinctio soluta saepe consequuntur aperiam praesentium voluptatem, illo optio quisquam iste culpa placeat a.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, ut. Consequatur doloribus officia eum provident veniam, aut voluptas cupiditate possimus neque totam quod atque accusantium ipsum distinctio. Magni, voluptas temporibus?

Forms

You can use form elements without classes. We set the display property to block for the inputs so each one takes up its own line.


50%

Tables

You can use tables without a class. Visit the Recipes page to learn how to add stripes to your tables.

Caption text
Header 1 Header 2
Cell 1 Cell 2

Other Elements

Here are some examples of nested lists, an <hr> element, and all of the heading elements.

  1. Item
  2. Item
    1. Subitem
  3. Item

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6