Kaptain Kitty
انتشار :۱۶ دی ۱۳۹۵
بازدید :226 بار

Postcss-grid-kiss

وقتی برای اولین بار با این مورد مواجه شدم، فکر کردم فقط یک شوخی است. اما همانطور که واضح است یک پلاگین واقعی PostCSS می باشد و هدف آن ساده سازی سینتکس Grid جدید W3C می باشد.

طبیعتا وقتی از آرایش شبکه ای (Grid Layout) استفاده می کنید، CSS شما ظاهری شبیه به این را خواهد داشت:


body {
  display: grid;
  align-content: space-between;
  grid-template-rows: 120px 1fr 60px; 
  grid-template-columns: 150px 1fr;
  grid-template-areas:   "header  header"  "sidebar main  "  "footer  footer"
} 
body >
 header {
  grid-area: header; 
 align-self: start
}
 body > .sidebar {
  grid-area: sidebar
}
 body >
 main {
  grid-area: main
}
 body > footer {  grid-area: footer;  justify-self: center;  align-self: end}

اما با استفاده از postcss-grid-kiss، چیزی شبیه به این را خواهید نوشت:


body {  grid-kiss:    "+------------------------------+      "    "|           header ↑           | ۱۲۰px"    "+------------------------------+      "    "                                      "    "+--۱۵۰px---+  +----- auto -----+      "    "| .sidebar |  |      main      | auto "    "+----------+  +----------------+      "    "                                      "    "+------------------------------+      "    "|              ↓               |      "    "|         → footer ←           | ۶۰px "    "+------------------------------+      "}

بله درست می بینید. در واقع شما آرایش وبسایت خود را با استفاده از کاراکتر های ASCII به عنوان مقادیر خصوصیت grid-kiss رسم می کنید. سپس این پلاگین کد را نسبت به معادل CSS معتبر، مشابه با آنچه که در اولین بلوک کد ها می بینید پردازش می کند.

این سند شامل یک بخش است که می توانید سینتکس را امتحان کنید. برنامه نویسان می توانند کلید insert بر روی کیبورد خود را تبدیل کرده و از ویژگی چند مکان نمایی ویرایشگر متنی خود برای کارامد تر ساختن رسم شبکه استفاده کنند.

MJML App

ایمیل HTML در حال رونق گرفتن است و همانطور که احتمالا توجه کرده اید منابع و ابزار هایی هر ماه در حال انتشار است تا به کدنویسی و طراحی newsletter های ایمیل های واکنشگرا(Responsive) کمک کند. MJML app یک اپلیکیشن دسکتاپی native می باشد که به شما این امکان را می دهد تا ایمیل های HTML واکنشگرا را با استفاده از MJML که یک فریم ورک زبان مارک آپ سفارشی می باشد ایجاد و ویرایش کنید.

اپلیکیشن ایمیل ساز MJML

اپلیکیشن ایمیل ساز MJML

فریم ورک و اپلیکیشنش هر دو در اوایل امسال منتشر شدند و اپلیکشن بر روی ویندوز، OSX و لینوکس موجود می شود. ویرایشگر میتواند از بین theme های مختلف انتخاب کرده و یک نمایش split-screen با پیش نمایش زنده ارائه می دهد.

در اینجا یک مثال ساده از سینتکس MJML را می بینید:


<mjml>  <mj-body>    <mj-container>      <mj-section>        <mj-column>           <mj-text>Testing</mj-text>         </mj-column>      </mj-section>    </mj-container>  </mj-body></mjml>

این کد سپس به یک HTML معتبر رندر می شود. خیلی شلوغ است اما همان چیزی است که یک زبان و اپلیکیشن را تا این حد مفید و کاربردی می سازد- لازم نیست نگران هماهنگ سازی موارد باشید، این اپلیکیشن تمام کارها را برایتان انجام می دهد.

این اپلیکیشن به شما این امکان را می دهد که خروجی را به صورت MJML یا HTML صادر کنید و می توانید به سرعت تمپلیت های خود را به صورت Gist های بی نام ذخیره کنید.

قسمت های اول و دوم را می توانید از طریق لینک های زیر مطالعه کنید:

ابزار های front-end جالب در سال ۲۰۱۶ – قسمت اول

ابزار های front-end جالب در سال ۲۰۱۶ – قسمت دوم

Ajax DevTools Timeline Viewer jQuery Postcss-grid-kiss آژاکس آموزش فریم ورک جاوااسکریپت ابزار Notification Logger اپلیکیشن ایمیل ساز MJML پلاگین Modaal جاوااسکریپت طراحی responsive فریم ورک jquery فریم ورک جاوا اسکریپت فریم ورک چیست کتابخانه ی Intercooler.js
مطالب مرتبط

با پیشرفت HTML 5 و پدید آمدن چارچوب‌های مختلف JavaScript توسعه‌ی نرم افزار‌های تک صفحه ای تحت وب (Single Page Applications) محبوب شده است.
اخیرا مطالب خوبی در رابطه با AngularJS در وبسایت جاری منتشر شده است. KnockoutJS توسط Microsoft معرفی شد و در قالب پیشفرض پروژه‌های SPA قرار گرفت ، بنابراین احتمالا این سوال برای افرادی مطرح شده است که تفاوت بین KnockoutJS و AngularJS چیست ؟

۱۵ کتابخانه جالب javascript و css در دنیای برنامه نویسی front end

CSS۳ دنیای طراحی  را با خصوصیات انیمیشنی به سطح جدیدی برد. اما بیشتر از این شما باید به کدهای متن باز توجه داشته باشید که در پروسه طراحی و ایجاد کردن به شما کمک می کند که به آنها اصطلاحا کتابخانه هم گفته می شود.

زامارین ( Xamarin ) یک شرکت نرم افزاری در شهر سان فرانسیسکوی ایالت کالیفرنیا است که متعلق به شرکت Microsoft می باشد. این شرکت در سال ۲۰۱۱ توسط مهندسانی تاسیس شد که خالق Mono، Mono for Android و MonoTouch هستند که کاربردهای میان پلتفرمی از زیرساخت زبان مشترک (CLI) و مشخصات زبان مشترک هستند (که اغلب Microsoft.NET نامیده می شود).

نظراتتان را برایمان بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مطالب ما تو این شبکه های اجتماعی هم پخش میشه