Code Monkey home page Code Monkey logo

meshki's Introduction

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

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 Reza 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.

meshki's People

Contributors

aalaap-ghag avatar afront avatar andersos avatar borderliner avatar calvein avatar dbpreston avatar denisjacquemin avatar dependabot[bot] avatar dhg avatar fat avatar jakehenshall avatar jokull avatar kamyker avatar loonypandora avatar mehdad avatar micrypt avatar ndarville avatar paulirish avatar pretz333 avatar rauchg avatar scottrabin avatar smpaq avatar syndbg avatar tomaszfrankowski avatar tzi avatar valentinvieriu avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

meshki's Issues

Meshki in Editor (atom , vim , MS VsCode , ...)

سعی کنید پلا گینی برای پشتیباینی اتوکامپلیت برای ادیتور ها آماده کنید
معمولا کتاب خونه های دیگه این عمکانات رو دارند

Translation: Please try to implement an autocomplete plugin to support various editors. Other libraries usually tend to provide such plugins.

Status of the project?

Hey, I looked at Meshki a while ago and it looked quite interesting, but now development seems to have stalled.
Are you still using it or would you suggest using something else today?

How to add the Persian plugin?

سلام چطور پلاگین فارسیه مشکی رو اضافه کنم اون قسمت سایت باز نمیشه

navbar covering the container

New Issue
thememaker site generator page telegram theme maker

As you can see the nav bar is covering the container, to prevent this I added a padding at the top of the title, but is there another way to correct it? I think that different div shouldn't overlap

Old issue:
The issue exist on http://thememaker.site/generator if you go to the table you can see a strange line cutting the first row. (i'm on windows 10 x64, with google chrome)
That's a screenshoot:
thememaker site generator page telegram theme maker

Some suggestions to make Meshki a general-purpose library

اول برای قرار دادن عکس و مدیریت اون در مشکی زیاد توضیحی داده نشده وجود این امکان بسیار لازم است
.امکان اپلود فایل را راحت تر کنید به شکلی که حجم, اندازه,نوع(فرمت فایل) و برش(برای عکس ها) مدیریت شود
و همین طور
ui
زیبای برای ستون های درصدی و مدیریت اپلود قرار بگیرد
دوم یک باگ در کپی شدن متن های کد وجود دارد مشکی باید به نوعی باشد که اگر باکسی برای کد تایین شد
.متن اون جدا گونه از متن صفحه باشد و در کلید برد کپی شود

bug = nav and div class nav

سلام این یک مشکل در منو هستش که باید حل بشه
برای ساخت منو باید از تک های
nav , nav fixed , div (class ="nav") , div (class ="nav fixed ")
استفاده کرد ولی این باعث میشه که در پارا گراف نویسی مشکل ایجاد بشه و روی دایو
پارا گراف قرار می گیره و اولین جمله پراگراف یا حرف در صورت وجود
fixed
زیر منو
و در صورت نبود اون
روی منو
قرار می گیرد و در کار کرد اون مشکل ایجاد می کند
screenshot 25
screenshot 26

Buttons in nav?

Why do you use <button onclick="location.href='something'"> against <a href="something">? I know, that you use .sidenav button selector, but why do you use it?

nav-dropdown doesn't work with nav-right

inside nav-fixed:
I wanted to show a nav-dropdown on the right side.
but hovering on it does not display -- list items.

actually, they are displayed, but behind..
Solve it please.

Light-themed option?

Hi, do you have any plans of releasing this with while/light background? Or do you have easy steps to switch and build locally?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.