Skip to content

hrsh/Meshki

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

npm GitHub tag npm

Twitter Follow

Meshki Banner

Meshki is a simple, black-colored, responsive boilerplate to kickstart any responsive project.
It is only ~17 KiB (minified) and ~40 KiB (normal), including both CSS and JS files.
Check out https://borderliner.github.io/Meshki/ 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)
  • Use Bower: bower install meshki (Recommended)
  • Use npm: npm install meshki

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 package?

The package 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/
│   ├── meshki.css
│   ├── meshki.min.css
│   ├── meshki-rtl.css
│   ├── meshki-rtl.min.css
│   ├── meshki.js
│   ├── meshki.min.js
|   └── fonts/
|       └── p_yekan.ttf
├── src/
│   ├── css/
│   │   ├── normalize.css
│   │   ├── meshki.css
│   │   └── *.css
│   ├── images/
│   │   └── favicon.ico
│   ├── js/
│   |   └── meshki.js
|   └── fonts/
|       └── p_yekan.ttf
└

Why Meshki is 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 unminified CSS, with comments
  • Although it's not a UI framework, you can create most of the interface just with Meshki
  • No compilation or installation needed. Just 2 files of CSS + JS
  • Can be installed via bower and npm (bower install meshki and npm install meshki)
  • Available through CloudFlare and jsDelivr CDNs
  • Clean code, clean interface, without any headaches
  • Dependency-free! You don't need jQuery to run Meshki. All pure JavaScript

Browser Support

  • Chrome & Chromium (latest) Well-Tested
  • Mozilla Firefox (latest) Well-Tested
  • Microsoft Edge (latest)
  • Opera (latest)
  • Safari (latest) Well-Tested
  • IE 9+ (No animations on IE 9. Do not open issues regarding IE 8 and below) Change Your Browser, Please!

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

  • Slider is somehow messed up on IE and Microsot Edge. Will be fixed soon.

Tools Used

Meshki has been developed on a GNU/Linux system (Arch Linux and Ubuntu), using a free version of Sublime Text 3, GNU Emacs and the lovely Atom Editor. 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 the Version Control System, and SmartGit 8 as a Git GUI. GruntJS is also used for task automations.

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.

About

Meshki: A Black-Colored, Responsive Boilerplate for UI Development

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • CSS 90.5%
  • JavaScript 9.5%