إطار عمل CSS (CSS framework) هو إطار عمل معد مسبقا يتيح تصميم مواقع الويب بطريقة أسهل وأكثر توافقًا مع المعايير باستخدام لغة صفحات الطرز المتراصة. معظم هذه الأطر تحتوي على الأقل على شبكة. الأطر الأكثر وظيفية تأتي أيضا مع المزيد من الميزات الإضافية ووظائف مبنية على لغة جافا سكريبت، ولكن في الغالب تكون موجهة للتصميم وغير مزعجة. هذا يميزها عن أطر جافا سكريبت الوظيفية الكاملة.
اثنين من أبرز وتستخدم على نطاق واسع أمثلة Bootstrap و Foundation.
توفر أطر CSS وحدات وأدوات مختلفة:
- الشبكة وخاصة بالنسبة للتصميم المستجيب لمواقع الويب
- الطباعة على شبكة الإنترنت
- مجموعة من الرموز على شكل نقش متحرك أو أيقونة خطوط
- تصميم التلميحات والأزرار
- أجزاء من واجهات المستخدم الرسومية مثل: علامات التبويب وعرض الشرائح
- التعادل لخلق محتوى متساوية الطول
- غالبا ما تستخدم فصول CSS مساعد (right, left)
قائمة أطر عمل CSS المشهورة
| الاسم | Latest release (Date) | الترخيص | الاعمدة | الوحدات | المميزات | عددالاعمدة |
|---|---|---|---|---|---|---|
| Blueprint | 1.0.1 (May 14, 2011) | ترخيص MIT | Typography, forms, print. plugins for buttons, tabs and sprites. | |||
| بوتستراب | 4.1.3 (July 24, 2018) | ترخيص MIT (رخصة أباتشي قبل 3.1.0) |
fixed, fluid, responsive | px, % | Layout, typography, forms, buttons, navigation, media queries + more, + .sass files + js libraries | Any, default 12[1] |
| wellcome css | 3.2.1 (July 07, 2018) | مجاني | Fully Responsive | px, % | Typography, Text Decoration / Font Decoration, Text Color, Text Align, Background Color, Grid System, Nav Bar, Button, Box, Title Box, Panel, Message Box, Table Structure, Circle-Radius, Plugins, Gradient Generator, Image Responsive, Image Effects, Hover Effects, Align, Progress Bar, Breadcrumb, Pagination, Badges, Tag, List, Form, Help Class, Flexbox, Slider, Photo Gallery, Offset Fix, Closeable Box, Modal, Accordion with plus minus, Tab, Dropdown, Mobile Menu, Filter | 12 Grid [2] |
| Cascade Framework | 1.5 (August 28, 2013) | ترخيص MIT | fixed, elastic, fluid, responsive | px, % | Grid, layout, typography, forms, buttons, media queries + more | Any |
| مؤسسة (إطار برمجة) | 6.5.1 (November 15, 2018) | ترخيص MIT | fluid | px, % | Responsive Layout, source ordering, typography, forms, buttons, navigation, media queries, js libraries | Any, default 12[3] |
| YAML | 4.1.2 (July 28, 2013) | CC-BY 2.0 | fixed, elastic, fluid | px, em, % | Layout, grids, columns, forms, buttons, progressive linearization for responsive layouts, float handling, navigation, typography, accessibility, add-ons (accessible tabs, rtl-support, microformats) | Any |
| YUI CSS grids | 3.18.1 (October 22, 2014) | BSD-3 | fixed and fluid | |||
| CSS Framework | 1.1 (September 1, 2018) | ترخيص MIT | fixed, fluid, responsive | px, rem, % | Layout, grid, buttons, typography, helpers, media queries, navigation + more | Any, default = 12 coll |
مراجع
- Bootstrap documentation - Customizing the grid - تصفح: نسخة محفوظة 11 ديسمبر 2018 على موقع واي باك مشين.
- www.wellcomecss.com - تصفح: نسخة محفوظة 14 أكتوبر 2018 على موقع واي باك مشين.
- Foundation documentation - The Grid - تصفح: نسخة محفوظة 17 سبتمبر 2017 على موقع واي باك مشين.