با استفاده از تم بنیاد ZURB برای دروپال

قدرت چارچوب پایه ZURB را در یک تم دروپال دریافت کنید

پیش از اینکه بوت استرپ توییتر وجود داشت، بنیاد ZURB وجود داشت (و وجود دارد)، یک چارچوب است که به شما امکان می دهد دکمه های زیبا، شبکه های بلوک، میله های پیشرفته، جداول قیمت گذاری و خیلی بیشتر با چند کلاس CSS به خوبی قرار دهید. با تم بنیاد ZURB برای دروپال، شما می توانید تمام این بلینگ را در سایت خود در دروپال آزادانه از دست ندهید.

چارچوب پایه ZURB چیست؟

چارچوب بنیاد ZURB مجموعه ای از کد CSS و جاوا اسکریپت برای مجموعه ای از چیزهایی است که شما احتمالا در وب سایت خود می خواهید. این شامل نه تنها آبنبات چشم قابل کیک مانند دکمه های فوق الذکر بلکه برخی از قدرت پاسخگو واقعا شگفت انگیز است.

شما با اضافه کردن کلاس های ویژه CSS از بسیاری از این ویژگی ها استفاده می کنید. برای مثال:

در اینجا یک دکمه است.

<

چارچوب بنیاد ZURB کاملا جدا از دروپال است. مردم از آن در WordPress، Joomla و حتی سایت های HTML استاتیک استفاده می کنند.

تم دروپال پایه ZURB چیست؟

تم های پایه دروپال ZURB به شما این امکان را می دهد که تمام این قدرت ZURBish را از طریق دانلود و فعال کردن یک تم (و البته مستندات را بخوانید و چند گام اضافی را بکشید) را از هم بزنید.

به عنوان مثال، بنیاد ZURB بر روی کتابخانه جی کوئری جاوا اسکریپت تکیه می کند، بنابراین شما احتمالا مجبور به نصب جی کوئری بروز رسانی هستید. بررسی کنید که آیا شما از هر ماژولی دیگری که به jQuery متکی هستید استفاده می کنید. اگر از یک نسخه از jQuery استفاده می کنید، این ماژول ها ممکن است کار را متوقف کنند.

همچنین، احتمالا می خواهید از این موضوع به عنوان یک تم پایه برای تم سفارشی خود استفاده کنید. سفارشی کردن این است که بنیاد ZURB واقعا درخشان است.

آیا این تم برای استفاده از بنیاد ZURB در دروپال نیاز دارید؟

شما برای استفاده از چارچوب بنیاد ZURB نیازی به این موضوع ندارید . در ساده ترین حالت، این تم فقط ZURB Foundation CSS و جاوا اسکریپت را به سایت شما اضافه می کند و شما می توانید این کار را به صورت دستی انجام دهید.

اما این موضوع باعث می شود که ساده تر شود و همچنین شامل ادغام بیشتر با دروپال می شود.

به علاوه، شما می توانید ماژول های اضافی کوچکتر را برای ادغام بیشتر اضافه کنید. به عنوان مثال، ماژول Orbit ZURB به شما اجازه می دهد که اسلایدهای Orbit را با زمینه های تصویری بسازید. ماژول ZURB Clearing به شما اجازه می دهد تا Lightboxes پاسخگو با تصاویر رسانه ای ایجاد کنید.

توجه: من از این ماژول های کوچک هنوز خودم استفاده نکرده ام، بنابراین ممکن است خطرناک باشد. همانطور که از این نوشتار، ZURB Clearing به Media-2.x-dev نیاز دارد، که اگر در حال حاضر از Media 1.x استفاده می کنید، می تواند یک ارتقاء خطرناک باشد. و یک الزام برای یک نسخه توسعه یک ماژول باید همیشه یک مکث داشته باشد. با این حال، این و دیگر ماژول های ZURB ارزش دیدن دارند.

کدام نسخه از بنیاد ZURB را برای استفاده انتخاب کنید

قبل از دانلود تم بنیاد ZURB، نسخه مورد نظر خود را بررسی کنید. نسخه های اصلی مختلف چارچوب بنیاد ZURB وجود دارد و شماره نسخه اصلی این موضوع مربوط به چارچوبی است که با آن کار می کند. بنابراین، نسخه های 7.x- 3 .x از موضوع با بنیاد 3 ، نسخه های 7.x- 4 .x با بنیاد 4 کار می کنند و نسخه های 7.x- 5 .x با Foundation 5 کار می کنند.

همانطور که از این نوشتار، آخرین نسخه پایدار از تم 7.x-4.x است، که با بنیاد 4 کار می کند. نسخه 7.x-5.x هنوز در حال توسعه است. بنابراین، اگرچه وب سایت چارچوب پایه فرض می کند که از بنیاد 5 استفاده می کنید، ممکن است بخواهید با بنیاد 4 در حال حاضر باقی بمانید.

همچنین توجه داشته باشید که بنیاد 5 دارای الزامات اضافی، به ویژه جی کوئری 1.10 است. بنیاد 4 تنها نیاز به jQuery 1.7+ دارد.

هنگام خواندن مستندات آنلاین، از نسخه بنیادی که شما استفاده می کنید مطلع هستید. این به خصوص اگر شما از آخرین نسخه چارچوب استفاده نکنید. بلافاصله آسان است که به خواندن اسناد برای بنیاد 5 بپردازید، سپس وقتی که یک ویژگی جدید در سایت بنیاد 4 شما کار نمی کند، ناامید می شوید.

به عنوان مثال، بنیاد 5 شامل مجموعه ای از کلاس های متوسط ​​برای صفحه نمایش های متوسط ​​می باشد. در بنیاد 4، این به طور اسرارآمیز شکست خواهد خورد مگر اینکه شما گام های اضافی بگیرید.

از SASS، Compass و & # 34؛ _variables.scss & # 34 استفاده کنید

اگر میخواهید CSS را برای این موضوع درج کنید، مطمئن شوید که:

• با استفاده از تم بنای ZURB به عنوان یک تم پایه برای subtheme سفارشی خود
• این زیرنویس را با استفاده از دستور drush ارائه شده توسط موضوع ایجاد کنید. مثل این: drush fst your_theme_name
• به راحتی فایل _variables.scss را ببینید

فایل _variables.scss به صورت خودکار توسط drush fst ایجاد می شود. این فایل تک متغیرها را برای تقریبا هر چیزی که میخواهید در CSS تم خود تنظیم کنید. این شگفت انگیز است! همه در یک مکان، شما می توانید همه چیز را از فونت پیش فرض به عرض صفحه نمایش به مرز در کوفته ها تنظیم کنید.

البته، همیشه می توانید فایل های اضافی را نیز تنظیم کنید. اما _variables.scss جالب است برای شروع.

توجه داشته باشید پسوند فایل: اس اس اس، نه CSS. برای استفاده از _variables.scss، شما باید SASS (یک زبان برنامه افزودنی CSS) و Compass (یک چارچوب ساخته شده با SASS) را تنظیم کنید. هنگامی که شما کامپایل کامپوزیت را اجرا می کنید، فایل های SCS شما در فایل های جداگانه به CSS دوست داشتنی تبدیل می شود. (من ترجیح می دهم قطب نمای دیده بان - این در حال اجرا و به روز رسانی CSS به عنوان شما را نیشگون گرفتن و کشیدن فایل های اس اس اس).

اگر واقعا، واقعا نمیخواهید با SASS بجنگید، می توانید فایل های CSS را به طور معمول بنویسید و آنها را در فایل .info خود در موضوع خود قرار دهید. اما به من اعتماد کنید - سرمایه گذاری زمان کمی برای یادگیری به اندازه کافی برای compilation _variables.scss تقریبا بلافاصله پرداخت می شود.

قبل از استفاده از بنیاد ZURB

بنیاد ZURB بسیار عالی است، اما این تنها چارچوب جلویی نیست که با Drupal ادغام شده است. شما ممکن است بخواهید Bootstrap را بررسی کنید، یک چارچوب مشابه که دارای یک موضوع دروپال است. در حال حاضر، من از بنیاد ZURB خودم استفاده می کنم، اما این به این دلیل است که تحقیقات من نشان داد که آسان تر از سفارشی سازی Bootstrap است.

همچنین، جزء Joyride بسیار شیرین است.

و اینکه آیا از بنیاد ZURB، بوت استرپ یا بعضی از چارچوب دیگر استفاده می کنید، مطمئن شوید که این نکات را در استفاده از یک چارچوب با دروپال بدست آورید.