فریم‌ورک qalam در حال حاضر در حال تکمیل شدن و از آدرس https://github.com/WebHistory/qalam قابل دسترس است. چند نمونه از قابلیت‌های قطعی این جعبه ابزار عبارتند از: وجود تنظیمات پیش‌فرض برای فونت‌های متن‌باز جدید (فونت‌های جناب راستی کردار و سوزنچی) ، نام‌های معنادار: به جای دیدن btn btn_lrg btn-green در کلاس‌های یک المنت، button large primary دیده خواهد شد. استفاده از فونت‌آیکن متناسب با سرعت اینترنت میانگین ایران. فرم‌های اصلاح شده (ایمیل و یوزرنیم و پسورد نباید راست به چپ باشند) ، قابلیت انتخاب تاریخ شمسی، بررسی صحت کد ملی، شماره کارت بانکی، تلفن همراه، ایمیل و... و کلی ریز ابزار مانند badge، tooltip، pagination و... در مجموع، هدف این است که یک جعبه ابزار کامل برای طراحان وب تهیه شود. فونت‌آیکن و CDN برای فونت‌های متن باز فارسی و چند کار‌ دیگر که نیاز به معرفی شدن، همفکری و همیاری جامعه وب ایران دارد.

1. ‫مجتهدی‬ ‫حسین‬ ‫محمد‬
‫قلم‬ ‫ابزار‬ ‫جعبه‬

3. ‫وب‬ ‫تاریخ‬ ‫درباره‬ ‫کلمه‬ ‫چند‬

4. ‫نکن‬ ‫تکرار‬ ‫را‬ ‫خودت‬!
Don’t Repeat Yourself!

5. ‫آبشاری‬ ‫های‬‫نامه‬‫شیوه‬ ‫چارچوب‬
CSS Framework
!!!!!

6. ‫قلم‬ ‫ابزار‬ ‫جعبه‬

7. ‫قلم‬ ‫ابزار‬ ‫جعبه‬
•‫کاغذ‬:‫مرورگرها‬ ‫در‬ ‫طراحی‬ ‫شروع‬ ‫نقطه‬ ‫کننده‬ ‫یکسان‬(‫از‬ ‫فراتر‬CSS Reset)
•‫نقش‬:‫ها‬‫فرمت‬ ‫تمامی‬ ‫در‬ ‫ها‬‫آیکن‬ ‫از‬ ‫گرا‬‫واکنش‬ ‫و‬ ‫کامل‬ ‫ای‬‫مجموعه‬
•‫نگار‬:‫فونت‬ ‫گیرنده‬ ‫خروجی‬(‫آیکن‬ ،‫فارسی‬)
•‫قلم‬:CSS‫ورک‬‫فریم‬
‫ها‬‫ابزار‬ ‫لیست‬

8. ‫نسخه‬ ‫اهداف‬1.0‫قلم‬

9. ‫فارسی‬ ‫اول‬
‫هدف‬1

10. ‫فارسی‬ ‫اول‬
•‫بیگانه‬ ‫های‬‫زبان‬ ‫با‬ ‫دشمنی‬ ‫بدون‬ ‫فارسی‬ ‫مستندات‬–‫انگلیسی‬ ‫مستندات‬ ‫با‬ ‫همراه‬
•‫خاص‬ ‫های‬‫مکان‬ ‫برای‬ ‫انگلیسی‬ ‫صحیح‬ ‫فونت‬ ‫انتخاب‬(email field،pre tag‫و‬ ،)...
•‫از‬ ‫بیش‬ ‫برای‬ ‫اختصاصی‬ ‫تنظیمات‬ ‫وجود‬15‫و‬ ‫جدید‬ ‫باز‬ ‫متن‬ ‫فونت‬39‫جدید‬ ‫فونت‬ ‫چندین‬ ‫و‬ ‫معروف‬ ‫فونت‬
•‫اول‬ ‫قدم‬ ‫از‬ ‫بودن‬ ‫چپ‬ ‫به‬ ‫راست‬
•‫اعداد‬Ordered List‫فارسی‬
•‫و‬...
‫هدف‬1

11. ‫باز‬ ‫متن‬
‫هدف‬2
‫باز‬ ‫فکر‬ ‫و‬...

12. ‫بزرگان‬ ‫های‬‫شانه‬
‫هدف‬3

13. ‫تایپوگرافی‬
‫هدف‬4

14. ‫تایپوگرافی‬
•‫نیکا‬
•‫گندم‬
•‫جمهوریا‬
•‫امیری‬
•‫وزیر‬
•‫بهداد‬
•‫صمیم‬
•‫فربد‬
•‫سنس‬‫ایران‬
•‫فونت‬‫پی‬
•‫گنجنامه‬
•‫تاهوما‬
•‫تیتر‬
•‫شبنم‬
•‫پرستو‬
•‫زر‬
•‫لوتوس‬
•‫و‬...
‫هدف‬4
‫ها‬‫فونت‬ ‫لیست‬

15. ‫پذیری‬ ‫قالب‬
‫هدف‬5
‫معدنی‬ ‫آب‬ ‫فروش‬ ‫به‬ ‫نشانی‬ ‫آتش‬ ‫سایت‬ ‫تبدیل‬
‫دقیقه‬ ‫چند‬ ‫در‬

16. ‫معنادار‬ ‫های‬‫کالس‬
‫هدف‬6
Semantic Class Naming

17. ‫معنادار‬ ‫های‬‫کالس‬‫هدف‬6
Semantic Class Naming
<div class=“
btn btn--lrg btn__green
“></div>
<div class=“
button large primary
“></div>

18. ‫گرایی‬‫واکنش‬
‫هدف‬7

19. ‫گرایی‬‫واکنش‬
•‫عامل‬ ‫سیستم‬
•‫عامل‬‫سیستم‬ ‫نسخه‬
•‫مرورگر‬
•‫مرورگر‬ ‫نسخه‬
•‫صفحه‬ ‫ابعاد‬
•‫پیکسل‬ ‫تراکم‬
•‫اکسپلورر‬ ‫اینترنت‬...
‫هدف‬7
•‫ها‬‫ترین‬‫پرکاربرد‬ ‫از‬ ‫پشتیبانی‬
•‫قدیمی‬ ‫های‬‫نسخه‬ ‫از‬ ‫پشتیبانی‬ ‫کردن‬ ‫حذف‬
•‫موبایل‬ ‫در‬ ‫مخصوصا‬ ‫گرایی‬‫واکنش‬ ‫بر‬ ‫فراوان‬ ‫تمرکز‬
‫حالت‬ ‫میلیون‬ ‫چند‬

20. ‫عناصر‬ ‫چیدمان‬
‫هدف‬8

21. ‫ها‬‫سنج‬‫اعتبار‬
‫هدف‬9

22. ‫ها‬‫سنج‬ ‫اعتبار‬
•‫کنند‬‫نمی‬ ‫پشتیبانی‬ ‫را‬ ‫مخصوصی‬ ‫های‬‫کارکتر‬ ،‫ایمیل‬ ‫دهندگان‬‫ارائه‬ ‫برخی‬.
•‫موقت‬ ‫های‬‫ایمیل‬ ‫بررسی‬
•‫شرکتی‬ ‫یا‬ ‫رایگان‬ ‫های‬‫ایمیل‬ ‫تمایز‬
•‫شده‬ ‫تایپ‬ ‫اشتباه‬ ‫های‬‫ایمیل‬ ‫برای‬ ‫پیشنهاد‬ ‫ارائه‬
•‫دامنه‬ ‫پسوند‬ ‫بررسی‬(TLD)
‫هدف‬9
‫ایمیل‬

23. ‫ها‬‫فرم‬
‫هدف‬10

24. ‫ها‬‫فرم‬
•‫بودن‬ ‫راست‬ ‫به‬ ‫چپ‬،‫ایمیل‬ ‫های‬‫ورودی‬URL‫موارد‬ ‫دیگر‬ ‫و‬ ‫تلفن‬ ،‫مشابه‬
•‫های‬‫آیکن‬ ‫از‬ ‫استفاده‬‫نقش‬‫و‬ ‫ها‬‫دکمه‬ ‫در‬...
•‫فرم‬ ‫طراحی‬ ‫در‬ ‫ها‬‫رنگ‬ ‫از‬ ‫راحت‬ ‫استفاده‬
•‫مانند‬ ‫مرورگر‬ ‫های‬‫افزونه‬ ‫تنظیمات‬ ‫ندادن‬ ‫تغییر‬pocket
‫هدف‬10

25. ‫ر‬‫ن‬‫گ‬‫ه‬‫ا‬
‫هدف‬11

26. ‫انیمیشن‬
‫هدف‬12

27. ‫مخلفات‬
‫هدف‬13

28. ‫مخلفات‬
•‫آبشاری‬ ‫منو‬
•‫صفحه‬ ‫از‬ ‫خارج‬ ‫منو‬
•‫صفحه‬ ‫باالی‬ ‫منوی‬
•‫ها‬‫دکمه‬
•‫ها‬‫حباب‬
•‫جداول‬
•‫ها‬‫عکس‬
•‫ها‬‫فیلم‬
•‫صوتی‬ ‫های‬‫فایل‬
•‫ها‬‫لیست‬
•‫شو‬‫اسالید‬
•‫ها‬‫پیغام‬
•‫امتیازدهی‬
•‫صفحه‬ ‫درون‬ ‫آپ‬ ‫پاپ‬
•‫و‬...
‫هدف‬13

29. ‫بهارنارنجی‬ ‫جاوااسکریپت‬
‫هدف‬14
‫وانیلی‬ ‫به‬ ‫نزدیک‬!

30. ‫ها‬‫ابزار‬ ‫و‬ ‫ها‬‫کتابخانه‬ ‫دیگر‬ ‫با‬ ‫نداشتن‬ ‫تداخل‬
‫هدف‬15

31. ‫پایانی‬ ‫سخن‬
https://github.com/webhistory/qalam
#mojtahedi #qalam

32. ‫احترام‬ ‫با‬
‫محمد‬ ‫آل‬ ‫و‬ ‫محمد‬ ‫بر‬ ‫صلواتی‬ ‫با‬ ‫و‬(‫ص‬)

33. ‫مجتهدی‬ ‫حسین‬ ‫محمد‬
‫اینستاگرام‬:mhmojtahedi
‫بقیه‬ ‫و‬ ‫هاب‬‫گیت‬‫جاها‬:mhm5000
‫سایت‬:mojtahedi.info