Meshki

Meshki is a simple, black-colored, responsive boilerplate to kickstart any responsive project.
It is only ~15 KiB (minified) and ~36 KiB (normal), including both CSS and JS files.
Check out http://meshki.borderliner.ir/ for samples and details.

Getting started

There are a couple ways to download Meshki:

• Download the zip or the tar.gz
• Clone the repo: git clone https://github.com/Borderliner/Meshki.git (Note: this is under active development, so if you're looking for stable and safe, use the zipped download)
  You can also download it via bower install meshki --save

How to compile

You need node.js to minify the source CSS and JavaScript files and produce outputs. Head over to nodejs.org and download a version for your system, or download it from your package manager. Next, install Grunt with this command:

npm install -g grunt-cli
You may need to access root user to install node packages globally.

Then cd into the root folder of the project, issue the command npm install to install development dependencies. After that, run the command npm run compile. This will produce files for you in the dist folder, which includes both minified and normal versions of Meshki, plus a fonts folder which includes Open Sans Regular font. You can also run npm run watch (or grunt watch) to watch source files for change, and compile them automatically if there has been a change recently.

What's in the download?

The download includes Meshki's CSS, Meshki's JavaScript, Normalize CSS as a reset, a sample favicon, and an index.html as a starting point.

Meshki/
├── dist/
│   ├── fonts/
│   │   └── OpenSans-Regular.ttf
│   ├── meshki.css
│   ├── meshki.min.css
│   ├── meshki.js
│   └── meshki.min.js
├── src/
│   ├── css/
│   │   ├── normalize.css
│   │   ├── meshki.css
│   │   └── *.css
│   ├── fonts/
│   │   └── OpenSans-Regular.ttf
│   ├── images/
│   │   └── favicon.ico
│   └── js/
│       └── meshki.js
└

Why it's awesome

Meshki is lightweight, stylish and simple. It styles only raw HTML elements (with a few exceptions) and provides a responsive grid with a minimal and clean interface.

• Around 1.6k lines of CSS unminified and with comments
• Although it's not a UI framework, you can create most of the interface just with Meshki
• No compiling or installing needed. Just 2 files of CSS + JS
• Can be installed via bower and npm (bower install meshki and npm install meshki)
• Clean code, clean interface, without any headaches

Browser support

• Chrome & Chromium (latest)
• Mozilla Firefox (latest)
• Microsoft Edge (latest)
• Opera (latest)
• Safari (latest)
• IE 9+ (No animations on IE 9. Do not open issues regarding IE 8 and below)

The above list is non-exhaustive. Meshki works perfectly with almost all older versions of the browsers above, though IE certainly has large degradation prior to IE 9.

Major Known Issues

• I once saw very bad rendering on a low resolution laptop. It's probably nothing I can do about, but report any issues related to bad font rendering. I recently changed it to Open Sans, which is very clean and well-tested.
• On tablets, opening the push slider messes up the button-couples. Will find a workaround in the future release.

Tools Used

Meshki has been developed on my Arch Linux system, using a free version of Sublime Text 3 and GNU Emacs. Meshki uses tons of ideas I found over the Internet, and they were all customized to satisfy Meshki's needs. The source code is hosted on GitHub and uses Git as it's Version Control System.

License

All parts of Meshki are free to use and abuse under the open-source MIT license.
All other non-Meshki codes have their own licenses. Check out their repositories for more information. The website of Meshki uses font-awesome

Acknowledgement

Meshki started by Mohammad Reza Hajianpour as a fork of Skeleton. Although it has changed a lot, and Meshki has experienced a total overhaul.
Skeleton was created by Dave Gamache.