"Not trying to re-create or compete with Bootstrap. I just like to create and use my own tools."
--Simon, creator of SimpleSimonCSS
For HTML pages, you can download the css (feel free to modify), or copy/paste the CDN link below:
<link rel="stylesheet" href="https://unpkg.com/simplesimoncss" />
For Node projects (e.g. React, Vue, Angular):
npm install simplesimoncss
To import into a React component: import 'simplesimoncss/index.css'
To import into a Vue component: @import 'simplesimoncss/index.css'
Send Simon feedback/suggestions!
<div class='container-sm'>small (for mobile, tablet)</div>
<div class='container-md'>medium</div>
<div class='container-center'>large (centered)</div>
<div class='container'>large (not centered)</div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe explicabo architecto vel fuga sed repellat quidem rerum! Beatae provident a aliquid debitis. Harum a nobis adipisci incidunt nihil, impedit velit. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure illum deleniti nisi sed, consequatur, ratione rerum, explicabo cumque ab voluptatum voluptatem alias voluptates! Odit dolores nam quasi laboriosam incidunt debitis!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe explicabo architecto vel fuga sed repellat quidem rerum! Beatae provident a aliquid debitis. Harum a nobis adipisci incidunt nihil, impedit velit. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit nulla fugit quidem totam distinctio, ratione harum. Quam eaque sed reiciendis in delectus ratione, non, ad exercitationem nulla, corporis corrupti nisi!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe explicabo architecto vel fuga sed repellat quidem rerum! Beatae provident a aliquid debitis. Harum a nobis adipisci incidunt nihil, impedit velit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi amet, maiores nobis sit sunt sed ratione eos in dolore voluptatum iure odio ab architecto saepe consectetur aliquid distinctio repellendus veniam.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe explicabo architecto vel fuga sed repellat quidem rerum! Beatae provident a aliquid debitis. Harum a nobis adipisci incidunt nihil, impedit velit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi amet, maiores nobis sit sunt sed ratione eos in dolore voluptatum iure odio ab architecto saepe consectetur aliquid distinctio repellendus veniam.
<button class='btn-primary'>btn-primary</button>
<button class='btn-secondary'>btn-secondary</button>
<button class='btn-red'>btn-red</button>
No classes needed, as I have styled the <table>, <th>, and <td> tags.
| Head 1 | Head 2 | Head 3 |
|---|---|---|
| Footer 1 | Footer 2 | Footer 3 |
| Description 1 | Description 2 | Description 3 |
| Description 1 | Description 2 | Description 3 |
| Description 1 | Description 2 | Description 3 |
If you are including some code snippets, just wrap code with the <code> tag, and it will be styled like this:
function orwell() { console.log('War is peace!'); }
(HTML only) If you need help with some CSS debugging, try this: add a debug attribute to any element, and see what
happens!
Example: <div debug>hello world<div>
Note: I could not get this to work in React components. If you know how to get this feature to work in React projects, please send me a message.
A parent <div class='flex-container'> and 6 child divs will look like this:
You just need a parent <div class='super-center-parent'> with a child
<div class='super-center-child'>
The child div's content will be centered horizontally and vertically. I promise. (Don't put any markup between the parent and child div)
SimpleSimonCSS, created Feb 2021. License: MIT