Simplify

The Simplify CSS Framework

Why simplify?

Simplify is a CSS framework that champions simplicity and minimalism above all else. In a world where complexity can often lead to confusion, we believe in the beauty of simplicity. simplify provides a clean and straightforward foundation for your web projects, allowing you to focus on your content and design without unnecessary bloat. With its lightweight and intuitive structure, simplify is the ideal choice for those who value clean and elegant web development. simplify has an incredibly small size at just 5KB. This emphasis on compactness ensures fast load times and efficient performance, making simplify the optimal solution for modern web projects.


Get started

Download v1.1

Simplify

Docs

Starter template

                        
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>simplify</title>
    <link rel="stylesheet" href="simplify-1.1.min.css">
</head> 
<body class="light center preload"> 
    <nav class="navbar"> 
        <div class="navl"> 
         <h1>simplify</h1>
        </div>
        <div class="navr">
         <ul>
          <a href="index.html"> 
           <li>Home</li>
          </a> 
          <a href="about.html">
           <li>About</li>
          </a>
         </ul> 
        </div> 
    </nav> 
<main class="mvp-80 center">
</br>
    <div class="container">
      <div class="col col-xlx">
        <h2>My First container</h2>
      </div> 
    </div>
</main> 
</body>
<script src="simplify-1.1.min.js"></script>   
</html>

Theme

Dark

                        
<body class="dark">
                            
</body>

Light

                        
<body class="light">
                            
</body>

Toggle

                        
<body class="light">
 <button class="btn-md btb" onclick="toggleTheme()">Toggle</button>                   
</body>

Simplify JS

 
var htmlElement = document.querySelector('html');
//Your dark toggle icon id 
var darkIcon = document.getElementById("dark"); 
//Your light toggle icon id 
var lightIcon = document.getElementById("light"); 

if(darkIcon != undefined  && lightIcon != undefined){

window.onload = toggleTheme('onload');
function toggleTheme(type) {
    const body = document.getElementsByTagName("body")[0];
    if (type == 'onload') {
        if (localStorage.getItem("theme")) {
            const savedTheme = localStorage.getItem("theme");
            if (savedTheme == "light") {
                theme('light');
            } else if (savedTheme == "dark") {
                theme('dark');
            }
        } else {
            if (body.classList.contains("dark")) {
                theme('dark');
            } else if (body.classList.contains("light")) {
                theme('light');
            } 
        }
    } else {
        if (body.classList.contains("dark")) {
            theme('light');
        } else if (body.classList.contains("light")) {
            theme('dark');
        } else {
            body.classList.remove("dark", "light");
            theme('light');
        }
    }

}
}

function theme(type) {
    const body = document.getElementsByTagName("body")[0];
    htmlElement.setAttribute('style', 'color-scheme: '+type+';');
    
    if(type == 'dark'){
        darkIcon.style.display = "none";
        body.classList.remove("light");
        lightIcon.style.display = "block";
    }else{
        lightIcon.style.display = "none";
        body.classList.remove("dark");
       darkIcon.style.display = "block";
    }
    body.classList.add(type);
    localStorage.setItem("theme", type);
}

window.addEventListener('load', function () {
    document.body.classList.remove('preload');
});

Buttons

Small Button



                            
<h3>Small Button</h3>
<button class="btn-sm btr">Red</button>
<button class="btn-sm btg">Green</button>
<button class="btn-sm btb">Blue</button>
<br>
<button class="btn-sm btor">Red</button>
<button class="btn-sm btog">Green</button>
<button class="btn-sm btob">Blue</button>

Medium Button



                            
<h3>Medium Button</h3>
<button class="btn-md btr">Red</button>
<button class="btn-md btg">Green</button>
<button class="btn-md btb">Blue</button>
<br>
<button class="btn-md btor">Red</button>
<button class="btn-md btog">Green</button>
<button class="btn-md btob">Blue</button>

Large Button






                            
<h3>Large Button</h3>
<button class="btn-lg btr">Red</button>
<button class="btn-lg btg">Green</button>
<button class="btn-lg btb">Blue</button>
<br>
<button class="btn-lg btor">Red</button>
<button class="btn-lg btog">Green</button>
<button class="btn-lg btob">Blue</button>

Inputs

Small

            
<input class="fit" type="text" placeholder="Text">

Medium

            
<input class="fit inp-md" type="text" placeholder="Text">

Large

            
<input class="fit inp-lg" type="text" placeholder="Text">

Textarea

        
<textarea style="resize:none;" class="fit" rows="10" placeholder="Plaintext..."></textarea>

Containers and columns


Table

Firstname Lastname Age
Adam Smith 21
Luis Anderson 25
Henry Milleston 30
Jack Reacher 40 

<table class="center">
 <tbody>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Adam</td>
    <td>Smith</td>
    <td>21</td>
  </tr>
 </tbody>
</table>

To be continued...