• 7Learn Discount
  • illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

آشنایی با فریمورک Pure (قسمت آخر)

6 3130 ۲۹ تیر ۹۳

با سلامی دوباره خدمت دوستای عزیز سون لرن.در قسمت های قبلی فریم ورک pure با هم یادگرفتیم که چطوری به فرم ها و دکمه های سایت خود استایل های آناده ی pure رو بدیم.حالا تو این قسمت می خواهیم که نحوه ی کم کردن حجم فایل های pure رو با هم یادبگیریم.

ابتدا شما را دعوت به مشاهده ی سایز هر بخش pure می کنم که دراسیت رسمی این فریم ورک منتشر شده :

pure

 

حالا شما باید متناسب به نوع تغییر مد نظر فایل ها رو از هم جدا کنید و ازشون استفاده کنید.برای همین ما تو این آموزش میخواهیم که فقط استایل دکمه های یک جعبه ی دانلود رو با هم درست کنیم.(به عبارتی دیگر می خواهیم شخصی سازی pure رو در قالب مثالی کاربردی انجام دهیم.)

مرحله ی یک :تشکیل فایل css

استفاده از استایل های پیش فرض

خب برای استفاده از استایل هایی که در قسمت های قبل آموزش دادیم و استایل های پیش فرض pure در رنگ های ثابت هستند با توجه به زمینه ای که می خواهید از اون فایل css بهره بگیرید به جدول زیر توجه کنید:

بخش مد نظر آدرس فایل css
Base http://yui.yahooapis.com/pure/0.5.0/base-min.css
دکمه ها http://yui.yahooapis.com/pure/0.5.0/buttons-min.css
فرم ها http://yui.yahooapis.com/pure/0.5.0/forms-min.css
سیستم گرید بندی http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css
منوها http://yui.yahooapis.com/pure/0.5.0/menus-min.css
جداول http://yui.yahooapis.com/pure/0.5.0/tables-min.css

استفاده از استایل دلخواه

اما اگه برعکس بنده سلیقه ی خوبی دارید و دوست دارید که خودتون دکمه ها و فرم ها و سایر اجزا را رنگ بندی و شخصی سازی کنید باید خدمتون عرض کنم که باید تو وهله ی اول به سازنده ی پوسته ی pure به آدرس زیر یه سر بزنید :

حالا می تونید مطابق میل خودتون دکمه و سایر عناصر را رنگ بندی کنید.البته باید به کلاسی که برای هر عنصر تعیین می کنید دقت کنید.

نکته : وقتی می خواهید  کلاس ها رو تو html فراخوانی کنید باید از دوتا کلاس استفاده کنید.یکی اون کلاس هایی که تو آموزش های قبل گفتیم و دیگری هم pure-skin-mine که در اینجا mine نام پیش فرض برای پوسته ی جدید ماست.

مرحله ی دو:ساخت اجزای جعبه ی دانلود

ما برای این جعبه ی دانلود می خواهیم که از یک جدول دو ستونه در دو سطر استفاده کنیم به نحو زیر :

1

در وحله ی اول این یک جدول ساده هست که با استایل های زیبای pure به اون جلوه ی زیبایی دادیم.کد آماده ی این جدول در html رو می تونید در زیر مشاهده کنید :

خب همونطور که می بینید هم به جداول و ستونهای آنها کلاس های pure رو دادیم و هم به دکمه ها یی که استفاده کرده ایم این کلاس ها رو اعمال کردیم و یک جدول زیبا ساختیم .

 

نکته :

لازم می دونم یادآوری کنم که تگ های جدول در html به صورت زیر هستند :

تگ html توضیح
<table> تگ اصلی قرار گیری جدول
<thead> گ قرار دادن تیتر در جدول
<tbody> تگی که سطر ها بین آن ها قرار می گیرند
<tr> تگی که ستون ها ها را می سازد
<td> تگی که سطر ها را می سازد

 

در نهایت بگم که هدف از آموزش pure به عنوان یک فریم ورک css این بود که اول شما را با مفهوم فریم ورک و نحوه ی استفاده از آن آشنا کنیم و بعد شروع به استفاده از فریم ورک ها و آشنایی با فریم ورک های حرفه ای تر نظیر zurb رو باهم در قسمت های بعدی یاد بگیریم و بتونیم از اونها به صورت کاربردی استفاده کنیم.دلیل انتخاب pure هم حجم کم اون بود.امیدوارم که آموزش موثری رو به جا گذاشته باشم...

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 6 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    ارشیا(۲ آذر ۱۳۹۳)

    آیا برای این pure نسخه راست به چپ وجود داره ؟
    اگر نداره چطور برای سایت راست به چپ فارسی از اون استفاده کنم ؟

  • ‏‏
    ارشیا(۲ آذر ۱۳۹۳)

    به نظر شما فریم ورک css کاملی که خوب باشه برای آینده کدوم رو انتخاب کنم ؟

  • ‏‏

    سلام من height و width میدم به یک div حالت ریسپانسیو از دست میده تو این فرم ورک چکار کنیم حالت ریسپانسیو با هم باشه

    • ‏‏
      وحید صالحی(۲۳ اسفند ۱۳۹۴)

      خوب این ها مقدار ثابت رو در نظر میگیرن می تویذ بجاش از max-width و max-height استفاده کنید تا زمانی که سایز صفحه کاهش پیدا میکنه طول و عرض هم کاهش پیدا کنن

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram