1394/9/30

معرفی فریم ورک های سی اس اس

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

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

فریم ورک بوت استرپ


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

فریم ورک فنداسیون


Skeleton:
یا همان اسکلت یکی از فريم ورک‌های سبکی است که بر اساس یک سیستم گرید (شبکه بندی) ساده ساخته شده است. گرید Skeleton به زیبایی از 1200 پیکسل تا اندازه موبایل ها و تبلت ها در دو حالت Landscape و Portrait با مقیاس مشخص، تغییر اندازه می دهند.


Golden Grid System:
اگر شما علاقه خاصی به گریدها دارید، بی شک ارتباط خوبی با Golden Grid System برقرار خواهید کرد. اين ساختار با یک گرید که دارای 18 ستون است با marginها و حاشیه های تمیز شروع می کند اما به زیبایی هنگام تغییر اندازه نمایشگر به ساختار 8، 4 ،يا 2 ستونه برای تبلت ها و موبایل ها تبدیل می شود.

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

Less:
Less يک فريم ورک کلاسیک است که بر اساس ساختار گرید ساده و ثابت در عرض تطابقی (Adaptive) عمل می کند، ساخته شده است. Less 4 ساختار آماده و 3 نوع تایپوگرافی از پیش تنظیم شده برای نمایش مناسب در دسکتاپ، تبلت‌ها، موبایل‌ها را در خود دارا است.
 

less framework


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

Wirefy:
ایده و مفهوم یک طرح واکنشگرا یا رسپانسیو همیشه برای مشتریان و کاربران معنی دار نیست، و ساخت و ايجاد مفاهیمي که به آنها چگونگی و کلیّت کار آن را نشان دهد عملی وقت گیر است. با ورود به Wirefy و استفاده از آن (که فريم ورکي رسپانسیو برای ساخت Wireframeها است) ساختن مدل ها برای ساختار کلی سایت با عناصری مانند اسلایدرها، گالری ها، منوها ،و فرمها را آسان می سازد.

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


علاوه بر اینها نیز فرم ورکهای زیادی برای CSS هست، ولی در لیست بالا پراستفاده‌ ترین و محبوب ترين فريم ورک‌ها لیست شده اند که می توانید بسته به نیاز خود از آن ها در کارهایتان استفاده کنید.

نظرات
2 0
وحید الوندی   http://webineh.net 1395/5/15 21:29:24

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

خوشبختانه قدم های خوبی در زمینه نرم افزار ایران برداشته شده است و دوستان گرامی که از این کارها و پروژه های هرچند کوچک حمایت کنند و آن را نشر دهند زیربنای تغییرات بزرگی در آینده برای صنعت نرم افزار کشور عزیزمان باشد را رقم بزنند. از این رو در مستندات فریم ورک به جزئیات دقیقی از CSS می پردازیم و برای کسانی که میخواهند یک فریم ورک سریع و سبک را خیلی زود یاد بگیرند بسیار کاربردی است و میتوان از ان در پروژه های تجاری و غیرتجاری رایگان استفاده کنند.

وب سایت اصلی این فریم ورک در آدرس roxana.webineh.net قرار دارد و در 2 زبان فارسی و انگلیسی معرفی خواهد شد.

برای دانلود آخرین نسخه فریم ورک به صفحه Github توسعه دهنده مراجعه نمایید.

https://github.com/vahidalvandi/roxana

حروف تصویر