الصفحة الرئيسية>PHP كود المصدر>فئات أخرى
تنزيل

SPIN HTML/CSS - أصبح الآن مجانيًا!

مقدمة

سيتيح لك موضوع SPIN Admin/Dashboard ذو التصميم البسيط وواجهة المستخدم المظلمة المبتكرة إنشاء تطبيق مذهل وقوي مع واجهة مستخدم رائعة. مصمم بشكل مثالي للتطبيقات واسعة النطاق، مع وثائق مفصلة خطوة بخطوة. تم بناؤه بناءً على أحدث المعايير والتوصيات. يتم تشغيله بواسطة إطار عمل Bootstrap 3.x، والذي يعد حاليًا أحد أكثر إطارات العمل شيوعًا في العالم.

صورةصورة

تثبيت

  1. تأكد من تثبيت Ruby (Ruby DevKit على Windows أيضًا)، وJekyll Gem، وBundler Gem ( gem install bundler )، وNode، وBower، وGulp.
  2. استنساخ git clone https://github.com/0wczar/spin.jekyll.git
  3. في المحطة، انتقل إلى دليل المستودع المستنسخ
  4. قم بتشغيل npm install لتثبيت حزم NPM
  5. قم بتشغيل bower install لتثبيت حزم Bower
  6. قم بتشغيل gulp bower لربط حزم Bower بـ Jekyll
  7. قم بتشغيل bundler لتثبيت الجواهر المطلوبة
  8. (خيار) قم بتشغيل gulp لبدء Jekyll باستخدام مراقب HTML/JS/Styles. لبدء مشاهدة ملفات HTML فقط، قم بتشغيل gulp jekyll

إضافة مكونات باور

  1. في المحطة انتقل إلى دليل المشروع
  2. قم بتشغيل bower install <package-name> --save على سبيل المثال bower install jquery --save . يمكن العثور على قائمة حزم Bower هنا - http://bower.io/search/
  3. عند اكتمال التثبيت، قم بتشغيل gulp bower لإرفاق المكتبة الجديدة.

إضافة ملحقات أقل/Sass

  1. يجب وضع ملفات Sass الخاصة بالإضافات في /src/assets/scss/<plugin-name>
  2. يجب وضع ملف CSS المترجم في /src/assets/stylesheets/<plugin-name>.css
  3. يجب ربط هذا النمط المخصص الذي تم إنشاؤه في /src/_includes/head.html على سبيل المثال <link rel="stylesheet" href="assets/stylesheets/select2-bootstrap.css">

إنشاء صفحات جديدة

  1. يجب إضافة صفحات HTML الجديدة إلى المجلد /src على سبيل المثال /src/new-page.html
  2. يجب أن تحتوي الصفحة الجديدة على المتغيرات المطلوبة في الأعلى وهي layout: default . المتغيرات الأخرى القابلة للاستخدام هي: bodyClasses الذي يضيف الفئات المناسبة إلى علامة النص، و defaultContainer الذي يضيف حاوية محددة إلى شريط التنقل والتذييل title الذي يتم إدخاله في الرأس ويمكن استخدامه في المحتوى عبر {{ page.title }} . مثال:
  3. يجب ربط الصفحة المضافة في الشريط الجانبي مثل هذا: رابط المثال: <li class="{% if page.url == "/default.html" %}active{% endif %}"><a href="/default.html"><span class="nav-label">Default</span></a></li>
  4. للوصول إلى هذه الصفحة، يمكنك استخدام عنوان url هذا: localhost:3000/new-page/

مصدر الفانيليا (التطبيق الكامل الخفيف)

  1. في المجلد الرئيسي، أدخل في Terminal gulp build:vanilla
  2. انتقل إلى المجلد cd /site
  3. ثم npm install
  4. bower install التالي
  5. gulp build القادمة
  6. مصدر جاهز متاح في المجلد /dist

مصدر البذور (المطور المبتدئ) (_inludes/starter...)

  1. في المجلد الرئيسي، أدخل في Terminal gulp build:seed
  2. المصدر الجاهز متوفر في المجلد /starter

إعادة ضبط الجهاز الهضمي

  1. انتقل إلى المجلد الذي يحتوي على cd /your_catalog
  2. أدخل git reset --hard origin/master
  3. السحب عبر Github Dekstop

خيارات جديدة وهمية

  1. مثال: 25 - 07 - 2016 - 12:03 (12 ساعة) <span data-faker="{{date.day}} {{date.monthDigit}} {{date.year}} {{date.time}}"></span>
  2. مثال: الأشهر: يناير، فبراير، مارس، إلخ... data-faker="[[date.monthShort]]"
  3. أمثلة: الأيام: الإثنين، الثلاثاء، الأربعاء، إلخ... data-faker="[[date.weekdayShort]]"
  4. مثال: 1% - 100%: <span data-faker="[[random.percentage]]"><span>
  5. مثال: 0% - 100.0%: <span data-faker="[[random.percentagePoint]]"><span>
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل