3 رائعة إطارات CSS أنت لا تريد أن تفوت
أنا شخصياً أفضل أن أبدأ في كتابة أي مشروع باستخدام شبكة ، وأن أبني من هناك. أنا من الصعب إرضاءه من هذا القبيل ، وأنا أحب أن يكون السيطرة على أكبر عدد ممكن من المتغيرات.
هناك أوقات ، ومع ذلك ، عندما يكون هذا غير عملي. ربما كنت تبني تطبيقًا أو موقعًا كبيرًا ومعقدًا بشكل استثنائي. ربما لا يتوفر لديك الوقت اللازم لتصميم كل عنصر من البداية ، ولا تحتاج إلى ذلك. هذا عندما تريد إطار عمل كامل ، مع إضافات.
حسنًا ، لقد كتب الكثير عن أطر "الاسم الكبير" ، وهي Bootstrap ، و Foundation ، و Gumby ، لذا لن نتحدث عن هؤلاء هنا. لقد لعبت wi ... أعني اختبار صارم لثلاثة من الخيارات الأقل شهرة. إلقاء نظرة ، واحد منهم قد يكون بالضبط ما تحتاجه.
كوبي
كوبي هو بالتأكيد أداة للمطورين الأمامية الحديثة. يتم دعم المتصفحات الحديثة فقط و IE9 +. الأنماط الافتراضية هي جميلة ، ولكن لطيف بما فيه الكفاية ليتم تكييفها للاستخدام مع أي علامة تجارية تقريبا.
باختصار ، إنه إطار جيد المظهر وسهل وبسيط ، مصمم بسمات بصرية شبه عالمية ، ويقصد به التخصيص الثقيل.
المميزات
لوصف كل الميزات في العمق ، أو حتى مجرد سردها كلها ، من المحتمل أن تأخذ مساحة كبيرة في هذه المقالة ، لذا سأعطيك النقاط البارزة: الإطار نفسه هو LESS-based ، و modular. إذا كنت تريد كل شيء باستثناء أنماط الأزرار ، على سبيل المثال ، فمن الأمور البسيطة جدًا "تجميع" الخاصة بك. ما عليك سوى إزالة القاعدة import المقابلة من kube.less والانتقال. من الأسلم أن نقول أن هناك أنماطًا لكل عنصر HTML يمكنك التفكير فيه ، والإضافات المعتادة مثل الأزرار ، وأشرطة التنقل الأساسية ، وفئات المساعد ، ونظام تخطيط الشبكة الصلبة.
بمعنى من المعاني ، يتم تعريف Kube جزئيا بما لا تملك. على سبيل المثال ، ليس لديها فائض من عناصر واجهة المستخدم وأنماط إضافية. لا توجد ملحقات jQuery لوظائف واجهة المستخدم على الإطلاق. وبالتأكيد لا يأتي الانطباع بأنك "عالق" مع أي منها.
استنتاج
Kube هو عرض قوي. لم يبخل منشئوه على الأساسيات ، ولكن هناك إحساس واضح "فقط ما تحتاجه" يأتي مع هذا الإطار. إنه مكان جيد للبدء ، ولذا فهو يجسد الغرض الحقيقي لأي إطار عمل. لون لي معجب.
إطار IVORY
عاج، مثل Kube ، تم تصميمه ليكون مفهوما بسهولة ويتم تنفيذه بسرعة. تبدو الطباعة جيدة ، ولكنها غير كافية للاستخدام مع أي مشروع تقريبًا ، كما أن الأنماط الافتراضية العامة أيضًا.
إنه إطار مصمم لإعطائك ما يكفي للبدء ، وبعض الإضافات.
المميزات
الميزات هي ما تتوقعه عادةً: نظام شبكة صلب ومرن ، وأنماط للطباعة وجميع الأشكال ، وما إلى ذلك. ومع ذلك ، تختلف IVORY عن Kube في أنه يتم منحك بعض عناصر واجهة المستخدم الإضافية: الأزرار ، مربعات التنبيهات ، ترقيم الصفحات ، مفاتيح التبديل ، تلميحات الأدوات ، التنقل التنقل ، علامات التبويب ، والأكورديون.
ما يميز مكونات واجهة المستخدم هذه بعيدًا عن العديد من المكونات الأخرى هو أنها كلها مطبقة باستخدام CSS3 ، ولا توجد جافا سكريبت. السبب الوحيد لربط واجهة المستخدم jQuery على الإطلاق هو جعل منتقي التاريخ يعمل.
شيئان فقط لا أحبهما: بعض أنماط عناصر واجهة المستخدم تذكرنا جدًا بأنماط Bootstrap 2.0. لذا ، ربما تريد تغيير ذلك. بالإضافة إلى ذلك ، يتطلب نظام الشبكة استخدام فئة إضافية في العمود الأخير في أي صف ؛ أنا فقط أكره ذلك.
استنتاج
هذان التحذيران صغيران جانبا ، IVORY الإطار هو خيار جيد لأي عدد من المشاريع. إنها ليست أكثر الخيارات القابلة للتخصيص بسهولة ، ولكن إذا كنت تحتاج فقط إلى البدء بمجموعة جيدة من الإعدادات الافتراضية ، وبعض مكونات واجهة المستخدم الإضافية ، قم بإعطائها دوامة.
قاعدة
قاعدة، بواسطة ماثيو هارتمان ، يأخذ نهج أكثر عصرية إلى حد ما (في لحظة ، في أي حال) إلى إطار CSS. مرتكز على Normalize.css ، ويبدأ مع خطوط العنوان رقيقة ، ومربعات مسطحة للأزرار. لا يوجد إنكار أن الأنماط الافتراضية جميلة بشكل واضح.
قد لا يكون هذا مرغوبًا لدى الجميع ، اعتمادًا على مخاوف العلامة التجارية ، ولكنه بسيط بما يكفي للتغيير. بعد كل شيء ، الأساس هو كل شيء عن التخصيص.
المميزات
يتم توفير القاعدة في كل من نسختين LESS و SASS ، بحيث يمكنك تغيير المتغيرات بسرعة و "إعادة تجميعها" لتناسب احتياجاتك. تتضمن المتغيرات المضمنة أحجام الخطوط ونقاط الانكسار وعرض الحاوية الرئيسي لكل نقطة فاصل وأكثر من ذلك.
يتم توفير الكثير من الفصول الإضافية لمساعدتك في إعداد التنسيقات الخاصة بالجوال ، وهناك "mixins" في ملف منفصل لمساعدتك في طريقك.
مثل Kube ، لا توجد مكونات إضافية لواجهة المستخدم تتعدى المكونات التي تأتي مع HTML بشكل افتراضي ، لذلك إذا كنت تريد واجهات مبوبة ، أكورديون ، وما شابه ذلك ، سيكون عليك جعلها بنفسك. يبدو أن القاعدة موجهة نحو إنشاء مواقع ويب جميلة بدلاً من تطبيقات الويب .
استنتاج
إذا كنت تنشئ موقعًا لا يحتاج إلى الكثير من مكونات واجهة المستخدم المخصصة للتطبيق ، فإن Base هو مورد رائع. الصفحات التي تم إنشاؤها بها تبدو بالفعل جميلة ؛ ولكن إذا لم تعجبك الأنماط الافتراضية ، فلن يكون من الصعب تغييرها.
