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

  • By Reza Hajianpour
  • Last update: Nov 17, 2022
  • Comments: 13

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.

Github

https://github.com/Borderliner/Meshki

Comments(13)

  • 1

    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.

  • 2

    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

  • 3

    bug = nav and div class nav

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

  • 4

    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?

  • 5

    Some suggestions to make Meshki a general-purpose library

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

  • 6

    Bump glob-parent from 5.1.1 to 5.1.2

    Bumps glob-parent from 5.1.1 to 5.1.2.

    Release notes

    Sourced from glob-parent's releases.

    v5.1.2

    Bug Fixes

    Changelog

    Sourced from glob-parent's changelog.

    5.1.2 (2021-03-06)

    Bug Fixes

    6.0.0 (2021-05-03)

    ⚠ BREAKING CHANGES

    • Correct mishandled escaped path separators (#34)
    • upgrade scaffold, dropping node <10 support

    Bug Fixes

    • Correct mishandled escaped path separators (#34) (32f6d52), closes #32

    Miscellaneous Chores

    • upgrade scaffold, dropping node <10 support (e83d0c5)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 7

    Change openNav() to openSidenav() in index.html

    Hey, this pull request fixes a part of code that was not changed after the 'API change' mentioned in Borderliner/Meshki#13. The example code in the "Navbar" section uses meshki.openNav() instead of meshki.openSidenav(), and Firefox will emit an error ('TypeError: meshki.openNav is not a function') if the code on the site is used.

  • 8

    Full url to og:image and twitter:image

    As you can see on https://cards-dev.twitter.com/validator image is not showing currently for https://borderliner.github.io/Meshki/. This change fixed it for me.

  • 9

    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.

  • 10

    Error 404 for "[Plugin] Extra Button Colors" link

    #Error 404 I tried to open the link contained in the link tag bellow and is giving a 404 error. The link is: https://cdnjs.cloudflare.com/ajax/libs/meshki/1.5.1/button-colors.min.css The code on the https://borderliner.github.io/Meshki/ page it's in the "[Plugin] Extra Button Colors" section <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meshki/1.5.1/button-colors.min.css">

  • 11

    Bump ansi-regex from 5.0.0 to 5.0.1

    Bumps ansi-regex from 5.0.0 to 5.0.1.

    Release notes

    Sourced from ansi-regex's releases.

    v5.0.1

    Fixes (backport of 6.0.1 to v5)

    This is a backport of the minor ReDos vulnerability in ansi-regex@<6.0.1, as requested in #38.

    • Fix ReDoS in certain cases (#37) You are only really affected if you run the regex on untrusted user input in a server context, which it's very unlikely anyone is doing, since this regex is mainly used in command-line tools.

    CVE-2021-3807

    https://github.com/chalk/ansi-regex/compare/v5.0.0..v5.0.1

    Thank you @​yetingli for the patch and reproduction case!

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 12

    Bump json5 and tsconfig-paths

    Bumps json5 and tsconfig-paths. These dependencies needed to be updated together. Updates json5 from 1.0.1 to 2.2.3

    Release notes

    Sourced from json5's releases.

    v2.2.3

    v2.2.2

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).

    v2.2.1

    • Fix: Removed dependence on minimist to patch CVE-2021-44906. (#266)

    v2.2.0

    • New: Accurate and documented TypeScript declarations are now included. There is no need to install @types/json5. (#236, #244)

    v2.1.3 [code, diff]

    • Fix: An out of memory bug when parsing numbers has been fixed. (#228, #229)

    v2.1.2

    • Fix: Bump minimist to v1.2.5. (#222)

    v2.1.1

    • New: package.json and package.json5 include a module property so bundlers like webpack, rollup and parcel can take advantage of the ES Module build. (#208)
    • Fix: stringify outputs \0 as \\x00 when followed by a digit. (#210)
    • Fix: Spelling mistakes have been fixed. (#196)

    v2.1.0

    • New: The index.mjs and index.min.mjs browser builds in the dist directory support ES6 modules. (#187)

    v2.0.1

    • Fix: The browser builds in the dist directory support ES5. (#182)

    v2.0.0

    • Major: JSON5 officially supports Node.js v6 and later. Support for Node.js v4 has been dropped. Since Node.js v6 supports ES5 features, the code has been rewritten in native ES5, and the dependence on Babel has been eliminated.

    • New: Support for Unicode 10 has been added.

    • New: The test framework has been migrated from Mocha to Tap.

    • New: The browser build at dist/index.js is no longer minified by default. A minified version is available at dist/index.min.js. (#181)

    • Fix: The warning has been made clearer when line and paragraph separators are

    ... (truncated)

    Changelog

    Sourced from json5's changelog.

    v2.2.3 [code, diff]

    v2.2.2 [code, diff]

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).

    v2.2.1 [code, diff]

    • Fix: Removed dependence on minimist to patch CVE-2021-44906. (#266)

    v2.2.0 [code, diff]

    • New: Accurate and documented TypeScript declarations are now included. There is no need to install @types/json5. (#236, #244)

    v2.1.3 [code, diff]

    • Fix: An out of memory bug when parsing numbers has been fixed. (#228, #229)

    v2.1.2 [code, diff]

    • Fix: Bump minimist to v1.2.5. (#222)

    v2.1.1 [code, [diff][d2.1.1]]

    ... (truncated)

    Commits
    • c3a7524 2.2.3
    • 94fd06d docs: update CHANGELOG for v2.2.3
    • 3b8cebf docs(security): use GitHub security advisories
    • f0fd9e1 docs: publish a security policy
    • 6a91a05 docs(template): bug -> bug report
    • 14f8cb1 2.2.2
    • 10cc7ca docs: update CHANGELOG for v2.2.2
    • 7774c10 fix: add proto to objects and arrays
    • edde30a Readme: slight tweak to intro
    • 97286f8 Improve example in readme
    • Additional commits viewable in compare view

    Updates tsconfig-paths from 3.9.0 to 3.10.1

    Changelog

    Sourced from tsconfig-paths's changelog.

    [3.10.1] - 2021-07-06

    Fixed

    • Add register.js to published files

    [3.10.0] - 2021-07-06

    Added

    • feat(tsconfig-loader): extends config from node_modules (#106). Thanks to @​zorji for this PR!

    Fixed

    Commits

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 13

    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?