طراحان وبسایت از چه فریم‌ورک‌های سی اس اس ریسپانسیوی استفاده می‌کنند؟

معرفی فریم ورک های سی اس اس برای طراحی واکنشگرا یا ریسپانسیو


علی طبیب زاده 50 دیدگاه CSS , اصول طراحی وب سایت Tuesday, 1st January , 2013 104482 بازدید

با ظهور پدیده طراحی وب واکنش‌گرا یا Responsive بسیاری از توسعه‌دهندگان و طراحان ماهر و خلاق به ساختن فریم‌ورک‌هایی برای آسان‌ و منظم‌تر کردن این تکنیک طراحی٬ پرداختند. در این نوع طراحی٬ عملیات ریاضی مربوط به تغییر سایز عناصر در صفحه ممکن است کسل کننده و ملال‌آور شوند و وقت زیادی را بی‌جهت از طراح وب‌سایت بگیرند. اما تعدادی فریم‌ورک ریسپانسیو وجود دارد که این فرآیند طراحی را برای طراحان و توسعه‌دهندگان آسان و سریع می‌کند. این فریم‌ورک‌ها تمام موارد مورد نیاز شامل گریدهای پیچیده٬ layoutها و مدیا کوئری‌ها را یک جا برای شما فراهم آورده تا طرح ریسپانسیو خود را به آسانی پیاده سازی کنید. در این مطلب تعدادی از این محبوب‌ترین فریم‌ورک‌ها که بیشتر توسط طراحان مورد استفاده قرار گرفته را معرفی خواهیم کرد.

Bootstrap

احتمالا نام بوتسترپ – Bootstrap را شنیدید. فریم‌ورکی که توسط چند تن از مهندسین توییتر ساخته شده است٬ اکنون به عنوان بیشترین فریم‌ورک مورد استفاده شناخته می‌شود. بوتسترپ با قابلیت‌ها و امکانات جامع زیادی ساخته شده است که باعث می‌شود طراحان بتوانند آن را هر گونه که در نظر دارند برای هر طرح مجزا تغییر دهند.

bootstrap

Foundation

فاوندیشن – Foundation یک فریم‌ورک Front-end پیشرفته و ریسپانسیو است که بر اساس گریدهای قابل انعطاف ساخته شده است که می‌تواند برای نیازهای دقیق و جزئی تغییر کند. این قابلیت باعث آسان شدن توسعه ساختارها برای دستگاه‌های موبایل و دسکتاپ با mark up یکسان می‌شود.
foundation

Skeleton

Skeleton یا همان اسکلت یکی از فریم‌ورک‌های سبکی است که بر اساس یک سیستم گرید ( شبکه بندی ) ساده ساخته شده است. گرید Skeleton به زیبایی از ۹۶۰ پیکسل تا اندازه موبایل‌ها و تبلت‌ها در دو حالت دیدن Landscape و Portrait با مقیاس مشخص تغییر اندازه داده و کوچک می‌شود.
skeleton

Golden Grid System

اگر شما علاقه خاصی به گریدها دارید٬ بی‌شک ارتباط خوبی با Golden Grid System برقرار خواهید کرد. این ساختار با یک گرید که دارای ۱۶ ستون است با marginها و حاشیه‌های تمیز شروع می‌کند اما به زیبایی هنگام تغییر اندازه و کوچک شدن نمایشگر به ساختار ۸ یا ۴ ستونه برای تبلت‌ها و موبایل‌ها تبدیل می‌شود.
ggs

320 and Up

بعضی از طراحان شیوه متفاوت تصاعدی در اندازه را نسبت به شیوه معمول و مطلوب تنازلی در طرح ترجیه می‌دهند. اینجا جایی است که فریم‌ورک 320 and Up وارد می‌شود. در تعریف این فریم‌ورک را می‌توان در دسته فریم‌ورک‌های Mobile First قرار داد. یعنی ابتدا طراحی برای نمایشگرهای کوچک انجام می‌گیرد و تغییرات سایز را به صورت افزایشی در نظر می‌گیرند تا تغییرات مورد نظر بر روی طرح پس از این افزایش اندازه اعمال شوند. این فریم ورک به گونه‌ای ساخته شده که ساختارهایی برای نمایشگرهای با سایز کوچک به بالا طراحی می‌شود٬ بر خلاف طراحی برای نمایشگرهای بزرگ که به اندازه‌های پایین‌تر برسد. در این تکنیک٬ محتوی اولویت اول را دارد.
sn320

Less Framework

Less یک فریم‌ورک کلاسیک است که بر اساس ساختار گرید ساده و ثابت در عرض که تطابقی (Adaptive) عمل می‌کند٬ ساخته شده است. Less ۴ ساختار آماده و ۳ نوع تایپوگرافی از پیش تنظیم شده برای نمایش مناسب در دسکتاپ٬ تبلت‌ها٬ موبایل‌ها را در خود دارا است.
lessframework

1140px CSS Grid System

طراحی یک ساختار ریسپانسیو یا واکنش‌گرا فقط به این معنا نیست که شما برای سایزها و رزولوشن‌های پایین‌تر هم طراحی می‌کند٬ بلکه شما می‌توانید طرح خود را برای یک سایز بسیار عریض و بزرگ در یک ساختار حداکثری طراحی کنید و در همان حال طرحتان برای اندازه‌های معمولی دسکتاپ نیز به خوبی نمایش داده شود. فریم‌ورک 1140 grid به شما طراحان وب این قابلیت را می‌دهد تا بتوانند یک طرح مناسب برای نمایشگرهای با رزولوشن 1280px طراحی کرده و به خوبی برای هر سایز کوچکتری در مقیاس خودش تغییر اندازه دهد و کار کند.
1140px

Frameless

شاید به صورت کلی Frameless نباید در این لیست جای بگیرد٬ چون نمی‌توان آن را به درستی ریسپانسیو یا حتی به عنوان یک فریم‌ورک خواند. ایده اصلی پشت آن باعث می‌شود تا ساختن ساختارها برای نمایشگرهای مختلف قابل تصور شود٬ با گریدها یا شبکه‌بندی Frameless به سادگی می‌توان ستونی را موقعی که به آن نیاز داریم اضافه کرد.
frameless

Wirefy

ایده و مفهوم یک طرح واکنش‌گرا یا ریسپانسیو همیشه برای مشتریان و کاربران معنی‌دار نیست٬ اما ساخت و ایجاد مفاهیمی که به آنها چگونگی و کلیت کار آن را نشان دهد عملی وقت‌گیر است. با ورود به Wirefy و استفاده از آن که فریم‌ورکی ریسپانسیو برای ساخت Wireframeها است ساختن مدل‌ها برای ساختار کلی سایت با عناصری مانند اسلایدرها٬ گالری‌ها٬ منوها و فرم‌ها را آسان می‌سازد.
wirefy

Gumby Framework

اگر شما در طراحی ریسپانسیو به تازگی وارد شدید٬ فریم ورک گامبی می‌تواند گزینه خوبی برای شروع شما باشد. Gumby ساده و سبک است٬ و برخلاف بعضی از فریم‌ورک‌ها که ممکن است در زمان شروع کمی گیج کننده باشند٬ یک فایل PSD و UI Kit را همراه با خود دارد که باعث آسان شدن ایجاد نمونه یا Mock up برای طرح شما می‌شود.
gumby

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

فریم‌ورک‌های معرفی شده از طرف کاربران

لیست بالا٬ لیستی از پراستفاده‌ و محبوب‌ترین فریم‌ورک‌ها بود اما در این قسمت٬ تعدادی از فریم‌ورک‌هایی که کاربران وب‌تارگت پیشنهاد کردند را به شما معرفی می‌کنیم.

Amazium

gumby

Simplegrid

gumby

YAML

gumby

Kube

gumby



نویسنده / مترجم : علی طبیب زاده


50 دیدگاه برای این نوشته ثبت شده است


  1. بابک
    1 January 2013


  2. محسن
    1 January 2013

    خیلی ممنون.
    فکر کنم 960گرید رو جا انداختین
    http://960.gs/



    • ممنون از نظرتون. گرید ۹۶۰ سیستم خوب و معروفی است. اما هدف ما در اینجا معرفی گریدهای ریسپانسیو بود.
      موفق باشید.




  3. Hesam
    1 January 2013

    Skeleton و Foundation رو قبلا کار کرده بودم که حالا چندتا فریم ورک جدید شناختم




    • lili
      22 February 2015

      من اصلا نمیدونم چجوری از کدهاش استفاده کنم!!! فقط bootstraop رو دانلود کردم!!! کمکم کنید لطفا.سایتی ک طراحی کردم با html5وcss!!!



  4. اینا خوب هستند.
    به نظر من اما در مواقعی که قراره یک سایتی با تعداد صفحات بالا و پیچیده طراحی کنیم بهتره از این فریم ورک ها استفاده کنیم.
    من خیلی از طراح های ایرانی رو می بینم که برای یک سایت ساده از این فریم ورک ها استفاده می کنن و توی Head صفحه بیشتر از 4 یا 5 تا css و js قرار می دن.
    نظر شما چیه ؟




    • امیر سروری
      2 January 2013

      ممنون فرزین عزیز . معمولا فریم ورک ها به قسمت های مختلفی تقسیم بندی میشن و مثلا میشه برای گرید بندی فقط قسمت گرید رو ایمپورت صفحه کرد و ازش استفاده کرد . اما در کل به نظر من در بعضی از موارد این فریم ورک ها دست و پای طراح رو می بندن و ممکنه روی خلاقیت طراح وب تاثیر بزارن . اما برای پروژه های تجاری و وب سایتهایی که نیازی به کار سنگین ندارن مناسبه . هر تکنولوژی اگر با تفکر مورد استفاده قرار بگیر قطعا خوب خواهد بود .




  5. حسین
    2 January 2013

    مخلص علی آقا خیلی خوب بود



  6. سلام و خسته نباشید.
    .میتونم بپرسم فریم ورک هایی که توی جوملا ازش استفاده میشه فریم ورک های جداگانه است یا از همین فریم ورک ها استفلده شده..ممنون متشکر.
    اگر منبع خاصی برای آشنایی با فریم ورک ها دارید ممنون میشم بذارید .متشکر




    • امیر سروری
      2 January 2013

      ممنون حسین جان ، اینها فریم ورک های سی اس اسی هستند و البته فکر میکنم منظور شما از فریم ورک هایی که در جوملا استفاده میشه ، مواردی مثل k2 یا gantry هستن ! که کلا فلسفشون با این فریم ورک ها متفاوته . اما در جدیدترین نسخه جوملا از فریم ورک سی اس اس bootstrap استفاده شده .




      • امین
        2 March 2013

        سلام آقای سروری فریم ورک های جوملا زیاد با این فریم ورک ها تفاوت نداره فقط کد هاشون به جای اینکه خالی css و js باشه یه دونه php هم داره که خوب برای cms ها داشتن این فایل برای تعریف متغیر ها و … ضروری هست ، فریم ورک گانتری فریم ورک چندان جالبی نیست چون کلی باگ داره که باید رفع بشه و کمی کار باهاش برای مبتدی ها سخته اگر کسی جوملایی هست توصیه می کنم از فریم ورک t3 شروع کنن چون کار باهاش آسون تر از بقیه هست
        بازم ممنون از این مطلبتون




  7. مهسا کیانی
    2 January 2013

    مرسی

    این 2 تا هم هست

    YAML
    http://www.yaml.de

    Simplegrid
    http://simplegrid.info



  8. مطلب مفیدی بود
    ممنون




  9. عارف موسوی
    2 January 2013

    عالی بود
    مرسی علی جان




  10. مهراد
    3 January 2013

    http://csshor.us

    راست به چپ رو هم به خوبی پشتیبانی میکنه
    توسعه دهندش خیلی آدم باحالی هست :)

    https://github.com/firminoweb/csshorus




  11. سوران خضری
    3 January 2013

    بسيار مطلب خوبي بود




  12. علیرضا
    4 January 2013

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




  13. نیتاران
    5 January 2013

    من تازه با سایت شما آشنا شدم بهتون تبریک میگم بینظیره




  14. رادمنش
    6 January 2013

    آموزش های creativity tuts توی یوتوب هست که بد نیست ببینیدش
    اینم سایتش : creativitytuts.org




  15. امیر
    8 January 2013

    جای فریم ورک kube هم خالیه، پیشنهاد میشه:
    kubeframework.com



    • سلام
      ممنون از پیشنهادتون دوست عزیز. به نوشته اضافه شد.
      اما چیز جالبی که توی این فریم‌ورک به چشمم خورد این بود که سایت خودشون ریسپانسیو نبود ;)

      موفق باشید.




  16. سعید
    9 January 2013

    خوب و مفید ! ممنون




  17. big man
    10 January 2013

    bootstrap حرف نداره




    • علی اقدام
      8 April 2013

      سلام.چطوری با این ها کار کنیم؟لطفا پاسخ هید




  18. کامیار نویدان
    11 January 2013

    لطفا در مورد پشتیبانی این فریم‌ورک‌ها از راست به چپ توضیح بدین.

    مثلا در مورد Foundation می‌دونم که خودش راست به چپ رو (بر خلاف بوت‌استرپ) پشتیبانی می‌کنه.




  19. علی اکبر
    1 February 2013

    سلام
    کدومشون فارسی شده هست ؟
    کدومشون rtl ساپورت میکنه
    درسته که همشون خوب هستند اما برای استفاده در سایتهای فارسی کدوم ساده تر و کاربردی تر هست ؟




  20. علی جانلو
    18 February 2013

    بسیار جالب و خواندنی، آشنا شدیم. ممنون :)




  21. مهدی
    4 March 2013

    بسیار بسیار عالی. واقعا مفید بود




  22. vira
    24 April 2013

    ممنون. جالب بود من چیزی در موردش نمیدونستم.
    فقط مشکل اینه که هر کدوم از این فریم ورک ها رو خیلی باید باهاش کار کرد و کلاس های css اش رو بخاطر سپرد یکم وقت گیر هست.
    دوستان چطوری استفاده میکنید؟ من Bootstrap رو گرفتم نگاهی کردم خیلی شلوغ هست و حوصله سر بره. آیا باید همینطور یادش گرفت یا اینه نه من درست نفهمیدم نحوه ی استفاده رو؟
    البته فقط 5 دیقه بیشتر روش وقت نذاشتم ولی اصلا آدم ترجیح میده خودش تمام مسائل ریسپانسیور رو یاد بگیره با این فریم ورکا سروکله نزنه!



    • استفاده از یک فریم‌ورک ممکنه فقط بخاطر ریسپانسیو بودن اون نباشه٬ بلکه خیلی از امکانات دیگه‌ای که فریم‌ورک‌ها در اختیار طراحان قرار می‌دن می‌تونه دلیل خیلی خوبی باشه که ما برای سرعت و راحتی بیشتر سراغ اونها بریم.
      خب قطعا نه تنها ۵ دقیقه اول٬ بلکه زمان خیلی طولانی‌تری مثل روزهای اولی که با یک فریم‌ورک کار می‌کنید صرف آشنا شدن و به خاطر سپردن امکانات و نحوه استفاده ازشون می‌شه.
      مسائل مربوط به طراحی ریسپانسیو یک بحثه٬ استفاده از فریم‌ورک‌های ریسپانسیو بحث دیگه‌ای هست. برای مثال موقع استفاده از گریدها و خصوصا امکان Fluid Grids یا گریدهای شناور خیلی توی ریسپانسیو کردن یک طرح مفید هست و دقت بالاتری به ما می‌ده اما پیاده کردنش کار خیلی ساده‌ای نیست که بخواهیم برای طرح‌های ریسپانسیو هر دفعه کار زمان‌بر و سختی هست. پس اگر بخواهیم از گریدها استفاده کنیم٬ فریم‌ورکها گزینه خوبی برای ما هستند.




  23. masoud
    8 May 2013

    سلام
    آقای سروری میخواستم بدونم وبتارگت از کدوم فریم ورک استفاده کرده ؟!



    • مسعود جان توی وبتارگت فریم ورک های سی اس اس متداول استفاده نشده /




      • masoud
        9 May 2013

        هرچی که استفاده شده خوب بوده …
        نمیخواهید اموزش جامع بزارید از ریسپانیسو ؟!

        یه زمان میخواستم بیام پیشتون استخدام شم …
        دیگه طراحه وب نمی خواهید ؟!
        فکر کنم واسه lastseccond بود آگهیش …




  24. کمیل
    20 May 2013

    درود و تشکر از وبسایت خوب و مفیدتون اگه ممکن هست یه آموزشی در مورد ریسپانسیو کردن تو سایت قرار بدید :دی چون هیچ جا پیدا نکردم (نیست)




  25. رها امیر چرمهینی
    21 May 2013

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

    با تشکر وارزوی توفیق




  26. گلمر
    18 December 2013

    با سلام

    خیلی خیلی ممنون از مطلب خوبتون، خیلی کارم گیر بود و واقعاً به یه همچین چیزی نیاز داشتم. ایشالا خدا خیرتون بده، کلی دعاتون کردم.

    خیر از جوونیت ببینی پسرم.




  27. طراحی سایت
    30 December 2013

    اطلاعات مفید و جامعی بود ممنون




  28. کاناپه بادی
    17 February 2014

    با تشکر از مطالب خوبتون




  29. محمد
    23 May 2014

    استفاده کردم ممنون از مقاله تون




  30. Hossein
    15 August 2014

    سلام

    کدوم از اینا RTL رو ساپورت میکنن؟!
    بوت استرپ که خیلی خوبه ولی نمیکنه و ورژن 2 رو یک بنده خدایی تا یک جاهایش RTL کرده اما اگه یکیشون از بیس RTL هم باشه اخرشه!

    نظر شما چیه!>؟




  31. masoud
    6 October 2014

    مطلب جامعی بود.




  32. علیرضا نامجو
    6 November 2014

    سلام
    وب سایت خودتون از چه فریم ورکی استفاده کرده؟
    سیستم که وردپرس هست اما قالب ریسپانسیو هست از چی استفاده شده؟




  33. جواد
    17 May 2015

    ببخشید من فریم ورک فاوندیشن رو گرفتم اما فقط توی یک صفحه دو سه تا استایل برای فرم و … هستش آیا همش همینه یا فراتر از اینهاست؟




  34. milad
    31 January 2016

    ui kits چرا نیست ؟؟؟ :/




  35. حسینی
    11 April 2016

    واقعا جای تشکر داره



دیدگاه خود را بنویسید





نشانی ایمیل شما منتشر نخواهد شد.

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

لطفا دیدگاهتان تا حد امکان مربوط به پست بالا باشد. اگر حرف دیگری دارید و یا قصد تماس با من را دارید، از فرم تماس استفاده کنید.

شما میتوانید با مراجعه به سایت گراواتار یک آواتار اختصاصی برای خود تعریف کنید، تا در کنار نام شما نمایش داده شود

برای قرار دادن کدهای نمونه می توانید از تگ های [php] ، [html] ، [css] و [js] استفاده کنید.
به عنوان مثال کدهای php را می توان به صورت زیر قرار داد:
[php] var $whoLoveIranians = "WebTarget!"; [/php]



کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2024 وب‌تارگت

استفاده از مطالب وب سایت در سایر وب سایت‌ها و نشریات چاپی با ذکر منبع آزاد است.