/Meshki

Meshki: A Dark-Colored, Responsive CSS library for UI Development

Primary LanguageSCSSApache License 2.0Apache-2.0

Meshki

npm GitHub tag npm Twitter Follow

Meshki Banner

Meshki is a simple, black-colored, responsive boilerplate to kickstart any responsive project.

It is only ~20 KiB (minified) and ~30 KiB (normal), including both Scss/CSS and JS files.

Check out https://borderliner.github.io/Meshki/ for samples and details.

Getting Started (for users)

There are a couple ways to get Meshki (choose only one):

  1. Download the package: as .zip (bigger, common) or as .tar.gz (smaller, uncommon)

  2. Use CDN: Link Meshki directly into your project with <link> and <script> tags. Meshki is hosted on two famous content delivery networks:

  3. Clone the repo: Open a console and issue (without $):

    $ git clone https://github.com/Borderliner/Meshki.git

    Note: Meshki is always under active development, so if you're looking for a stable and safe release, use the compressed packages. Cloning the repo is needed only if you want to contribute to the project.

  4. Use Bower: bower install meshki (Not Recommended)

  5. Use npm: npm install meshki (Not Recommended)



# Build (for developers and contributors) You need [Node.js](https://nodejs.org/en/) to minify the source Scss and JavaScript files and produce outputs. Download a version suitable for your system, or get it from your Operating System's package manager.

Clone the repo:

git clone https://github.com/Borderliner/Meshki.git && cd Meshki

Install Dependencies

npm or yarn

Install all the dependencies (don't use both):

  • npm install
  • yarn

To compile Meshki, the file build.js contains the scripts you need to compile Meshki. There are a couple of commands you can use via npm or yarn so that you don't have to use build.js directly.

  • npm run compile
  • yarn run compile

To compile and watch for file changes:

  • npm run watch
  • yarn run watch

Sometimes when you upgrade your NodeJS, node-sass needs to be recompiled for the newer version. To do so, run the following command:

  • npm run rebuild-sass
  • yarn run rebuild-sass


# Why Meshki is Awesome

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

  • Dependency-free! You don't need jQuery or other scripts to use Meshki. All pure and independent JavaScript and CSS files.
  • No compilation or any specific installation needed. Just link 2 files of meshki.min.css and meshki.min.js
  • Although Meshki is not a UI framework, it's a CSS library, you can create most of the interface with just using Meshki
  • Around 1.3k lines of unminified CSS, with comments
  • Can be installed via different tools: git, bower, npm and yarn
  • Hosted on the most famous CDNs: CloudFlare and jsDelivr
  • Clean code, smooth interface, easy yet professional
  • Linter configurations, comments, all available for contributors

Browser Support

Latest version of these browsers are implied:

  • Chrome, Chromium, Opera, Microsoft Edge -> ✓ Well-Tested
  • Mozilla Firefox -> ✓ Well-Tested
  • Safari -> No issues reported.
  • Internet Explorer 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 fine with almost all older versions of the above browsers, though IE certainly has large degradation prior to IE 9, and you are advised to always keep your browser up-to-date.

Known Issues and Roadmap

Not any production-obstructing issues are currently present. For all known issues and project roadmap, see CHANGELOG.

Tools Used

Meshki has been developed mainly on PC, using VSCode and its surrounding tools.

License

All parts of Meshki are free to use under the permissive Apache-2.0 License.

All other non-Meshki codes have their own respective licenses. Check out their repositories for more information. The website of Meshki uses:

Acknowledgement

Meshki was originally started by Mohammadreza Hajianpour as a fork of Skeleton. Meshki has come a long way since then and has experienced a total overhaul, including porting the codebase from CSS to Scss. Skeleton was created by Dave Gamache.


Thanks to all contributors and supporters of Meshki, you are AWESOME.