كيف لاختطاف HTML الخاص بك
الهدف الرئيسي لجميع المطورين هو تطوير أسرع ، وخاصة bootstrapping السريع. هناك العشرات من الأطر المتاحة في العامين الماضيين والتي تهدف إلى الحصول على نماذجنا الأولية في دقائق.
وللأسف ، فإن العديد من هذه الأطر يرجع تاريخها بسرعة ، مع تطور متطلبات المشروع ، ويجب تحديثها أو استبدالها.
إذا كنت تبحث عن إطار حديث يعمل على حل المشكلات التي تواجهها الحلول القديمة الآن ، في حين لا يزال يمكنك زيادة تدفق العمل إلى أقصى الحدود ، فلا يمكنك الذهاب إلى ما هو أبعد من ذلك HTML كيكستارت.
الشبكة
تعد الشبكة أحد أهم جوانب أي إطار ، خاصة أن الشبكة المرنة تحدد مدى استجابة الموقع.
يوفر لك HTML Kickstart خيار شبكة مرنة أو شبكة قياسية (غير مرنة) - على الرغم من أنه ليس من الواضح متى ستستخدم هذه الأخيرة في ضوء الهيمنة المتزايدة للأجهزة المحمولة.
لإنشاء شبكة مرنة ذات عمودين متساويين الحجم ، سنستخدم:
Content HereContent Hereكما ترى ، كل ما قمنا به هو إضافة بعض الفصول البسيطة إلى ثلاثة أقسام. إذا كنت تفضل الشبكة غير المرنة ، فكل ما عليك فعله هو إزالة اسم الفئة المرن من div الخارجي.
(لاحظ أن الشبكة المرنة سوف تمتد إلى عرض الشاشة بأكملها ، في حين أن الشبكة غير المرنة لديها أقصى عرض يبلغ 1024 بكسل.)
بالإضافة إلى الفئات المعتمدة أعلاه ، هناك عدد من فئات المساعد التي يمكننا استخدامها ، على سبيل المثال:
- عرض سطح المكتب وإخفاء سطح المكتب مع هذه الفئات يمكنك تحديد ما إذا كنت تريد أن تكون هذه الشبكة مرئية على كمبيوتر سطح المكتب.
- ينطبق ذلك على الكمبيوتر اللوحي ، وإخفاء الكمبيوتر اللوحي ، ينطبق نفس المفهوم هنا ، ولكن أيضًا على الأجهزة اللوحية.
- عرض الهاتف والهاتف المحمول مرة أخرى ، هذه الفئات تملي الرؤية ، وهذه المرة للهواتف الذكية.
إذا أردنا إخفاء شبكتي الأعمدة على الهواتف الذكية ، على سبيل المثال ، فسنستخدم رمزًا كالتالي:
التنقل
يعطينا HTML Kickstart ثلاثة خيارات قائمة: اليسار الرأسي ، والحق الرأسي والأفقي.
الإصدار الذي تريده كثيرًا هو القائمة الأفقية. لتشفيرها ، نحتاج فقط إلى قوائم غير مرتبة:
إذا كنت تريد قائمة يسارية رأسية ، فما عليك سوى إضافة رأسي إلى الفتحة ul ، وإذا كنت تريد قائمة رأسية على اليمين ، فأضف اليمين الرأسي ، مثل:
انها حقا بسيطة أن رمز القوائم تستجيب مع HTML Kickstart.
الأنماط الافتراضية
HTML Kickstart يعطيك بعض الأنماط الأساسية الرائعة من الخارج. من الواضح أنك ستحتاج إلى تحسينها لمشروعك ، ولكن بالنسبة للنماذج الأولية السريعة ، فهي أكثر من كافية.
عندما يتعلق الأمر الطباعة يستخدم HTML KickStart ستيف ماتيسون الصورة Arimo الخط بشكل افتراضي. يمكنك رؤية النطاق الكامل لإعدادات النوع هنا.
أنماط الأزرار هي دائما مركز الكثير من الاهتمام في أي إطار ، و HTML Kickstart يأتي مع أزرار في جميع الأشكال والأحجام. لا تحتاج حتى إلى استخدام فصول لهذا ، فقط قم بإنشاء علامة زر وسيتم تطبيق الأنماط تلقائيًا.
إذا كنت تفضل تطبيق أنماط الأزرار على علامة الربط ، فما عليك سوى إضافة فئة الزر إليها:
يمكننا أيضا تطبيق الألوان بسهولة. ما عليك سوى إضافة اسم اللون الذي تريده:
هناك أيضًا عدد من الأساليب المختلفة التي يمكننا تطبيقها:
وأخيرًا ، لدينا أيضًا خيار إنشاء شريط زر ، مع بناء جملة مماثل للقائمة الأفقية:
صور
يساعد HTML Kickstart على تحسين تجربة المستخدم عن طريق إنشاء نوافذ منبثقة للعروض والصور. إنه حل أفضل بكثير من فتح نافذة جديدة.
لإنشاء معرض منبثق قائم على جافا سكريبت يعمل بكامل طاقته ، كل ما نحتاجه هو الرمز التالي:
إنها سهلة التنفيذ ، ولم تكن بحاجة إلى سطر واحد من JavaScript.
تحتوي الصور أيضًا على بعض فصول المساعدة الرائعة ، مثل التسمية التوضيحية. تُظهر هذه الفئة المطبقة على صورة عنوان الصورة كتسمية توضيحية نصية:
لدينا أيضًا صفوف من اليمين واليسار التي يمكن استخدامها لتعويم الصور إلى اليسار واليمين. (سيضيف HTML Kickstart هامشًا صغيرًا بحيث لا تكون الصور متناسبة مع النص).
وبالطبع ، يوفر لك HTML Kickstart أيضًا عروض شرائح بسيطة. يستخدم BXSlider شريط التمرير للتعامل مع هذا.
سيبدو رمز شريط التمرير البسيط كالتالي:
A Content Slider
This slider handles HTML content as well as images.
شريط التمرير مفعّل باللمس لأجهزة الجوال ، ومرة أخرى ، لم تكن بحاجة إلى سطر واحد من JavaScript.
إستمارات
آخر شيء أرغب في تعريفك به هو النماذج. تعتبر النماذج ضرورية لأي إطار ، لأنها واحدة من أصعب الأشياء التي يمكن وضعها على صفحة الويب.
يحافظ HTML Kickstart على بساطته عندما يتعلق الأمر بالنماذج ، ويمكن إنشاء نموذج رأسي ببساطة مثل:
كما ترون ، بالكاد اضطررت لاستخدام أي دروس على الإطلاق لهذا النموذج. كل ما قمت به هو إضافة الطبقة الرأسية في الأعلى بحيث لا يتم التعامل مع عناصر النموذج على هيئة مضمّنة.
واحدة من الأجزاء المفضلة لدي من HTML Kickstart هي إشعارات الخطأ البسيطة المستخدمة مع النماذج:
استنتاج
هناك الكثير من الخيارات التي تأتي مع HTML Kickstart ، لقد خدشنا السطح فقط ؛ هناك مجموعة ضخمة من الأيقونات وأدوات التلميحات وحتى علامات التبويب.
القوة الحقيقية لـ HTML Kickstart هي بساطة كودها. عدم وجود الأقسام والطبقات الدخيلة يجعلها موفرة للوقت بشكل كبير ، وأقل كود يعني أخطاء أقل. إذا كنت تتطلع إلى البدء في ترميز HTML الخاص بك من الصفر ، أو إذا كنت تبحث عن إطار عمل بسيط لتصميم نموذج HTML سريعًا ، يعد Kickstart خيارًا رائعًا.
هل استخدمت HTML Kickstart؟ هل تفضل إطار عمل مختلف؟ اسمحوا لنا أن نعرف في التعليقات.