Posted in css framework
10317
11:56 am, January 17, 2022

simple.css a nice simple and stylish framework replacement

What is simple.css?

Simple CSS is a framework that you can just drop into your site, and it styles the actual html elements, so no class names are required for this out of the box, just add the script and off it goes. It comes with dark mode built in as well so you dont have to worry about that, just uses the system preferred. 

Also its super light weight as well, not some 150kb like bootstrap its more like 5-10kb so your site will be loading in a flash!

Preview


a preview of simple css

What can i use this for?

Simple css can be used for simple sites that you dont want to spent hours adding classes and formatting things, its a nice easy solution to just drop into a site and make it look nice. 

Installation

UNPKG.com (CDN for npm)

Simple.css is also published to npm. Both minified and un-minified versions of the CSS are available NPM’s CDN, unpkg.

So all you need to do in order to use Simple.css in your project, is add the following line of code to the <head> section of your HTML:

<!-- Minified version -->
<link rel="stylesheet" href="https://unpkg.com/simpledotcss/simple.min.css">

<!-- Un-minified version -->
<link rel="stylesheet" href="https://unpkg.com/simpledotcss/simple.css">

Conclusion

Simple CSS is really nice and light weight and can help you get a simple site up and running with minimal effort. 

Original Source

You can check out the simple css main site here for more demos and information about simple css. 

simple.css a nice simple and stylish framework replacement Demo

View Demo Full Screen View Demo New Tab

simple.css a nice simple and stylish framework replacement Code

HTML

<main>

      <p>This page is a demonstration of the elements that can be formatted using Simple.css. Each section includes a code block on how to include it in your site’s design.</p>

<p>This may be a little basic for some people, but I wanted the barrier for entry to be as low as possible for this project.</p>

<h2 id="basic-typography">Basic Typography</h2>

<p>All the typography of Simple.css uses <code class="language-plaintext highlighter-rouge">rem</code> for sizing. This means that accessibility is maintained for those who change their browser font size. The <code class="language-plaintext highlighter-rouge">body</code> element has a size of <code class="language-plaintext highlighter-rouge">1.15rem</code>  which makes all the standard font sizes slightly larger. This equates to <code class="language-plaintext highlighter-rouge">18.4px</code> for paragraph text, instead of the standard <code class="language-plaintext highlighter-rouge">16px</code>.</p>

<p>The heading elements also have an increased top margin in order to break blocks of text up better.</p>

<h1 id="heading-1-28rem">Heading 1 <code class="language-plaintext highlighter-rouge">2.8rem</code></h1>

<h2 id="heading-2-225rem">Heading 2 <code class="language-plaintext highlighter-rouge">2.25rem</code></h2>

<h3 id="heading-3-18rem">Heading 3 <code class="language-plaintext highlighter-rouge">1.8rem</code></h3>

<h4 id="heading-4-144rem">Heading 4 <code class="language-plaintext highlighter-rouge">1.44rem</code></h4>

<h5 id="heading-5-115rem">Heading 5 <code class="language-plaintext highlighter-rouge">1.15rem</code></h5>

<h6 id="heading-6-92rem">Heading 6 <code class="language-plaintext highlighter-rouge">.92rem</code></h6>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;h2&gt;This is a H2 header&lt;h2&gt;

&lt;p&gt;This is some paragraph text.&lt;/p&gt;
</code></pre></div></div>

<h3 id="links--buttons">Links &amp; Buttons</h3>

<p>Links are formatted very simply on Simple.css (shock horror). They use the <code class="language-plaintext highlighter-rouge">accent</code> CSS variable and are underlined. There is a <code class="language-plaintext highlighter-rouge">:hover</code> effect that removes the underline. Here is an <a href="">example link</a>.</p>

<p>Buttons use the same <code class="language-plaintext highlighter-rouge">accent</code> CSS variable for their colour. When hovering, there is an opacity effect.</p>

<p><button>I’m a button</button></p>

<p><button onclick="window.location.href='https://example.com';">I’m a button with a link</button></p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;a href="https://example.com"&gt;This is a hyperlink&lt;/a&gt;

&lt;button&gt;I'm a button&lt;/button&gt;

&lt;button onclick="window.location.href='https://example.com';"&gt;I'm a button with a link&lt;/button&gt;
</code></pre></div></div>

<h2 id="other-typography-elements">Other typography elements</h2>

<p>There are a number of other typography elements that you can use with Simple.css. Some of the common ones are:</p>

<ul>
  <li>All the standard stuff, like <strong>bold</strong>, <em>italic</em> and <u>underlined</u> text.</li>
  <li><mark>Highlighting text</mark> using the <code class="language-plaintext highlighter-rouge">mark</code> element.</li>
  <li>Adding <code class="language-plaintext highlighter-rouge">inline code</code> using the <code class="language-plaintext highlighter-rouge">code</code> element.</li>
  <li>Displaying keyboard commands like <kbd>ALT+F4</kbd> using the <code class="language-plaintext highlighter-rouge">kbd</code> element.</li>
</ul>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;b&gt;Bold text&lt;/b&gt;
&lt;i&gt;Italic text&lt;/i&gt;
&lt;u&gt;Underlined text&lt;/u&gt;
&lt;mark&gt;Highlighted text&lt;/mark&gt;
&lt;code&gt;Inline code&lt;/code&gt;
&lt;kbd&gt;Alt+F4&lt;/kbd&gt;
</code></pre></div></div>

<h3 id="lists">Lists</h3>

<p>We all love a good list, right? I know my wife does!</p>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<ol>
  <li>Do this thing</li>
  <li>Do that thing</li>
  <li>Do the other thing</li>
</ol>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code># Bulleted list
&lt;ul&gt;
  &lt;li&gt;Item 1&lt;/li&gt;
  &lt;li&gt;Item 2&lt;/li&gt;
  &lt;li&gt;Item 3&lt;/li&gt;
&lt;/ul&gt;

# Numbered list
&lt;ol&gt;
  &lt;li&gt;Do this thing&lt;/li&gt;
  &lt;li&gt;Do that thing&lt;/li&gt;
  &lt;li&gt;Do the other thing&lt;/li&gt;
&lt;/ol&gt;
</code></pre></div></div>
<h3 id="blockquotes">Blockquotes</h3>

<p>Sometimes you may want to quote someone else in your HTML. For this we use the <code class="language-plaintext highlighter-rouge">blockquote</code> element. Here’s what a quote looks like with Simple.css:</p>

<blockquote>
  <p>Friends don’t spy; true friendship is about privacy, too.</p>

  <p><cite>– Stephen King</cite></p>
</blockquote>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;blockquote&gt;
  &lt;p&gt;Friends don’t spy; true friendship is about privacy, too.&lt;/p&gt;
  &lt;p&gt;&lt;cite&gt;– Stephen King&lt;/cite&gt;&lt;/p&gt;
&lt;/blockquote&gt;
</code></pre></div></div>

<h3 id="code-blocks">Code blocks</h3>

<p>Code blocks are different from the inline <code class="language-plaintext highlighter-rouge">code</code> element. Code blocks are used when you want to display a block of code, like this:</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>body {
  color: var(--text);
  background: var(--bg);
  font-size: 1.15rem;
  line-height: 1.5;
  margin: 0;
}
</code></pre></div></div>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;pre&gt;
&lt;code&gt;
  body {
    color: var(--text);
    background: var(--bg);
    font-size: 1.15rem;
    line-height: 1.5;
    margin: 0;
  }
&lt;/code&gt;
&lt;/pre&gt;
</code></pre></div></div>
<h2 id="navigation">Navigation</h2>

<p>The <code class="language-plaintext highlighter-rouge">nav</code> menu is deliberately designed to be extremely simple so that you can improve on it as you see fit. Or, just leave it as is to have a good looking, functional navigation menu.</p>

<p>There’s no JavaScript or checkbox CSS hacks here. It’s just a collection of simple “buttons” that wrap to the given width of the page:</p>

<nav>
  <a href="">Home</a>
  <a href="">About</a>
  <a href="">Blog</a>
  <a href="">Notes</a>
  <a href="">Guestbook</a>
  <a href="">Contact</a>
  <a href="">Link 1</a>
  <a href="">Link 2</a>
  <a href="">Link 3</a>
</nav>

<p>To add a <code class="language-plaintext highlighter-rouge">nav</code> menu, just add the following to the <code class="language-plaintext highlighter-rouge">&lt;header&gt;</code> section of your site:</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;nav&gt;
  &lt;a href="/"&gt;Home&lt;/a&gt;
  &lt;a href="/about"&gt;About&lt;/a&gt;
  &lt;a href="/blog"&gt;Blog&lt;/a&gt;
  &lt;a href="/notes"&gt;Notes&lt;/a&gt;
  &lt;a href="/guestbook"&gt;Guestbook&lt;/a&gt;
  &lt;a href="/contact"&gt;Contact&lt;/a&gt;
&lt;/nav&gt;
</code></pre></div></div>

<h2 id="images">Images</h2>

<p>In Simple.css, images within the <code class="language-plaintext highlighter-rouge">main</code> element are always full width and have rounded edges to them. The <code class="language-plaintext highlighter-rouge">figcaption</code> element is also formatted in Simple.css. Here are examples of images with and without a caption:</p>

<p><img src="/assets/images/dog-ipad.jpg" alt="A dog at an iPad"></p>

<figure>
  <img alt="This is a black swan" src="/assets/images/goose.jpg">
  <figcaption>This is a black swan</figcaption>
</figure>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code># Standard image
&lt;img alt="A dog on an iPad" src="/assets/images/dog-ipad.jpg" /&gt;

# Image with a caption
&lt;figure&gt;
  &lt;img alt="This is a black swan" src="/assets/images/goose.jpg" /&gt;
  &lt;figcaption&gt;This is a black swan&lt;/figcaption&gt;
&lt;/figure&gt;
</code></pre></div></div>

<h2 id="accordions">Accordions</h2>

<p>Accordions are cool to play with. They’re especially useful when it comes to things like FAQ pages. Many people invoke JavaScript, or <code class="language-plaintext highlighter-rouge">div</code> for life when they use accordions. I don’t really understand why that is when it’s available in plain old HTML:</p>

<details>
  <summary>Spoiler alert!</summary>
  <p>You smell. 🙂</p>
</details>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;details&gt;
  &lt;summary&gt;Spoiler alert!&lt;/summary&gt;
  &lt;p&gt;You smell. 🙂&lt;/p&gt;
&lt;/details&gt;
</code></pre></div></div>

<h2 id="tables">Tables</h2>

<p>Like lists, sometimes you may need to add a table to your webpage. In Simple.css tables automatically highlight every other row to make reading easier. Table header text is also bold. Here’s what they look like:</p>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Number</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jackie</td>
      <td>012345</td>
    </tr>
    <tr>
      <td>Lucy</td>
      <td>112346</td>
    </tr>
    <tr>
      <td>David</td>
      <td>493029</td>
    </tr>
    <tr>
      <td>Kerry</td>
      <td>395499</td>
    </tr>
    <tr>
      <td>Steve</td>
      <td>002458</td>
    </tr>
  </tbody>
</table>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;table&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;Name&lt;/th&gt;
      &lt;th&gt;Number&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;Jackie&lt;/td&gt;
      &lt;td&gt;012345&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Lucy&lt;/td&gt;
      &lt;td&gt;112346&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;David&lt;/td&gt;
      &lt;td&gt;493029&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Kerry&lt;/td&gt;
      &lt;td&gt;395499&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Steve&lt;/td&gt;
      &lt;td&gt;002458&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;
</code></pre></div></div>

<h2 id="forms">Forms</h2>

<p>Forms are useful for all kinds of things on webpages. Contact forms, newsletter sign ups etc. Forms also look pretty good on Simple.css:</p>

<form>
  <p><strong>This is just a test form. It doesn't do anything.</strong></p>
  <p>
  <select>
		<option selected="selected" value="1">Title</option>
		<option value="2">Mr</option>
    <option value="3">Miss</option>
    <option value="4">Mrs</option>
    <option value="5">Other</option>
	</select>
  </p>
  <p>
  <label>First name</label><br>
  <input type="text" name="first_name">
  </p>
  <p>
  <label>Surname</label><br>
  <input type="text" name="surname">
  </p>
  <p>
  <label>Email</label><br>
  <input type="email" name="email" required="">
  </p>
  <p>
  <label>Enquiry type:</label><br>
  <label><input checked="checked" name="type" type="radio" value="sales"> Sales</label> <br>
  <label><input name="type" type="radio" value="support"> Support</label> <br>
  <label><input name="type" type="radio" value="billing"> Billing</label>
  </p>
  <p>
  <label>Message</label><br>
  <textarea rows="6"></textarea>
  </p>
  <p>
  <label for="cars">Choose a car:</label><br>
<select name="cars" id="cars" multiple="">
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="opel">Opel</option>
 <option value="audi">Audi</option>
</select>
  </p>
  <p>
  <label>
  <input type="checkbox" id="checkbox" value="terms">
  I agree to the <a href="#">terms and conditions</a>
  </label>
  </p>

  <button>Send</button>
  <button type="reset">Reset</button>
  <button disabled="disabled">Disabled</button>
</form>

<pre><code class="language-HTML">&lt;form&gt;
  &lt;p&gt;&lt;strong&gt;This is just a test form. It doesn't do anything.&lt;/strong&gt;&lt;/p&gt;

  &lt;p&gt;&lt;select&gt;
    &lt;option selected="selected" value="1"&gt;Title&lt;/option&gt;
    &lt;option value="2"&gt;Mr&lt;/option&gt;
    &lt;option value="3"&gt;Miss&lt;/option&gt;
    &lt;option value="4"&gt;Mrs&lt;/option&gt;
    &lt;option value="5"&gt;Other&lt;/option&gt;
  &lt;/select&gt;&lt;/p&gt;

  &lt;p&gt;
  &lt;label&gt;First name&lt;/label&gt;&lt;br&gt;
  &lt;input type="text" name="first_name"&gt;
  &lt;/p&gt;

  &lt;p&gt;
  &lt;label&gt;Surname&lt;/label&gt;&lt;br&gt;
  &lt;input type="text" name="surname"&gt;
  &lt;/p&gt;

  &lt;p&gt;
  &lt;label&gt;Email&lt;/label&gt;&lt;br&gt;
  &lt;input type="email" name="email" required=""&gt;
  &lt;/p&gt;

  &lt;p&gt;
  &lt;label&gt;Enquiry type:&lt;/label&gt;&lt;br&gt;
  &lt;label&gt;&lt;input checked="checked" name="type" type="radio" value="sales" /&gt; Sales&lt;/label&gt; &lt;br /&gt;
  &lt;label&gt;&lt;input name="type" type="radio" value="support" /&gt; Support&lt;/label&gt; &lt;br /&gt;
  &lt;label&gt;&lt;input name="type" type="radio" value="billing" /&gt; Billing&lt;/label&gt;
  &lt;/p&gt;

  &lt;p&gt;
  &lt;label&gt;Message&lt;/label&gt;&lt;br&gt;
  &lt;textarea rows="6"&gt;&lt;/textarea&gt;
  &lt;/p&gt;

  &lt;p&gt;
  &lt;label&gt;
  &lt;input type="checkbox" id="checkbox" value="terms"&gt;
  I agree to the &lt;a href="#"&gt;terms and conditions&lt;/a&gt;
  &lt;/label&gt;
  &lt;/p&gt;

  &lt;button&gt;Send&lt;/button&gt;
  &lt;button type="reset"&gt;Reset&lt;/button&gt;
  &lt;button disabled="disabled"&gt;Disabled&lt;/button&gt;
&lt;/form&gt;
</code></pre>


    </main>

Scripts

<link rel="stylesheet" href="https://unpkg.com/simpledotcss/simple.min.css">

No Items Found.

Add Comment
Type in a Nick Name here
 
Related Search Terms
Search Code
Search Code by entering your search text above.
Welcome to CSSBundle.com

Hi there and welcome to CSSBundle. Here at CSS Bundle we aim to find the best css and javascript bundles and demos and add them here to make them easy to find all in one place.

If you would like to stay up to date with our latest updates you can subscribe to our mailing list where we will send you one email per week with the latest updates, no spam emails just the latest updates.

Random Quote


Latest Code
css animations Falling Stars CSS Animation html Video different sources on screen sizes video embed html responsive css animations Animated Triangles on Canvas JS HTML HTML Canvas Instant colour fill with HTML Canvas javascript Transform Text into Images using SnapText JS CSS Tools Fancy Border Radius CSS Generator Tool - spin animation keyframes CSS Tools CSS Drop Filter Shadow Creator CSS Slider A CSS and HTML Only Carousel Slider CSS Z-Index Z-Index Code Front - CSS to change z-index when element is active sections section with image to the right text to the left gradient Sections Two Clickable Logo Promo Box Section Foundation HTML CSS Sections Inline Contact Form Formatting HTML CSS Sections Overview full width section in Poppins font with light gray background using foundation Interactive Images Map Image with Easy Dots and Titles using only CSS HTML Sections Social Header Links easy Drop in Code with Font Awesome Icons Sections Responsive Friendly Subscribe to our Newsletter Section CSS Tips Create a button with CSS, HTML and Center it! CSS Text Formatting Truncate Text to an amount of lines using line-clamp CSS Positions Item Positioning in CSS CSS Tips Draw a Circle in CSS css animations Magical Text Effect Bootstrap 4.2 Kitchen Sink CSS Frameworks Make your site look like windows 7 CSS Backgrounds Fancy up your banner image hero sections using overlay gradients CSS Modal Floating Modal Message Fixed on the Bottom of the Screen CSS Modal Create a modal with only CSS css grid display items in a css grid CSS Text Effects Using the selection selector to change the default highlight color Text Truncate your Text with CSS CSS Cursors Change your cursor into an Emoji Cursor or Image Cursor CSS How to Center Everything or Anything with CSS CSS Animations Smooth Scrolling with just CSS CSS Animations Radial Glow under cursor on box hover over effect CSS Shadows Using a filter drop shadow for transparent images CSS Animations Pure CSS 3D Flipping Book with Animations CSS Create a checkerboard background pattern with CSS CSS Animations button animations hover and fill animation CSS Animations button on focus swing animation CSS Animations Animated Button Border when Active Quick CSS create a border with top triangle in css CSS Animations Single Element CSS Spinners CSS Animations CSS Shake - Shake up your elements CSS Framework NES-style(8bit-like) CSS Framework CSS Tips Why to use a CSS Reset? Web Developer Checklists Front-End Checklist Icons Font Awesome Icons CSS Animation Animate Stuff with Animate.css CSS Animations Check Wave Click a Checkbox and Watch the Animation Animation Cloudy spiral animation with CSS3 Notifications Toast Messages and Notifications Standalone Library no JQuery - notify.js