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

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


علی طبیب زاده ۵۰ دیدگاه CSS , اصول طراحی وب سایت سه شنبه, ۱۲ام دی , ۱۳۹۱ 36950 بازدید

با ظهور پدیده طراحی وب واکنش‌گرا یا 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

۳۲۰ and Up

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

Less Framework

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

۱۱۴۰px CSS Grid System

طراحی یک ساختار ریسپانسیو یا واکنش‌گرا فقط به این معنا نیست که شما برای سایزها و رزولوشن‌های پایین‌تر هم طراحی می‌کند٬ بلکه شما می‌توانید طرح خود را برای یک سایز بسیار عریض و بزرگ در یک ساختار حداکثری طراحی کنید و در همان حال طرحتان برای اندازه‌های معمولی دسکتاپ نیز به خوبی نمایش داده شود. فریم‌ورک ۱۱۴۰ grid به شما طراحان وب این قابلیت را می‌دهد تا بتوانند یک طرح مناسب برای نمایشگرهای با رزولوشن ۱۲۸۰px طراحی کرده و به خوبی برای هر سایز کوچکتری در مقیاس خودش تغییر اندازه دهد و کار کند.
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



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


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


  1. بابک
    ۱۲ دی ۱۳۹۱


  2. محسن
    ۱۲ دی ۱۳۹۱

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




    • علی طبیب زاده
      ۱۳ دی ۱۳۹۱

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




  3. Hesam
    ۱۲ دی ۱۳۹۱

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




    • lili
      ۳ اسفند ۱۳۹۳

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




  4. فرزین سیف الهی
    ۱۲ دی ۱۳۹۱

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




    • امیر سروری
      ۱۳ دی ۱۳۹۱

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




  5. حسین
    ۱۳ دی ۱۳۹۱

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




  6. حسین کردآبادی
    ۱۳ دی ۱۳۹۱

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




    • امیر سروری
      ۱۳ دی ۱۳۹۱

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




      • امین
        ۱۲ اسفند ۱۳۹۱

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




  7. مهسا کیانی
    ۱۳ دی ۱۳۹۱

    مرسی

    این ۲ تا هم هست

    YAML
    http://www.yaml.de

    Simplegrid
    http://simplegrid.info




  8. علی حدادکار
    ۱۳ دی ۱۳۹۱

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




  9. عارف موسوی
    ۱۳ دی ۱۳۹۱

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




  10. مهراد
    ۱۴ دی ۱۳۹۱

    http://csshor.us

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

    https://github.com/firminoweb/csshorus




  11. سوران خضری
    ۱۴ دی ۱۳۹۱

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




  12. علیرضا
    ۱۵ دی ۱۳۹۱

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




  13. نیتاران
    ۱۶ دی ۱۳۹۱

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




  14. رادمنش
    ۱۷ دی ۱۳۹۱

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




  15. امیر
    ۱۹ دی ۱۳۹۱

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




    • علی طبیب زاده
      ۲۱ دی ۱۳۹۱

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

      موفق باشید.




  16. سعید
    ۲۰ دی ۱۳۹۱

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




  17. big man
    ۲۱ دی ۱۳۹۱

    bootstrap حرف نداره




    • علی اقدام
      ۱۹ فروردین ۱۳۹۲

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




  18. کامیار نویدان
    ۲۲ دی ۱۳۹۱

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

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




  19. علی اکبر
    ۱۳ بهمن ۱۳۹۱

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




  20. علی جانلو
    ۳۰ بهمن ۱۳۹۱

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




  21. مهدی
    ۱۴ اسفند ۱۳۹۱

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




  22. vira
    ۴ اردیبهشت ۱۳۹۲

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




    • علی طبیب زاده
      ۴ اردیبهشت ۱۳۹۲

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




  23. masoud
    ۱۸ اردیبهشت ۱۳۹۲

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




    • امیر سروری
      ۱۸ اردیبهشت ۱۳۹۲

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




      • masoud
        ۱۹ اردیبهشت ۱۳۹۲

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

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




  24. کمیل
    ۳۰ اردیبهشت ۱۳۹۲

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




  25. رها امیر چرمهینی
    ۳۱ اردیبهشت ۱۳۹۲

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

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




  26. گلمر
    ۲۷ آذر ۱۳۹۲

    با سلام

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

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




  27. طراحی سایت
    ۹ دی ۱۳۹۲

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




  28. کاناپه بادی
    ۲۸ بهمن ۱۳۹۲

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




  29. محمد
    ۲ خرداد ۱۳۹۳

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




  30. Hossein
    ۲۴ مرداد ۱۳۹۳

    سلام

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

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




  31. masoud
    ۱۴ مهر ۱۳۹۳

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




  32. علیرضا نامجو
    ۱۵ آبان ۱۳۹۳

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




  33. جواد
    ۲۷ اردیبهشت ۱۳۹۴

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




  34. milad
    ۱۱ بهمن ۱۳۹۴

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




  35. حسینی
    ۲۳ فروردین ۱۳۹۵

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



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





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

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

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

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

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



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

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