What is Sympl?

Sympl is the no bullshit HTML5/CSS framework.

Put simply, Sympl is a super simple framework to make static websites. Sympl is light, but has the correct features to get you started and going. It's developed by Namanyay Goel, and it can be found on GitHub (It's open source!).

I made Sympl because I was tired with the traditional frameworks, all which were:

  1. Bloated. (I didn't use more than half the things half as many times I used them)
  2. Not perfect everywhere. (Each had too much of accessories and extras like buttons, notes, most which I'll never use)

…And thus, Sympl was born.

Why use Sympl?

Simply because it's simple. And amazing. Here are a few features:

  1. A good vertical rhythym defined.
  2. A HTML5 skeleton made, and ready to go.
  3. A great grid, having half, quarter, one third, and two third columns going on.
  4. Anchors set up—No underline, and no ugly blue.
  5. Added retina favicons. All files ready + code in header.
  6. Beautiful form elements + One button style.
  7. CSS starts with Necolas' normalize.css
  8. Javascript starts with HTML5Shiv.

Sympl is lightweight, fast, ready to go, and always usable. You can use it in each and every project, and you'll see that you use all of the things bundled with Sympl.

Vertical Baseline Defined

All heading elements have their own line-heights and perfect font sizes.

A perfect grid

Unlike some grids with 10+ columns, Sympl has maximum 4. Half, Quarter, Two Thirds, and One third.

HTML5

Sympl uses HTML5, and has the HTML5Shiv for backward compatibility.

Retina Favicons

Added all common retina favicons format for a wide variety of apple devices, + code put in header. Just replace the icons and go!

Sympl in action…

Code


var deepthought = {
	theanswer: 42;
}

function think() {
setTimeout(calculateTheAnswer(), 2.36677e14);
}

function destroyEarth() {
	vogon.attack();
	makeHyperspaceBypass();
}

think();

Forms

Changelog

v2.0

  1. Added grid.
  2. Redesigned homepage.
  3. Added giga class for text.
  4. Removed wildcard operator uses.

v1.4

  1. Added form and button styles.
  2. Added HTML5Shiv.

v1.3

  1. Edited index.htm for faulty script tag.
  2. Added HTML5Shiv in the JS.
  3. Set styles for form elements.

v1.2:

  1. Added retina favicon support. Courtesy Mathias Bynens.
  2. Added quotes to `blockquote` using CSS.