simplesimoncss
Version:
some layouts and some css to get you started, for those who don't want thousands of lines of css code
243 lines (210 loc) • 11.4 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./index.css" />
<title>Demo - simplesimoncss</title>
</head>
<body>
<div class="container-center">
<h1 class="title">SimpleSimonCSS</h1>
<blockquote>"Not trying to re-create or compete with Bootstrap. I just like to create and use my own tools."</blockquote>
<p style="margin-bottom: 5em">--Simon, creator of SimpleSimonCSS</p>
</div>
<div class="container">
<h1 class="subtitle">Installation</h1>
<p>
For HTML pages, you can <a href="https://unpkg.com/simplesimoncss">download the css</a> (feel free to modify), or copy/paste the CDN
link below:
</p>
<p>
<code><link rel="stylesheet" href="https://unpkg.com/simplesimoncss" /></code>
</p>
<p>For Node projects (e.g. React, Vue, Angular):</p>
<p><code>npm install simplesimoncss</code></p>
<p>To import into a React component: <code>import 'simplesimoncss/index.css'</code></p>
<p>To import into a Vue component: <code>@import 'simplesimoncss/index.css'</code></p>
<h3>More Info</h3>
<li><a href="https://github.com/simonhlee97/simplesimoncss">Repo</a></li>
<li><a href="https://www.npmjs.com/package/simplesimoncss">NPM Page</a></li>
<li><a href="https://unpkg.com/browse/simplesimoncss@0.2.5/" target="_blank">Unpkg Page</a></li>
<p>Send <a href="mailto:simonhlee97@hotmail.com">Simon</a> feedback/suggestions!</p>
</div>
<hr />
<div class="container">
<h1 class="subtitle">Containers</h1>
<h3>Code examples</h3>
<p><code><div class='container-sm'>small (for mobile, tablet)</div></code></p>
<p><code><div class='container-md'>medium</div></code></p>
<p><code><div class='container-center'>large (centered)</div></code></p>
<p><code><div class='container'>large (not centered)</div></code></p>
</div>
<div class="container-sm bg-color">
<h3>"container-sm" example (with bg-color added)</h3>
<p>
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!
</p>
</div>
<div class="container-md bg-color">
<h3>"container-md" example (with bg-color added)</h3>
<p>
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!
</p>
</div>
<div class="container-center bg-color">
<h3>"container-center" example (with bg-color added)</h3>
<p>
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.
</p>
</div>
<div class="container bg-color">
<h3>"container" example (with bg-color added)</h3>
<p>
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.
</p>
</div>
<hr />
<div class="container">
<h1 class="subtitle">Headers</h1>
<h1>H1 Header</h1>
<h2>H2 Header</h2>
<h3>H3 Header</h3>
<h4>H4 Header</h4>
<h5>H5 Header</h5>
<h6>H6 Header</h6>
</div>
<hr />
<div class="container">
<h1 class="subtitle">Buttons</h1>
<p><code><button class='btn-primary'>btn-primary</button></code></p>
<p><button class="btn-primary">btn-primary</button></p>
<br />
<p><code><button class='btn-secondary'>btn-secondary</button></code></p>
<p><button class="btn-secondary">btn-secondary</button></p>
<br />
<p><code><button class='btn-red'>btn-red</button></code></p>
<p><button class="btn-red">btn-red</button></p>
</div>
<hr />
<div class="container">
<h1 class="subtitle">Tables</h1>
<p>No classes needed, as I have styled the <code><table></code>, <code><th></code>, and <code><td></code> tags.</p>
<table>
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Footer 1</th>
<th>Footer 2</th>
<th>Footer 3</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Description 1</td>
<td>Description 2</td>
<td>Description 3</td>
</tr>
<tr>
<td>Description 1</td>
<td>Description 2</td>
<td>Description 3</td>
</tr>
<tr>
<td>Description 1</td>
<td>Description 2</td>
<td>Description 3</td>
</tr>
</tbody>
</table>
</div>
<hr />
<div class="container">
<h1 class="subtitle">Code</h1>
<p>If you are including some code snippets, just wrap code with the <code> tag, and it will be styled like this:</p>
<code>function orwell() { console.log('War is peace!'); }</code>
</div>
<hr />
<div class="container">
<h1 class="subtitle">Debug</h1>
<p>
(HTML only) If you need help with some CSS debugging, try this: add a <code>debug</code> attribute to any element, and see what
happens!
</p>
<p>
Example: <code><div <strong>debug</strong>>hello world<div></code>
</p>
<p>
Note:
<em
>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.</em
>
</p>
</div>
<hr />
<div class="container">
<h1 class="subtitle">Flexbox</h1>
<p>A parent <code><div class='flex-container'></code> and 6 child divs will look like this:</p>
<div class="flex-container" style="margin-bottom: 4em">
<div class="flex-item">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, esse architecto ipsa voluptate modi laboriosam rem nihil suscipit
commodi voluptatibus minima, cum autem deserunt, temporibus repudiandae repellendus optio illo ipsam.
</div>
<div class="flex-item">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, esse architecto ipsa voluptate modi laboriosam rem nihil suscipit
commodi voluptatibus minima, cum autem deserunt, temporibus repudiandae repellendus optio illo ipsam.
</div>
<div class="flex-item">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, esse architecto ipsa voluptate modi laboriosam rem nihil suscipit
commodi voluptatibus minima, cum autem deserunt, temporibus repudiandae repellendus optio illo ipsam.
</div>
<div class="flex-item">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, esse architecto ipsa voluptate modi laboriosam rem nihil suscipit
commodi voluptatibus minima, cum autem deserunt, temporibus repudiandae repellendus optio illo ipsam.
</div>
<div class="flex-item">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, esse architecto ipsa voluptate modi laboriosam rem nihil suscipit
commodi voluptatibus minima, cum autem deserunt, temporibus repudiandae repellendus optio illo ipsam.
</div>
<div class="flex-item">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, esse architecto ipsa voluptate modi laboriosam rem nihil suscipit
commodi voluptatibus minima, cum autem deserunt, temporibus repudiandae repellendus optio illo ipsam.
</div>
</div>
</div>
<div class="super-center-parent">
<div class="super-center-child" style="background-color: rgb(149, 149, 223)">
<h1 class="subtitle">Super-Centered</h1>
<p>
You just need a parent <code><div class='super-center-parent'></code> with a child
<code><div class='super-center-child'></code>
</p>
<p>
The child div's content will be centered horizontally and vertically. I promise. (Don't put any markup between the parent and
child div)
</p>
<p><small>SimpleSimonCSS, created Feb 2021. License: MIT</small></p>
</div>
</div>
</body>
</html>