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

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



  آیا می دانید تا کنون 6335 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

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

14 5114 ۲۲ تیر ۹۳

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

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

برای استفاده از این امکان هم ابتدا باید آدرس فایل css رو در htlm فراخوانی کرد و سپس آدی و کلاس های موجود در فایل pure.css را استفاده کرد.پس برای آشنایی با این فایل و id و class های این سند با ماباشید....

فراخوانی

برای فراخوانی این فریم ورک هم می توانید آنرا دانلود کرده و سپس به html اضافه کنید و هم از طریق سرورهای ثانویه اقدام کنید.به نحو زیر و در بین دو تگ head :

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

ویژگی های بارز pure

شاید بارز ترین ویژگی pure تمام responsive بودن (واکنشگرا) آن هست که به کاربران اجازه می ده در هر ابعادی بتونند هناصر را به راحتی مشاهده کنند.علاوه بر این pure یک قسمت ویژه برای IE های قدیمی داره که می تونه سایت رو براحتی برای این دسته از کاربران نیز بارگذاری کنه.البته برای فعال کردن این ویژگی باید کد زیر را به تگ head سایت اضافه کنیدبجای کدی که در ابتدا معرفی کردیم :

سیستم گرید بندی در pure

در سیستم گرید بندی این فریم ورک یک صفحه ی وب به 24 قسمت تقسیم می شود که بارگذاری صفحات در هر ابعادی رو برای کاربران به ساده ترین نحو ممکن فراهم می کند.و حتی برای تصاویر نیز به کمک class زیر قابلیت واکنشگرا بودن رو می افزایه :

در کد بالا از یک تصویر به عنوان تصویر نمونه استفاده کرده ایم اما چیزی که مهم است کلاس استفاده می باشد که می توان به هر تصویری داد و تصویر را واکنش گرا کرد.یعنی کلاس pure-img

همچنین وقتی از رسپانسیو بودن صحبت می کنیم درمی یابیم که سایت در هر اندازه به نحوی صحیح نمایش داده خواهد ولی اگر بخواهیم در هر ابعادی روی برخی از عناصر تغییراتی خاص را اعمال کنیم مثلا حذف برخی از عناصر تصویری باید از جدول زیر کمک بگیریم که اندازه ی هر صفحه و نام کلاس مربوط به آن صفحه را نشان می دهد :

pure

نکته : برای مثال هر وقت که بخواهیم تصویری مثلا با id="pic1" رو در تلفن های همراه پنهان کنیم یا استایل خاصی به آن بدهیم باید از کلاس خط آخر بهره ببریم.

خب دیگه فکر کنم تا این جا برای قسمت اول خوب و مناسب باشه لذا بررسی سایر عناصر در این فریم ورک رو به قسمت بعد موکول می کنیم.

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

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

  • ‏‏
    بهرام(۲۲ تیر ۱۳۹۳)

    سلام
    ممنون بابت مطلبتون، یعنی با این فریم ورک میشه یک سایت ریسپانسیو ایجاد کرد و دیگه احتیاجی به استفاده از بوت استرپ و… نیست؟

    • ‏‏
      لقمان آوند(۲۲ تیر ۱۳۹۳)

      سلام
      آره بهرام جان
      چندین مورد فریمورک ریسپانسیو وجود داره به جز بوت استرپ . بوت استرپ محبوبترین این فریمورک هاست و پشتیبانی قویتر داره .

      • ‏‏
        رضا نصرالهی(۲۲ تیر ۱۳۹۳)

        یه سوال :اگه بوت استرپ بهتره چرا شما از foundation استفاده کردید؟

        • ‏‏
          لقمان آوند(۲۲ تیر ۱۳۹۳)

          هر دو بسیار محبوب هستند . با تحلیلی که از نیازهای خودمون داشتیم foundation رو مناسب تر دونستیم برای توسعه ی ظاهر سایت.

  • ‏‏
    محمد بابازاده(۲۵ تیر ۱۳۹۳)

    ممنونم از مطلب خوبتون، کلاس بندی های این فریم ورک منو یاد بوت استرپ انداخت
    این فریم ورک حجم کمتری داره ؟ توی چه پروژه هایی ازش استفاده بشه بهتره به نظرتون ؟

    • ‏‏
      لقمان آوند(۲۵ تیر ۱۳۹۳)

      کلا فریمورک سبکی هست .
      همه جا می تونید ازش استفاده کنید .
      فریمورک های css رو خود طراح باید انتخاب کنه . به قولا علف باید به دهن بزی خوش بیاد !
      اگر امکانات و ظاهرش رو بپسندید همه جا می تونید ازش استفاده کنید .

  • ‏‏
    محمدرضا(۲۸ تیر ۱۳۹۳)

    سلام
    من اصلا نفهمیدم این بخش فایده اش چی بود یعنی به چه درد میخوره؟؟؟
    لطفا یکی جواب گو باشه!!!!!!!!!!!

    • ‏‏
      لقمان آوند(۲۸ تیر ۱۳۹۳)

      pure یک فریمورک CSS هست و یک سری کلاس های css برای شما از قبل تعریف کرده که شما نخواید دوباره بنویسید و کافیه فقط از اونها استفاده کنید !

  • ‏‏

    یه سوال داشتم وقتی از این فریمورک استفاده میکنیم دیگه دردسرای بوت استرپ رو نداره که تبدیل کنیم به less و sass؟ میتونیم بدون تغیرر در سورس فریمورک استایل خودمونو هم اضافه کنیم؟

    • ‏‏
      لقمان آوند(۲۸ تیر ۱۳۹۳)

      توی خود بوت استرپ هم نیازی نیست که سورس خود بوت استرپ رو تغیر بدیم و بهتره کلاس های جدید رو ایجاد کنیم . در آموزش بوت استرپی که در سایت هست بهتر بود اینکار انجام میشد تا اینکه سورس بوت استرپ رو تغیر بدیم .
      بالاخره برای اینکه ظاهر دلخواه رو داشته باشید با هر فریمورکی هم کار کنید ممکنه لازم باشه یه سری کلاسا خودتون اضافه کنید .

  • ‏‏
    حسن محمدزاده(۳۱ تیر ۱۳۹۳)

    این آموزش کار عجیبی از سون لرن نبود
    سون لرن همیشه عالیه
    ما به عالی بودنش عادت کردیم
    و اصلا غیر از این رو ازش توقع نداریم

  • ‏‏

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

  • ‏‏

    خیلی فریم ورک سبکی هستش

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram