مدتی از آن زمان می گذرد کاشی های سبک توسط نبوغ یکی به این دنیا آورده شدند سامانتا وارن. برای کسانی از شما که ممکن است یک بار به آنها نگاه کرده باشند و سپس فراموش کرده باشند که چه هستند، در اینجا یک توضیح سریع وجود دارد: کاشی های سبک نوعی الگو هستند که به شما امکان می دهد رنگ ها، فونت ها، بافت ها و سایر سبک های زیبایی شناختی را به سرعت آزمایش و پیش نمایش کنید. گزینه های مربوط به طرح های شما قبل از ایجاد یک ماکت با وفاداری بالا، اما پس از ساخته شدن قاب های سیمی. آنها قرار است در اوایل طراحی به مشتریان، ذینفعان یا هر شخص ذینفع دیگری ارائه شوند. process. به این ترتیب، می‌توانید نگرانی‌های مربوط به انتخاب فونت و سوالاتی مانند «آیا می‌توانیم قرمز «درخشنده‌تر» داشته باشیم؟» به عبارت ساده، شما باید از آنها استفاده کنید، حتی اگر فقط برای خودتان. ممکن است اضافه کردن یک مرحله دیگر به طراحی مشکل زیادی به نظر برسد process; اما از تجربه شخصی می توانم به شما بگویم که ارزشش را دارد. من در مرورگر طراحی می کنم: خیره شدن به یک بوم خالی فتوشاپ می تواند دلهره آور باشد. خیره شدن به یک پنجره خالی مرورگر به نظر می رسد که خیلی سخت تر است. حس جهتی که با ایجاد یک کاشی سبک ایجاد می شود، طراحی بقیه سایت را بسیار آسان تر می کند. این چیزی به اندازه یک راهنمای سبک پیچیده یا محدود کننده نیست. بنابراین، هم مکانی برای شروع، و هم آزادی برای تنظیم چیزها در حین پیش رفتن به شما می دهد. با این حال، این یک مشکل کوچک را با کاشی های سبک اصلی ایجاد می کند. آنها PSD هستند. طراحان مبتنی بر مرورگر مانند من، کاشی‌های سبک مبتنی بر مرورگر را می‌خواهند. ما می خواهیم ببینیم که این مطالب در وب چگونه به نظر می رسند، و روی تا حد امکان دستگاه

گزینه های از پیش ساخته شده

چندین نفر قبلاً از ما جلوتر رفته اند روی آن جبهه قالب های از پیش ساخته شده ای برای افرادی که می خواهند با ساخت Style Tiles در مرورگر خود شروع کنند، وجود دارد. آنها را بررسی کنید:

نمونه اولیه سبک

افراد دوست داشتنی در Sparkbox یک قالب ریسپانسیو Style Tile مستقر روی HTML و Sass. این یکی از گزینه های ساده تر است، همانطور که در نسخه ی نمایشی دیده می شود، اما کد به خوبی توضیح داده شده است. آنها حتی رفتند و اسکریپت های اختیاری را برای سازگاری آن با IE 7 و پایین تر در نظر گرفتند، در صورتی که مشتری شما مرورگر خود را برای همیشه به روز نکرده باشد.

وب استایل ها

خلق شده توسط نامانیای گوئل، وب استایل ها با راه حل های دیگر اشتراکات زیادی دارند روی این لیست چیزی که آنها را متفاوت می کند این است که آنها با پیش پردازنده کمتر شناخته شده (برخی می گویند دست کم گرفته شده) Stylus CSS ساخته شده اند.

کاشی های سبک قطب نما

اگر با چارچوب Compass کار می کنید، همراه با مواردی مانند Ruby و ساس، سعی کنید این یکی روی برای اندازه می توان آن را مانند سایر موارد نصب کرد Ruby جواهر، بنابراین باید کاملاً منظم در جریان کار شما قرار گیرد. جالب توجه است، کپی بدنه را می توان از طریق یک متغیر Sass و آن “تولید کرد”. محتوا: صفت. همه چیز طوری طراحی شده است که شما هرگز مجبور به لمس HTML نیستید.

دیگ بخار پاسخگو برای کاشی های سبک

را دیگ بخار پاسخگو برای کاشی های سبک سایه های نسبتاً خشن را با خود می آورد، اما پاسخگو است و از هیچ چیز پیچیده تر از HTML و CSS کلاسیک استفاده نمی کند. بدون چارچوب، بدون پیش پردازشگر، هیچ چیز. اگر فقط می خواهید آن را در یک ویرایشگر متن باز کنید و بروید، نقطه شروع خوبی است.

خودت درست کن

با این تعداد زیادی گزینه از پیش ساخته شده، چرا می خواهید کاشی های سبک HTML/CSS خود را از ابتدا بسازید؟ به نظر اتلاف وقت است؟ خوب، بله و نه. اگر یک سایت ساده می‌سازید، و هنوز تمام محتوا را برنامه‌ریزی نکرده‌اید، یا مشتری آن را ارسال نکرده است، یکی از گزینه‌های از پیش ساخته شده به خوبی انجام می‌شود. با این حال، اگر در حال ساختن یک برنامه وب پیچیده یا یک سایت بسیار بزرگ با انواع محتوای متمایز یا عناصر رابط کاربری هستید، ممکن است بخواهید یک الگوی Style Tile از ابتدا بسازید. موارد موجود فقط طیف وسیعی از محتویات و انواع عناصر موجود را در نظر نمی گیرند. بنابراین، ممکن است یک Style Tile بخواهید که شامل یک ویدیو، پخش کننده صوتی یا نقشه جاسازی شده باشد. ممکن است یکی بخواهید که یک رابط زبانه دار یا یک منوی آکاردئونی را به نمایش بگذارد. اگر در حال ساختن سایتی هستید که بستگی دارد روی برخی از عناصر غیر معمول رابط کاربری، ممکن است بخواهید یک الگوی Style Tile بسازید که شامل آن ویژگی ها باشد. لازم نیست آنقدر سخت باشد. فقط یک طرح ساده دو تا سه ستونی تنظیم کنید، و شروع به اضافه کردن عناصر بصری کنید که برای طراحی شما مهم‌تر هستند. روی محتوا/کارکرد این موارد شامل موارد زیر خواهد بود:

• نمونه های رنگ، الگو و/یا بافت؛
• عناصر تایپی (عنوان، پاراگراف ها، عناصر فهرست، شاید یک بلوک نقل قول)؛
• سبک های تصویر (به عنوان مثال اگر قصد دارید گالری های تصویر را اضافه کنید)؛
• رایج ترین عناصر فرم استفاده می شود.
• بر اساس هر عنصر UI اضافی که برای طراحی مهم می دانید روی محتوا و ساختار سایت

به طور کلی نیازی به ایجاد کد آماده تولید برای همه مرورگرها نیست. آن را ساده نگه دارید، آن را به HTML5 نگه دارید. مگر اینکه از یک عنصر رابط کاربری غیر استاندارد استفاده می کنید که باید از ابتدا در HTML و CSS کدگذاری شود، جاوا اسکریپت را خسته نکنید. بهترین قسمت؟ با شروع کدنویسی موکاپ مبتنی بر مرورگر، می‌توانید تمام CSS مربوطه را اصلاح کرده و مجدداً استفاده کنید!

نتیجه

کاشی‌های سبک اگر قبلاً از آنها استفاده نمی‌کنید ارزش بررسی آن‌ها را دارند. آنها را به مشتریان نشان دهید، آنها را برای خود نگه دارید، از گزینه های از پیش ساخته شده استفاده کنید، یا خودتان را رول کنید… مهم نیست. فقط داشتن این حس جهت گیری سبک، پر کردن آن پنجره خالی مرورگر را بسیار آسان تر می کند.

تصویر شاخص، استودیوی طراحی از طریق آن سوفی لینز