1

بابه‌ت: ٥ پڕ بەکارهێنراوترین چوارچێوەکان (فرەیموۆرکەکانی) بەشی پێشەوەی وێب

سڵاوی خواتان لێبێت،
لەم بابەتەدا باس لە پڕ بەکارهێنەرترین چوارچێوەکانی بەشی پێشەوەی وێب دەکەین لەساڵی ٢٠١٨ دا.
بێگومان دوای ئەوەی هەر کامێکمان بمانەوێت پڕۆژەیەکی نوێ لە سفرەوە دابڕێژین بیر لە بەکارهێنانی زۆرترین زیادکراو و ئاسانکاری دەکەینەوە بۆئەوەی بتوانین بە کەمترین کات باشترین پڕۆژە ئامادەبکەین.
لێرەدا باس لەو چوارچێوە باوانە دەکەین کە تەواو گونجاون بۆ بەکارهێنان و ئاسانکردنی کارەکانمان، کە بێگومان زۆر جۆرمان هەیە و هەر یەکەوە تایبەتمەندی و باشی خۆی هەیە، کە ڕەنگە لەکەسێکەوە بۆ کەسێکی تر بگۆڕێت و دانەیەک بۆمن گونجاو بێت و بۆتۆ گونجاوتر دانەیەکی تربێت، بۆیە پێویستە پێش هەموو شتێک بیر لەوە بکەینەوە کە کامەیان زۆرترین ئاسانکاریمان بۆ دەکات لەپڕۆژەکەمان، و سەرچاوە و شتی ئامادەکراوی باشی لەسەر هەیە.

گەر بێین و دانە دانە باسیان بکەین و لایەنی باش و خراپیان بخەینە ڕوو:-

یەکەم: بوتستراپ (Bootstrap):
http://www.webchinupload.com/f/2019-01/a62ecc4d7476b576c08504bc1eb3f312.png

لەلایەن گەشەپێدەرانی یوتیوبەوە داڕێژراوە لە ساڵی ٢٠١١، کە پڕبەکارهێنەرترینە لە ئێستادا بەهۆی ئەو تایبەتمەندیە زۆرانەی کە هەیەتی و ئەو سەرچاوە باش و شتە زۆرە ئامادەکراوانەی کە بەردەستن بۆی.
کە بەهەریەک لە زمانەکانی HTML و CSS و Javascript داڕێژراوە. هەروەها ڕیسپۆنسیڤە (گونجاوە بۆ قەبارەی شاشەی هەموو ئامێرێک) ئەمەش بە بەکارهێنانی کەترین کۆد زۆرترین ئاسانکاریت بۆدەکات و سەرئێشەت لەکۆڵ دەکاتەوە.
تایبەتمەندییە بەردەوامەکانی وای کردووە کەگەشەپێدەران ڕوی تێ بکەن، چونکە هەر شێوازێکی تازە بێتە کایەوە بۆی زیاد دەکرێت، تەنانەت ئەوانەیشی کە لە چوارچێوەکانی ترن و لەودانین گەر خواست و بەکارهێنانی لەسەربێت زیادی دەکەن بۆی.

بەشێک لە باشیەکانی تری:
- ڕیسپۆنسیڤ (گەر بتەوێت دەتوانی ناچالاکی بکەیت).
- پشتگیری و بەڵگەنامەیەکی باش، کەوای کردوە بەئاسانی فێری ببیت یان گەر کێشەیەکت بێتە پێش بەئاسانی چارەسەری بکەیت.

خراپیەکانی:
- قەبارەیەکی گەورەتری هەیە بەبەراورد بە چوارچێوەکانی تر (276kB) بەهۆی زۆری ستایلەکانی.

دووەم: سیمانتیک یوئای (Semantic-UI):
http://www.webchinupload.com/f/2019-01/182213173d364d3e4d1a23df824293c3.png
ئەمەشیان یەکێکی ترە کە بەهۆی تایبەتمەندییە جیاوازەکانی وادەکات کە لە باشترینەکان بژمێردرێت... کە لەناوخۆیدا تایبەتمەندیەکی باشی هەیە و تەواو هاوکارت دەبێت، چونکە کەم وایە کەپێویستیت بە زیادکراوی تربێت وەک چوارچێوەکانی تر بەڵکو زۆر شتی ئامادەکراوی تێدایە و لەخۆیداگرتووە.

باشیەکانی:
- کلاسەکانی کورتن و ئاسانن بۆ بەکارهێنان بەتایبەت بۆئەوانەی کە سەرەتایین و دەیانەوێت خۆ فێری ئەمە بکەن.
- کەمی قەبارەی بەوەی کە تایبەتمەندیەکی زۆری هەیە و قەبارەیەکی کەمی هەیە چ لە پەڕگەکانی جاڤاسکریپت و ستایلەکانیش بەهەمان شێواز ئەمە لەکاتێکدا کە بەتەنیا بەکاری بهێنیت.
- توانای ئەوەت هەیە کە گۆڕانکاری تێدابکەیت بە ئاسانی.

خراپی:
- گەر بێت و بتەوێت لەگەڵ بوتستراپ یان فاوندەیشن بەکاری بهێنێت قورس دەبێت.

سێیەم: فاوندەیشن (Foundation):
http://www.webchinupload.com/f/2019-01/6baf7cebae6adf12180b2e91319d5b5f.png
لەلایەن Zurb کۆد نوسینی بۆکراوە، کە تەواو پێشکەوتووە و خاوەن تایبەتمەندی بەرزە، ئەم تایبەتمەندیە بەرزیەی وای کردووە کە لەهەر یەک لە سایتەکانی فەیس بووک و ئیبەی و مۆزێلا بەکاربراوە، وە تایبەتمەندیەکی تری ناوازەی بریتییە لە ئەوەی تۆ دەتوانی بەپێی پێویست بەشەکانی بەکاربهێنیت و لەماڵپەڕی خۆیانەوە بەنموونە تۆ تەنیا بەشی خشتەکانت بەکارهێناوە لە سایتەکەت، ئەوکاتە دەتوانی تەنیا ئەو فایلانە وەربگریت کە تایبەت بە خشتەکان و ئەوانی تر دانەگریت.

باشیەکانی:
- ڕیسپۆنسیڤە واتە لەهەموو ئامێرەکان و شاشە قەبارە جیاوازەکان گونجاوە.
- تایبەتمەندی داگرتنی ستایلەکان بەجیا کە ئەمە بەڕاستی شتێکی ناوازەیە تا ماڵپەڕەکەت خێراتر بکرێتەوە.

خراپیەکانی:
- قەبارەی گەورەیە گەر بێت و هەموو بەشەکانی بەیەکەوە بەکارببەیت.
- قورسە بۆ ئەوانەی سەرەتایین و دەیانەوێت خۆفێربکەن.

چوارەم: ماتریالیز (Materialize):
http://www.webchinupload.com/f/2019-01/a2ed6f4159a40e5e37e8d064916e4f40.png
چوارچێوەیەکی ڕیسپۆنسیڤە، کە لایەن گوگڵەوە کۆدنوسینی بۆ کراوە، کە دیزاینێکی تەواو پڕۆفیشناڵی هەیە و شێوازی مۆدێرنی مێتریاڵە،و گونجاوە بۆ بەکارهێنان چونکە زۆربەی زیادکراوەکان و پارچەکانی لەخۆ گرتووە (دوگمەکان، ئایکۆن، فۆڕمەکان و زۆری تر).

باشیەکانی:
- زیادکراوێکی زۆری لەخۆگرتووە کە بۆ تەواوی ماڵپەڕەکەت دەتوانیت بەکاری بهێنیت و ئاسانکاری تەواوەتی تێداکراوە.
- گونجاوە بۆ شاشەی هەموو ئامێرەکان و خۆی دەگونجێنێت لەگەڵیان.

خراپی:
- قەبارەیەکی گەورەی هەیە بۆ بەکاربردن.

پێنجەم:  یوئای کیت (UIKit):
http://www.webchinupload.com/f/2019-01/6941a41fc4f200d78e5a1bd2dff4ec9d.png
چوارچێوەیەکی تەواو پێشکەوتویی بەشی پێشەوەی وێبە، من خۆم بەڕاستی لەکاتی دانانی ئەم بابەتە بینیم و تەواو پێی سەرسام بووم چونکە زۆرترین ئاسانکاری تێداکراوە و تەواوی پارچەکانی ماڵپەڕی لەخۆ گرتووە، ان شاء الله پڕۆژەی داهاتووم ئەمە بەکاردێنم (لەئێستادا بەکارهێنەری بوتستراپم) لەبەر ئەوەی زیادکراوێکی زۆرم تێدابینی کە پێشتر خۆم کاتم بۆی تەرخان کردووە و دام ڕشتووە، ئامۆژگاری ئێوەش دەکەم کە تاقی بکەنەوە، کە بەبەکارهێنانی (LESS و Sass) داڕێژراوە.

باشیەکانی:
- تەواو کەستەمایزە واتە گشتگیرە و زۆرترین پارچەی لەخۆگرتووە.
- دەتوانیت خۆت شتی بۆ زیادبکەیت بەبێ هیچ تێک گیرانێک لەگەڵ کۆدەکانی خۆی.

خراپی:
- ڕەنگە بەهۆی زۆری زیادکراوەکانی کاتێکی زیاتری بوێت بۆ بونەوەی ماڵپەڕەکەت (مەبەست لەوەیە گەر ماڵپەڕەکەت سادەیە و پێویستیت بە زۆرێک لەم پارچانە نییە ئەوا دەتوانیت ئەوانی تر بەکارببەیت).

چەند چوارچێوەیەکی تریش هەن کە شایستەی بەکارهێنان و تاقیکردنەوەن لەوانە (Material UI،Pure،Skeleton،Milligram،Susy) ،بەڵام تکایە بەپێی پێویستی بەکاریان بێنە.

سەرچاوە بە دەستکاریەوە: https://www.keycdn.com/blog/front-end-frameworks

بەهیوای سود

2

وه‌ڵام: ٥ پڕ بەکارهێنراوترین چوارچێوەکان (فرەیموۆرکەکانی) بەشی پێشەوەی وێب

-بوووت ستراپ گەر بتەوێت دەتوانی ناچالاکی بکەیت چۆن؟
من پێم وابیت ناتوانیت lock بکرێت
- بوتستراپ لەلایەن دوو کارمەندی تویتەروە درێژراوە
هیوادارم سەرچاوەکەی دابنێت تا لنیا بین

3

وه‌ڵام: ٥ پڕ بەکارهێنراوترین چوارچێوەکان (فرەیموۆرکەکانی) بەشی پێشەوەی وێب

aawara نووسی:

-بوووت ستراپ گەر بتەوێت دەتوانی ناچالاکی بکەیت چۆن؟
من پێم وابیت ناتوانیت lock بکرێت
- بوتستراپ لەلایەن دوو کارمەندی تویتەروە درێژراوە
هیوادارم سەرچاوەکەی دابنێت تا لنیا بین

بەڵێ دەتوانیت، ئەم کۆدە زیاد بکە ڕیسپۆنسیڤ ناچالاک دەبێت،

<meta name="viewport" content="initial-scale=0.1">

4

وه‌ڵام: ٥ پڕ بەکارهێنراوترین چوارچێوەکان (فرەیموۆرکەکانی) بەشی پێشەوەی وێب

Govar Jabar نووسی:
aawara نووسی:

-بوووت ستراپ گەر بتەوێت دەتوانی ناچالاکی بکەیت چۆن؟
من پێم وابیت ناتوانیت lock بکرێت
- بوتستراپ لەلایەن دوو کارمەندی تویتەروە درێژراوە
هیوادارم سەرچاوەکەی دابنێت تا لنیا بین

بەڵێ دەتوانیت، ئەم کۆدە زیاد بکە ڕیسپۆنسیڤ ناچالاک دەبێت،

<meta name="viewport" content="initial-scale=0.1">

بەس ریسپۆنسیف ناچالاک دەبیت
ئایا من ئەدوانم دیزاینی مالپەرەکم بە بووتستراپ دارشتوو lock بکەم؟

5

وه‌ڵام: ٥ پڕ بەکارهێنراوترین چوارچێوەکان (فرەیموۆرکەکانی) بەشی پێشەوەی وێب

aawara نووسی:
Govar Jabar نووسی:
aawara نووسی:

-بوووت ستراپ گەر بتەوێت دەتوانی ناچالاکی بکەیت چۆن؟
من پێم وابیت ناتوانیت lock بکرێت
- بوتستراپ لەلایەن دوو کارمەندی تویتەروە درێژراوە
هیوادارم سەرچاوەکەی دابنێت تا لنیا بین

بەڵێ دەتوانیت، ئەم کۆدە زیاد بکە ڕیسپۆنسیڤ ناچالاک دەبێت،

<meta name="viewport" content="initial-scale=0.1">

بەس ریسپۆنسیف ناچالاک دەبیت
ئایا من ئەدوانم دیزاینی مالپەرەکم بە بووتستراپ دارشتوو lock بکەم؟

بەڕێزم css کۆدەکەی کراوەیە و بەردەستە بۆ هەموان، مەبەستت چییە لە لوک؟