marvelapp/devices.css
Devices.css
devices.css هي مكتبة من مكونات CSS النقية تُستخدم لعرض إطارات الأجهزة سريعة الاستجابة ونماذج الأجهزة. توفر مجموعة من الأنماط التي تنشئ تمثيلات مرئية للهواتف الذكية والأجهزة اللوحية وأجهزة الكمبيوتر المحمولة دون استخدام صور خارجية أو JavaScript.
يُمكّن المشروع من محاكاة حدود الأجهزة والحواف من خلال نظام من الإطارات والنماذج القائمة على CSS. تسمح هذه المكونات بتصور التصميمات سريعة الاستجابة ومكونات واجهة المستخدم عبر أحجام شاشات ونماذج أجهزة مختلفة.
تستخدم المكتبة خصائص CSS المخصصة لتصميم الألوان والأبعاد، وتوظف وحدات نسبية وعناصر زائفة لعرض تفاصيل الأجهزة مثل عدسات الكاميرا وشبكات السماعات. تدعم هذه الأنماط اتجاهات الأجهزة المختلفة وتبديل النماذج عبر فئات CSS.
Features
- CSS Hardware Frames - Implements realistic hardware borders and bezels using standard CSS declarations to wrap web content.
- CSS Hardware Simulations - Builds lightweight visual models of mobile devices using only CSS to avoid heavy image assets.
- Hardware Shell Mockups - Provides realistic device bezels and frames to showcase how applications appear on different screen sizes.
- Device Mockup Frames - Creates visual representations of smartphones, tablets, and laptops using customizable CSS frames.
- CSS Variable Theming - Uses CSS custom properties to allow dynamic theming of device colors and physical dimensions.
- Responsive Design - Allows visualization of how responsive designs adapt to various phone and tablet models within one layout.
- Hardware Detail Rendering - Employs before and after pseudo-elements to create detailed hardware features like camera lenses and speaker grills.
- CSS-Only UI Components - Ships visual interface elements and device wrappers that require no images or JavaScript to render.
- Relative Layout Dimensions - Uses relative units like percentages and ems to maintain proportional device aspect ratios across screen sizes.
