বার্বনঃ লাইটওয়েট স্যাস মিক্সিন

Bengali (বাংলা) translation by Arnab Wahid (you can also view the original English article)

বার্বন একটি স্যাস মিক্সিন লাইব্রেরি। এর কোড কোয়ালিটি খুব ভালো। এর সব কোড স্যামেন্টিং প্রিন্সিপাল ফলো করে লেখা। এই লাইব্রেরি স্কেলেবল কোডের সব বেস্ট প্র্যাক্টিসও ফলো করে।

সুচনা

বার্বন থটবট স্টুডিওর ডিজাইনারদের তৈরি। সামনের টিউটোরিয়ালগুলোতে আমরা যা যা কভার করবঃ

এর এখন এসবের সারমর্মঃ

বার্বন স্যাস কোডের জন্য মিক্সিন ও ফাংশনের একটা সংকলন। DRY প্রিন্সিপাল ফলো করার জন্য এটা তৈরি করা হয়েছিল।

নিট একটা লাইটওয়েট স্যাস গ্রিড ফ্রেমওয়ার্ক। এটা বার্বনের উপরে তৈরি করা।

রিফিল ডিজাইন প্যাটার্নের একটা কালেকশন। এটাও বার্বন আর নিটের সাথে ডিজাইন করা। এগুলা খুব চমৎকার প্রোডাক্ট।

বিটার বার্বন প্রজেক্টে ব্যবহার করা কিছু স্ক্যাফোল্ডিং স্টাইল ও স্ট্রাকচার। এগুলো দিয়ে খুব দ্রুত বুটস্ট্র্যাপিং করা যায়।

বার্বনঃ স্যাসের মিক্সিন লাইব্রেরি

ফিলিপ লাপিয়ের ২০১১ সালে প্রথম বার্বন রিলিজ করেন। তখন তিনি থটবটের প্রডাক্ট ডিজাইনার ছিলেন। এরপর অন্যান্য ডিজাইনাররা বার্বনে কোড কন্ট্রিবিউট করে বড় করে তোলেন।

বর্তমানে বার্বন অনেক জনপ্রিয় একটি স্যাস লাইব্রেরি। এটা কোডিং এর প্রতি একটি মিনিমাল এপ্রোচ । বার্বন কোডিং বেস্ট প্র্যাকটিস ফলো করে ।

এটা ফ্রেমওয়ার্ক হিসাবে ব্যবহার করা হয়। এই মিক্সিন সিএসএস এর সিনট্যাক্সের সাথে কম্প্যাটিবল।

জানা জরুরী

বার্বন পিওর স্যাস এবং প্ল্যাটফর্ম এগনস্টিক।
সিএসএস এর সিনট্যাক্সের সাথে এর অনেক মিল।
রুবির উপর ডিপেন্ডেন্ট না।
ফাংশন এর ব্যবহার করা হয়েছে।
ভেন্ডর প্রিফিক্স আউটসোর্স করা।
সুপার লাইট।
স্যামান্টিক।

সেটাপ

চলেন শুরু করি! টার্মিনাল ওপেন করে লেখুনঃ

$ gem install bourbon

নোটঃ কমান্ড লাইনে কাজ করতে না পারলে এই টিউটোরিয়ালটি দেখে নিন।

প্রজেক্ট স্টাইলশিট যেখানে রাখা, সেখানে বার্বনের ডায়রেক্টরি তৈরি করুন।

$ bourbon install

এর ভিতরে বার্বনের সভ মিক্সিন ও ফাংশন থাকবে। হাতে এই ফোল্ডার মডিফাই করা দরকার নেই।

ভবিষ্যতে আপডেট করতে সুবিধা হবে। এরপর স্টাইলশিপ সেটাপ করুন।

In application.sass:

@import 'bourbon/bourbon'
@import 'other-sass-partials-below'

বার্বন মিক্সিন ওভারভিউ

বার্বনে ওয়াইড রেঞ্জ মিক্সিন ব্যবহার করা যায়। আর এটা ব্যবহার করে নিজের ইচ্ছা মত দিজাইন করার স্বাধীনতাও পাওয়া যায়। নিজে মিক্সিন বানিয়েও বার্বনে ব্যবহার করতে পারেন।

এখানে কিছু মিক্সিনের নাম দেয়া হল যেগুলো আপনি চেক করে দেখতে পারেনঃ

background-image
linear-gradient
border-radius
retina-image
inline-block
transitions
box-sizing
animations
font-face
triangle
clearfix
position
button
size

এই মিক্সিন কিভাবে ব্যবহার হয়, তা আমরা পরবর্তী কোন আর্টিকেলে আলোচনা করব।

বার্বন ফাংশন ওভারভিউ

স্যাসে আগে থেকেই অনেক ফাংশন বিল্ট ইন রয়েছে। সেগুলো স্ট্রিং থেকে শুরু করে ওপ্যাসিটি নিয়েও কাজ করে। বার্বন তার উপরেও কিছু এনহান্সমেন্ট করার সুযোগ দিয়ে থাকে। উদাহরনের জন্য এই সিলেকশনটি দেখুনঃ

linear-gradient()
modular-scale()
golden-ratio()
shade()
tint()
em()

এগুলাও আমরা পরবর্তী কোন আর্টিকেলে দেখব।

বার্বন এডঅন

উদাহরণ স্বরূপঃ

Font Stack Variables

$lucida-grande
$monospace
$helvetica
$verdana
$georgia

ট্র্যাডিশনাল উপায়ের পরিবর্তে ফন্ট স্ট্যাক এভাবে সেট করা যায়ঃ

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif

বার্বনে শুরু একটা font-family variables ব্যবহার করাই যথেষ্টঃ

font-family: $helvetica

Timing Variables

বার্বনে অনেক রকম টাইমিং ভ্যারিয়েবল বিল্ট ইন আছে। transition মিক্সিন এর সিনট্যাক্সঃ

.some-element
  +transition(all 5s $ease-in-circ)

//  SCSS syntax
//  .some-element {
      @include transition(all 5s $ease-in-circ);
//  }

timing ভ্যারিয়েবলের প্যারামিটার। টাইমিং কন্ট্রোল এর জন্য বার্বনে ২৪টা ভ্যারিয়েবল রয়েছে। GIF ইলাস্ট্রেশনের অপশনঃ

পরিশেষ

ভবিষ্যতে আরামে কাজ করতে আজই বার্বন শেখা শুরু করুন। এটা খুবই সিম্পল। সিএসএস আর্কিটেকচার ঠিক রেখে ডিজাইন করতে বার্বনের তুলনা হয়না।

এই সিরিজের অন্যান্য আর্টিকেল পড়ে দেখুন।