کتابخانه CSS مشکی

[Borderliner]

با سلام خدمت همه دوستان.

پروژه مشکی : https://github.com/Borderliner/Meshki
بنده مدتی هست پروژه Meshki رو به عنوان یه تفریح برای خودم به راه انداختم. مشکی یه کتابخونه CSS برای راه‌اندازی پروژه‌های طراحی وب‌سایت هست. کاملن متن-باز و رایگانه و تحت مجوز MIT توزیع میشه.
مشکی برپایه کتابخونه‌ای به نام Skeleton ساخته شده که بسیار ساده و ابتدایی هست. مشکی اهداف Skeleton رو گسترش داده: ساده، با اینحال کاربردی. سعی کردم از کمترین کد جاوااسکریپت ممکن استفاده کنم تا همیشه روون و سبک باشه. سیاه-رنگ بودن مشکی هم باعث میشه تا به هنگام خوندن صفحات با حجم متون زیاد، چشم‌ها اذیت نشن. از قابلیت‌های مشکی میتونم موارد زیر رو نام ببرم:

۱. زیبا و شیک بودن طراحی ظاهری
۲. کم حجم و سبک بودن (به هنگام نوشتن این مطلب، مشکی فقط 16 کیلوبایت به صورت فشرده حجم داره)
۳. پایدار و قابل اعتماد بودن
۴. دوستدار چشم از طریق استفاده از رنگ مشکی
۵. از ابزارهای به روز برای اتوماسیون استفاده شده (GruntJS برای node کارها، و Rake برای روبی‌کارها)
۶. تست شده روی اکثر مرورگرهای محبوب، و پشتیبانی از IE9 و به بعد
۷. دارای نسخه راست-به-چپ (که شامل زبان‌های فارسی، عربی و عبری میشه)
۸. مجوز آزاد MIT، که به شما اجازه میده مشکی رو مطابق با سلیقتون ویرایش کنید و استفاده کنید
۹. چون من نوشتم 

حالا مورد ۹ شوخی بود، ولی میتونید با Star کردن پروژه یا Pull Request دادن و Issue باز کردن به گسترش مشکی کمک کنید! نظراتتون خیلی مهمه، اگر هم بتونید توی پروژه دخیل بشید، محشر میشه! ممنون از همه.

برای دریافت از npm:

کد: [انتخاب]

npm install meshki --saveبرای دریافت از bower:

کد: [انتخاب]

bower install meshki --saveدریافت از سی‌دی‌ان: https://cdnjs.com/libraries/meshki
سورس‌کد: https://github.com/Borderliner/Meshki
نمونه و Document پروژه: https://borderliner.github.io/Meshki/
نسخه فارسی پروژه: https://borderliner.github.io/Meshki/rtl/


نسخه 2.0.0 منتشر شد: بازنویسی با Scss
بعد از حدودا چهار پنج ماه کار روی پروژه مشکی، مفتخرم که اعلام کنم نسخه 2.0.0 مشکی منتشر شد. در این نسخه، css کنار گذاشته شد و از Scss استفاده شده، که باعث میشه کد ساده‌تر و ماژولارتر بشه. همچنین ساختار پروژه به کلی عوض شده، و مشکی افزونه-محور شده، بدین صورت که شما میتونید افزونه‌های Scss خودتون رو در فولدر plugins بسازید و ضمیمه مشکی کنید. سیستم مدیریت ساخت اتوماتیک Grunt و Gulp رو از پروژه ورداشتیم، و فایلی به نام build.js تمام این کارهارو انجام میده.
توجه کنید که مشکی نسخه 2.0.0 به بعد، با مجوز Apache-2.0 عرضه میشن، برعکس نسخه های قبل‌تر که با مجوز MIT تقدیمتون میشد. هردو مجوز متن باز هستن، و برای شما دوست عزیز که از کتابخونه استفاده میکنید، تفاوتی ایجاد نمیکنه. ولی اگه مشتاق هستید که این دو مجوز چه تفاوتی با هم دارن، سری به لینک زیر بزنید:
https://choosealicense.com/licenses/apache-2.0/
https://choosealicense.com/licenses/mit/

از همه دوستانی که حمایتم کردن بسیار متشکرم.

[Borderliner]

مشکی به نسخه v1.5.1 رسید، با کلی تغییرات و امکانات جدید و رفع باگ.
نسخه RTL:
https://borderliner.github.io/Meshki/rtl/
نسخه لاتین:
https://borderliner.github.io/Meshki/rtl/
لینک گیتهاب:
https://github.com/Borderliner/Meshki

[ALi.pAkrohk]

دوستان من از مشکی استفاده کردم واقعا عالیه خیلی کارم رو راحت و زیبا کرد
شما هم استفاده کنید.
دوست من میتونی اون رو مثل یه پلاگین داخلی برای ide ها آماده کنی؟
مثل
atom
sublime text
++notepad
این طوری دیگه از عالیم بهتر میشه.

[Borderliner]

دوستان من از مشکی استفاده کردم واقعا عالیه خیلی کارم رو راحت و زیبا کرد
شما هم استفاده کنید.
دوست من میتونی اون رو مثل یه پلاگین داخلی برای ide ها آماده کنی؟
مثل
atom
sublime text
++notepad
این طوری دیگه از عالیم بهتر میشه.

خیلی ممنونم از حمایتتون. <3
متوجه نشدم منظورتون از پلاگین داخلی برای ide چیه؟ برای Auto-Complete اش، یا ظاهر این Editor ها؟

[ALi.pAkrohk]

دوستان من از مشکی استفاده کردم واقعا عالیه خیلی کارم رو راحت و زیبا کرد
شما هم استفاده کنید.
دوست من میتونی اون رو مثل یه پلاگین داخلی برای ide ها آماده کنی؟
مثل
atom
sublime text
++notepad
این طوری دیگه از عالیم بهتر میشه.

خیلی ممنونم از حمایتتون. <3
متوجه نشدم منظورتون از پلاگین داخلی برای ide چیه؟ برای Auto-Complete اش، یا ظاهر این Editor ها؟

هر دو رو میتونه پشتیبانی کنه
ولی من منظورم Atuo Complete بود که بعد از وارد کردن به IDE خودش بروز بیاره برای ادرس گیری و لینک کردن یا اصلا متصل کنه و از کلاس هاش داخل IDE بشه راحت استفاده کرد.
یه چیز تو مایه های پلاگین های ادیتوری php لاراول و .....

[Borderliner]

دوستان من از مشکی استفاده کردم واقعا عالیه خیلی کارم رو راحت و زیبا کرد
شما هم استفاده کنید.
دوست من میتونی اون رو مثل یه پلاگین داخلی برای ide ها آماده کنی؟
مثل
atom
sublime text
++notepad
این طوری دیگه از عالیم بهتر میشه.

خیلی ممنونم از حمایتتون. <3
متوجه نشدم منظورتون از پلاگین داخلی برای ide چیه؟ برای Auto-Complete اش، یا ظاهر این Editor ها؟

هر دو رو میتونه پشتیبانی کنه
ولی من منظورم Atuo Complete بود که بعد از وارد کردن به IDE خودش بروز بیاره برای ادرس گیری و لینک کردن یا اصلا متصل کنه و از کلاس هاش داخل IDE بشه راحت استفاده کرد.
یه چیز تو مایه های پلاگین های ادیتوری php لاراول و .....

پیشنهاد بدی نیست، ولی مشکی ساده تر از این حرفاس که آدم بخواد براش ساپورت IDE بذاره. در حد چندتا کلاس و ایناس.

[ALi.pAkrohk]

دوستان من از مشکی استفاده کردم واقعا عالیه خیلی کارم رو راحت و زیبا کرد
شما هم استفاده کنید.
دوست من میتونی اون رو مثل یه پلاگین داخلی برای ide ها آماده کنی؟
مثل
atom
sublime text
++notepad
این طوری دیگه از عالیم بهتر میشه.

خیلی ممنونم از حمایتتون. <3
متوجه نشدم منظورتون از پلاگین داخلی برای ide چیه؟ برای Auto-Complete اش، یا ظاهر این Editor ها؟

هر دو رو میتونه پشتیبانی کنه
ولی من منظورم Atuo Complete بود که بعد از وارد کردن به IDE خودش بروز بیاره برای ادرس گیری و لینک کردن یا اصلا متصل کنه و از کلاس هاش داخل IDE بشه راحت استفاده کرد.
یه چیز تو مایه های پلاگین های ادیتوری php لاراول و .....

پیشنهاد بدی نیست، ولی مشکی ساده تر از این حرفاس که آدم بخواد براش ساپورت IDE بذاره. در حد چندتا کلاس و ایناس.

ولی کامل و زیباست و باکمی کار خیلی کامل تر از اونی میشه که شاید بعضی پلاگینای خود ide ها دارن.

[Borderliner]

دوستان من از مشکی استفاده کردم واقعا عالیه خیلی کارم رو راحت و زیبا کرد
شما هم استفاده کنید.
دوست من میتونی اون رو مثل یه پلاگین داخلی برای ide ها آماده کنی؟
مثل
atom
sublime text
++notepad
این طوری دیگه از عالیم بهتر میشه.

خیلی ممنونم از حمایتتون. <3
متوجه نشدم منظورتون از پلاگین داخلی برای ide چیه؟ برای Auto-Complete اش، یا ظاهر این Editor ها؟

هر دو رو میتونه پشتیبانی کنه
ولی من منظورم Atuo Complete بود که بعد از وارد کردن به IDE خودش بروز بیاره برای ادرس گیری و لینک کردن یا اصلا متصل کنه و از کلاس هاش داخل IDE بشه راحت استفاده کرد.
یه چیز تو مایه های پلاگین های ادیتوری php لاراول و .....

پیشنهاد بدی نیست، ولی مشکی ساده تر از این حرفاس که آدم بخواد براش ساپورت IDE بذاره. در حد چندتا کلاس و ایناس.

ولی کامل و زیباست و باکمی کار خیلی کامل تر از اونی میشه که شاید بعضی پلاگینای خود ide ها دارن.

خیلی ممنون. فعلا درحال دوباره نویسیش با Sass هستم، که مدتی طول خواهد کشید. درگیر کارای دانشگاهی و اینا هستم.

[ALi.pAkrohk]

دوستان من از مشکی استفاده کردم واقعا عالیه خیلی کارم رو راحت و زیبا کرد
شما هم استفاده کنید.
دوست من میتونی اون رو مثل یه پلاگین داخلی برای ide ها آماده کنی؟
مثل
atom
sublime text
++notepad
این طوری دیگه از عالیم بهتر میشه.

خیلی ممنونم از حمایتتون. <3
متوجه نشدم منظورتون از پلاگین داخلی برای ide چیه؟ برای Auto-Complete اش، یا ظاهر این Editor ها؟

هر دو رو میتونه پشتیبانی کنه
ولی من منظورم Atuo Complete بود که بعد از وارد کردن به IDE خودش بروز بیاره برای ادرس گیری و لینک کردن یا اصلا متصل کنه و از کلاس هاش داخل IDE بشه راحت استفاده کرد.
یه چیز تو مایه های پلاگین های ادیتوری php لاراول و .....

پیشنهاد بدی نیست، ولی مشکی ساده تر از این حرفاس که آدم بخواد براش ساپورت IDE بذاره. در حد چندتا کلاس و ایناس.

ولی کامل و زیباست و باکمی کار خیلی کامل تر از اونی میشه که شاید بعضی پلاگینای خود ide ها دارن.

خیلی ممنون. فعلا درحال دوباره نویسیش با Sass هستم، که مدتی طول خواهد کشید. درگیر کارای دانشگاهی و اینا هستم.

بعله واقعا کارتون عالیه منم در گیر دانشگاهم وگرنه کمک می کردم.

[geeksesi | javad]

سلام خسته نباشی

استایل هات رو دیدم خیلی عالی بود فقط یه نظر دارم !
اینکه بهتر نبود به جای تولید یک کتابخونه css جدا ابزاری برای کتابخونه های دیگه مثل بوت استرپ ارائه می دادید ؟
یعنی مثلا  در گنار  بوت استرپ یا استایل های دیگه یه استایلی رو به عنوان مشکی ارائه می دادید ؟

امروز یه قالب خیلی ساده می خواستم برای معرفی کوچیک بسازم با  کتابخونه شما این صفحه بندی و نوع نوشتن استایل ها یکم اذیتم کرد باعث شد کار نیم ساعته رو 1 ساعت و خورده ای طول بکشه انجام بدم ( البته به خاطر یه سری تست و آزمایشات ) در حین کار به این فکر افتادم که اگه کتابخونه شما یه جور رنگ و استایل ای برای مثلا بوت استرپ بود اینجوری خیلی راحت تر می شد ازش داخل قالب ها استفاده کرد !

و البته سرعت توسعه و کوتاه تر شدن استایل های مشکی رو هم به همراه داره

خلاصه مطلب اینکه بیایید یه کتابخونه ی رنگ ( مشکی ) برای css درست کنیم | فقط رنگ و زیبایی ریسپانسیو و صفحه بندی و... رو به کتابخونه های دیگه مثل بوت استرپ بسپاریم

اگر که مایل بودید منم می تونم نیمچه کمکی بکنم

[ALi.pAkrohk]

سلام خسته نباشی

استایل هات رو دیدم خیلی عالی بود فقط یه نظر دارم !
اینکه بهتر نبود به جای تولید یک کتابخونه css جدا ابزاری برای کتابخونه های دیگه مثل بوت استرپ ارائه می دادید ؟
یعنی مثلا  در گنار  بوت استرپ یا استایل های دیگه یه استایلی رو به عنوان مشکی ارائه می دادید ؟

امروز یه قالب خیلی ساده می خواستم برای معرفی کوچیک بسازم با  کتابخونه شما این صفحه بندی و نوع نوشتن استایل ها یکم اذیتم کرد باعث شد کار نیم ساعته رو 1 ساعت و خورده ای طول بکشه انجام بدم ( البته به خاطر یه سری تست و آزمایشات ) در حین کار به این فکر افتادم که اگه کتابخونه شما یه جور رنگ و استایل ای برای مثلا بوت استرپ بود اینجوری خیلی راحت تر می شد ازش داخل قالب ها استفاده کرد !

و البته سرعت توسعه و کوتاه تر شدن استایل های مشکی رو هم به همراه داره

خلاصه مطلب اینکه بیایید یه کتابخونه ی رنگ ( مشکی ) برای css درست کنیم | فقط رنگ و زیبایی ریسپانسیو و صفحه بندی و... رو به کتابخونه های دیگه مثل بوت استرپ بسپاریم

اگر که مایل بودید منم می تونم نیمچه کمکی بکنم

سلام اهوم منم این نظر رو قبلا دادم که می تونه حالتی کمکی باشه
ولی دقیقا مثل شما برا زمانی بود که تازه از مشکی استفاده کرده بودم
یکم که توی استفادش راه افتادی خودت می تونی ازش حتی بهتر از بوت استرپ(خخخ منظورم بهتر بودن نیستا اخه اون جامعه این کمکی مقایسه نبود فقط من راحتم خودم کد بزنم ) کار در بیاری چون هیچ جاش نگفته فلان اجیاریه بهمانو بزن البت بجز نوع استفاده دستورات که اونم منطقیه هر چیزی یه قانونی داره.
یکم بیشتر کارکن باش و سعیی نکن یه قالب باش بسازی
سعیی کن یه قالب تولید کنی با فکر خودت به کمک مشکی.
امید وارم منظورم رو گرفته باشی 😉

[geeksesi | javad]

راستی لینک این  استایل خرابه
لطفا  درستش کن

https://cdnjs.cloudflare.com/ajax/libs/meshki/1.5.1/meshki-rtl.min.css

[ALi.pAkrohk]

راستی لینک این  استایل خرابه
لطفا  درستش کن

https://cdnjs.cloudflare.com/ajax/libs/meshki/1.5.1/meshki-rtl.min.css

نه خراب نیست دکمه قرمز رنگ توی صفحه رو بزن اونجا لینک ها رو گذاشته چون نسخه ۱.۵.۱ تغیراتی داشته.
ولی اصلا لازمم نیست توی خود فایلی که دانلود کردی در بخش Dist
در پوشه plugins هر دو فایل دکمه های رنگی و زبان فارسی وجود داره موفق باشید.

[Borderliner]

سلام خسته نباشی

استایل هات رو دیدم خیلی عالی بود فقط یه نظر دارم !
اینکه بهتر نبود به جای تولید یک کتابخونه css جدا ابزاری برای کتابخونه های دیگه مثل بوت استرپ ارائه می دادید ؟
یعنی مثلا  در گنار  بوت استرپ یا استایل های دیگه یه استایلی رو به عنوان مشکی ارائه می دادید ؟

امروز یه قالب خیلی ساده می خواستم برای معرفی کوچیک بسازم با  کتابخونه شما این صفحه بندی و نوع نوشتن استایل ها یکم اذیتم کرد باعث شد کار نیم ساعته رو 1 ساعت و خورده ای طول بکشه انجام بدم ( البته به خاطر یه سری تست و آزمایشات ) در حین کار به این فکر افتادم که اگه کتابخونه شما یه جور رنگ و استایل ای برای مثلا بوت استرپ بود اینجوری خیلی راحت تر می شد ازش داخل قالب ها استفاده کرد !

و البته سرعت توسعه و کوتاه تر شدن استایل های مشکی رو هم به همراه داره

خلاصه مطلب اینکه بیایید یه کتابخونه ی رنگ ( مشکی ) برای css درست کنیم | فقط رنگ و زیبایی ریسپانسیو و صفحه بندی و... رو به کتابخونه های دیگه مثل بوت استرپ بسپاریم

اگر که مایل بودید منم می تونم نیمچه کمکی بکنم

واقعا ممنونم از نظر و حمایت شما دوست عزیز.
از اونجایی که مشکی برپایه Skeleton بود، اهداف مشابهی هم داره؛ از جمله ساده بودن، کوچیک بودن و سریع بودن. کتابخونه Bootstrap دو مورد اول رو زیر پا میذاره. کسی نمیتونه ادعا کنه که Bootstrap ساده و کوچیکه.
درحال حاضر در تلاشم کتابخونه مشکی رو با استفاده از Sass بنویسم تا خیلی منسجم تر بشه و بقیه دوستان راحت تر بتونن به پروژه کمک کنن. میتونید برای مشاهده آخرین تغییرات، سری به شاخه sass-dev رو در گیتهاب مشکی بزنید: https://github.com/Borderliner/Meshki/tree/sass-dev

از همتون از صمیم قلب متشکرم. امیدوارم فرهنگ کدنویسی متن-باز بین ما ایرانی ها بیشتر رواج پیدا کنه و تیم ها و پروژه های متن-باز بیشتری رو در آینده نزدیک ببینیم.

[geeksesi | javad]

سلام خسته نباشی

استایل هات رو دیدم خیلی عالی بود فقط یه نظر دارم !
اینکه بهتر نبود به جای تولید یک کتابخونه css جدا ابزاری برای کتابخونه های دیگه مثل بوت استرپ ارائه می دادید ؟
یعنی مثلا  در گنار  بوت استرپ یا استایل های دیگه یه استایلی رو به عنوان مشکی ارائه می دادید ؟

امروز یه قالب خیلی ساده می خواستم برای معرفی کوچیک بسازم با  کتابخونه شما این صفحه بندی و نوع نوشتن استایل ها یکم اذیتم کرد باعث شد کار نیم ساعته رو 1 ساعت و خورده ای طول بکشه انجام بدم ( البته به خاطر یه سری تست و آزمایشات ) در حین کار به این فکر افتادم که اگه کتابخونه شما یه جور رنگ و استایل ای برای مثلا بوت استرپ بود اینجوری خیلی راحت تر می شد ازش داخل قالب ها استفاده کرد !

و البته سرعت توسعه و کوتاه تر شدن استایل های مشکی رو هم به همراه داره

خلاصه مطلب اینکه بیایید یه کتابخونه ی رنگ ( مشکی ) برای css درست کنیم | فقط رنگ و زیبایی ریسپانسیو و صفحه بندی و... رو به کتابخونه های دیگه مثل بوت استرپ بسپاریم

اگر که مایل بودید منم می تونم نیمچه کمکی بکنم

واقعا ممنونم از نظر و حمایت شما دوست عزیز.
از اونجایی که مشکی برپایه Skeleton بود، اهداف مشابهی هم داره؛ از جمله ساده بودن، کوچیک بودن و سریع بودن. کتابخونه Bootstrap دو مورد اول رو زیر پا میذاره. کسی نمیتونه ادعا کنه که Bootstrap ساده و کوچیکه.
درحال حاضر در تلاشم کتابخونه مشکی رو با استفاده از Sass بنویسم تا خیلی منسجم تر بشه و بقیه دوستان راحت تر بتونن به پروژه کمک کنن. میتونید برای مشاهده آخرین تغییرات، سری به شاخه sass-dev رو در گیتهاب مشکی بزنید: https://github.com/Borderliner/Meshki/tree/sass-dev

از همتون از صمیم قلب متشکرم. امیدوارم فرهنگ کدنویسی متن-باز بین ما ایرانی ها بیشتر رواج پیدا کنه و تیم ها و پروژه های متن-باز بیشتری رو در آینده نزدیک ببینیم.

بله قبلا در مورد سیاست ساده بودنتون گفته بودید !
ولی خب من  می گم وقتی کتابخونه های ساده ای مثل همین skeleton | sass هست برای چی ما بیاییم یدونه از روی اینها بسازیم ؟
اگه به دنبال رفع ایراد هستید خب در توسعه کتابخونه های اصلی مشارکت کنید
من می گم وقتی ما کلی کتابخونه از سبک تا سنگین برای css داریم خب به جای تولید یکی دیگه لای این همه کتابخونه بیایید کتابخونه های رنگ ایجاد کنید !
یعنی مشکی یه جزع رنگی باشه که وقتی استایل رو اضافه می کنیم بتونیم از این اجزاء رنگی استفاده کنیم و پروژمون رو زیبا تر کنیم !
اینجوری دیگه لازم نیست برای نوشتن یک قالب گرافیکی وقت زیادی صرف بشه !
رنگ ها از یکجا | سی اس اس های ساختاری از یک جا و....

حالا نظر منه و البته شما سازنده این پروژه ای ‌