معرفی فریمورک Metro UI CSS 2.0

حتما تاکنون طراحی Metro به گوشتان خورده است. در این سبک طراحی ماژول ها و آبجکت ها به صورت کاشی های رنگارنگ کنار یکدیگر قرار میگیرند.با به روی کار آمدن ویندوز 8 این سبک طراحی که پیش از آن توسط مایکروسافت در XBOX360 و Windows phone نیز به کار رفته بود و طرفدار چندانی نداشت نیز جانی دوباره گرفت. در این مقاله با ابزاری آشنا میشوید که این سبک طراحی را برایتان ساده میکند.

مایکروسافت خریدار این طرح سوئیسی از این استایل در اولین نسخه windows media center استفاده کرد، طراحی با کلید هایی به طول و عرض یک چهارم صفحه که آن زمان اگر اسمش را طرحی مسخره نگذاریم طرحی زیبا هم به حساب نمی آمد (البته تنها در مقایسه با زیبایی های بیشمار ویندوز 7).

حال با گذشت یک دهه و به روی کار آمدن ویندوز 8 این سبک بیش از پیش محبوبیت خود را کسب کرده است.

Metro UI CSS 2.0

این فریمورک توسط Sergey Pimenov با هسته Bootstrap طراحی و توسعه داده شده است. بنابراین برای کسی که با Bootstrap آشنا باشد 99 درصد پیشنیازها فراهم است.

برای نصب Metro UI CSS 2.0 دستور زیر را در Package Manager Console در نرم افزار Visual Studio وارد کنید:

PM> Install-Package Metro.UI.CSS

البته شما میتوانید به صورت سنتی نیز اینکار را انجام دهید و با دانلود پکیج Metro UI آنرا به پروژه خود Import کنید.

با اضافه کردن header های زیر قادر خواهید بود تا صفحه خود را به صورت Metro UI تغییر دهید.

<head>

        <link rel="stylesheet" href="css/metro-bootstrap.css">

        <script src="js/jquery/jquery.min.js"></script>

        <script src="js/jquery/jquery.widget.min.js"></script>

        <script src="js/metro/metro.min.js"></script>

</head>

تنها باید توجه داشته باشید که Metro UI فضای نام خاص خود را دارد و شما میبایست کلاس metro را به قسمت body قالبتان اضافه کنید.

بنابراین با اعمال شروط فوق بدنه قالب اصلی به صورت زیر در می آید:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css/metro-bootstrap.css">
        <script src="js/jquery/jquery.min.js"></script>
        <script src="js/jquery/jquery.widget.min.js"></script>
        <script src="js/metro/metro.min.js"></script>
    </head>
    <body class="metro">
        ... markup page ...
    </body>
</html>

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

بنا براین با روند رو به رشد استفاده از ویندوز8 تسلط و به کارگیری این فریمورک میتواند برگ برنده یک طراح قلمداد شود.

برای اطلاع از جزئیات بیشتر این فریمورک میتوانید به وب سایت www.metroui.org.ua مراجعه کنید.

مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

دوره های در حال ثبت نام آکادمی برنامه نویسان

معرفی فریمورک Metro UI CSS 2.0

Metro UI CSS 2.0

مهرداد کاهه

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید