টেকটিউনসারস বন্ধুরা, আমার ষষ্ঠ টিউনে আপনাদের সবাইকে স্বাগতম। এখন প্রায় আপনাদের জন্য কিছু গুরুত্বপূর্ণ বিষয় নিয়ে লেখার চেষ্টা করছি। আশা করছি আপনারা আমার টিউন বেশ উপভোগ করছেন। ওয়েব ডিজাইন নিয়ে কাজ করার সুবাদে আমার বেশিরভাগ টিউনই ওয়েব ডিজাইন ও ডেভেলপমেন্ট রিলেটেড। আজকেও সেই রকম কিছু লেখার চিন্তা করে আপনাদের জন্য লিখতে বসলাম। আজকের পুরো টিউন জুড়ে রয়েছে শুধু নতুন রেস্পন্সিভ ফ্রেমওয়ার্ক পরিচিতি।
জনপ্রিয় টেক ব্লগ ম্যাসেবল “২০১৩” সালকে রেসপনসিভ ওয়েব ডিজাইন বিপ্লবের বছর হিসেবে ঘোষনা দিয়েছে। বর্তমানে সময় রেস্পন্সিভ ওয়েব ডিজাইনকেই প্রাধান্য দিচ্ছে। তাছাড়া বর্তমান মার্কেটপ্লেস গুলোতে এখন রেস্পন্সিভ ডিজাইনের জোয়ার চলছে। আসলে যারা অলরেডি কাজ করেন তাদের নতুন করে বলার কিছু নাই। আর এই রেস্পন্সিভ ডিজাইনের কাজকে সহজ করে দিতে ইন্টারনেট এ আছে হরেক রকমের রেস্পন্সিভ ফ্রেমওয়ার্ক ও টুলস। দিন যত আগাচ্ছে কাজের মানের সাথে নতুন এই ফ্রেমওয়ার্ক গুলো তাদের নিজ নিজ অবস্থান থেকে আরও বেশি শক্তিশালী ও নির্ভরযোগ্য হচ্ছে।
অনেক ফ্রেমওয়ার্ক আছে যা জনপ্রিয় সব ফ্রেমওয়ার্ক যেমন, Bootstrap, Foundation and Gumby দ্বারা অনুপ্রাণিত হয়ে আজ সেগুলো all-in-one ফিচার সহ অনেক নতুন কিছু ফিচার যুক্ত করেছে। যেমন বলা যায় বিভিন্ন কম্পনেটের পুনঃব্যবহার, বিভিন্ন উইজেড (আইকনস, মোডালস, পেজিনেশান, নেভিগেশান) ইত্যাদি। তবে অবশ্যই এগুলোকে বিভিন্ন ফিচারের বোঝা বলা যাবে না বরং এগুলো আপনাকে দিবে একটি সলিড সুন্দর লেআউট।
Girder খুব ছোট সাইজের একটি গ্রিড টুলকিট যা ফেক্সিবল লেআউট তৈরির মাধ্যমে সুন্দর একটি ওয়েবসাইট তৈরি করে। আপনার এইচটিএমএল মার্কআপকে আরও সুগঠিত করতে এখানে রয়েছে সুসজ্জিত Sass silent classes (placeholder) যার ফলে আপনাকে অতিরিক্ত কোন মনগড়া ক্লাস ব্যবহার করতে হবে না। আপনি এখানে Sass অথবা নরমাল সিএসএস দিয়ে কাজ করতে পারবেন। আপনার প্রোজেক্টের প্রয়োজন অনুযায়ী এটির আকার পরিবর্তন করা যায় এবং Breakdrown() কম্পাস প্লাগিন ব্যবহার করে যে কোন জটিল মিডিয়া কুয়েরি কাজ করা যায় সহজে।
➡ ফ্রেমওয়ার্কের নিজস্ব পাতা - http://comfypixel.com/Girder/
➡ গিটহাব পাতা - https://github.com/unmaya/Girder
Cardinal একটি ক্ষুদ্র মোবাইল ফাস্ট সিএসএস ফেমওয়ার্ক। এটি মূলত রেস্পসিভ ওয়েব অ্যাপ্লিকেশান তৈরির জন্য ব্যবহার করা হয়। এটির উদ্দেশ্য হল রেস্পন্সিভ ওয়েব অ্যাপসের জন্য দ্রুত প্রোটোটাইপ তৈরি করা এবং এর সিএসএস কে স্কেলিং ও মেইনটেন করা। এটি তার নিজের ওয়েট কমানোর জন্য ও সিএসএস ফ্রেমওয়ার্ককে আরও সরল করতে বিভিন্ন নান্দনিক ডিজাইনকে উপেক্ষা করে। এটি ফ্লুয়িড টাইপোগ্রাফি, রেস্পন্সিভ গ্রিড হিসেবেও কাজ করে।
➡ ফ্রেমওয়ার্কের নিজস্ব পাতা - http://cardinalcss.com/
➡ গিটহাব পাতা - https://github.com/cbracco/cardinal
Typeplate একটি টাইপোগ্রাফিক স্টার্টার কিট Cardinal মত কোন নান্দনিক ডিজাইন করে না কিন্তু কিছু কমন টাইপোগ্রাফিক প্যাটার্নের জন্য কিছু বাড়তি স্টাইল দিয়ে প্রপার মার্কআপ নিশ্চিত করে।
➡ ফ্রেমওয়ার্কের নিজস্ব পাতা - http://typeplate.com/
➡ গিটহাব পাতা - https://github.com/typeplate/typeplate.github.io
রেস্পন্সিভ ডিজাইনের জন্য Gridism একটি সিম্পল সিএসএস গ্রিড সিস্টেম।
➡ ফ্রেমওয়ার্কের নিজস্ব পাতা - http://cobyism.com/gridism/
➡ গিটহাব পাতা - https://github.com/cobyism/gridism
Furatto হল দ্রুত ওয়েব ডেভেলপমেন্ট করার একটি ফ্ল্যাট স্টাইলড ফ্রন্ট-ইন্ড ফ্রেমওয়ার্ক। এটি মূলত শুরু থেকেই Twitter Bootsrap ও Foundation ফ্রেমওয়ার্কের উপর ভিত্তি করে তৈরি করা।
➡ ফ্রেমওয়ার্কের নিজস্ব পাতা - http://icalialabs.github.io/furatto/index.html
➡ গিটহাব পাতা - https://github.com/IcaliaLabs/furatto
PocketGrid একটি লাইটওয়েট (0.5kB) পিউর সিএসএস রেস্পন্সিভ গ্রিড সিস্টেম যেখানে রয়েছে অফুরন্ত কলামস ও ব্রেকপয়েন্টস নিয়ে কাজ করার সুবিধা। গ্রিড সিস্টেমের মাধ্যমে রো এবং কলাম তৈরির পরিবর্তে আপনি এখানে ফেক্সিবল ব্লক এবং ব্লক গ্রুপ নিয়ে কাজ করতে পারেন। এই ফেক্সিবল ব্লক গ্রুপ আর রো সমান এবং ব্লক গুলো কলামেল সাথে সিমিলার। এটি আপনাকে প্রথাগত গ্রিড সিস্টেমের থেকে অনেক বেশি স্বাধীনতা দিবে।
➡ ফ্রেমওয়ার্কের নিজস্ব পাতা - http://arnaudleray.github.io/pocketgrid/
➡ গিটহাব পাতা - https://github.com/arnaudleray/pocketgrid
.Fitgrd আসলে কোন ফ্রেমওয়ার্ক না। এটা আপনার রেস্পন্সিভ ওয়েব সাইট তৈরির জন্য একটি সলিড ফাউনডেশান। এটি মূলত র্যাপিড প্রোটোটাইপিংএর জন্য ডিজাইন করা। এটি সাধারনত সেই সব ওয়েব ডিজাইনারদের জন্য তৈরি যারা Bootstrap স্টাইল ওয়েব পেজ দেখে দেখে বিরক্ত। এই গ্রিড টি ১২ টি কলামে বিভক্ত এবং প্রত্যেক কলামের দুই পাশে ২% করে মার্জিন দেয়া থাকে।
➡ ফ্রেমওয়ার্কের নিজস্ব পাতা - http://www.fitgrd.com/
➡ গিটহাব পাতা - https://github.com/jayalai/fitgrd/
Kraken একটি লাইটওয়েট, মোবাইল-ফার্স্ট বয়লারপ্লেট। এটিতে রয়েছে দরকারি অনেক কিছু। যেমনঃ ক্রস-ব্রাউজার কম্পাটিবিলিটি এর জন্য একটি CSS reset, একটি রেস্পন্সিভ মোবাইল-ফার্স্ট গ্রিড, একটি সুন্দর ডিজাইন করা fluid typographic scale, CSS3 বাটন, সাধারন কিছু স্টাইল এবং অন্যান্য ফাংশনের জন্য রয়েছে কিছু অপশোনাল এডঅন।
➡ ফ্রেমওয়ার্কের নিজস্ব পাতা - http://cferdinandi.github.io/kraken/
➡ গিটহাব পাতা - https://github.com/cferdinandi/kraken
Markup হচ্ছে কিছু সিম্পল লেআউটস, widgets, ইউআই স্টাইলস ও অন্যান্য উপাদানের একটি ফ্রেমওয়ার্ক সমষ্টি যার সাহায্যে আপনার কোডকে করতে পারেন অনেক বেশি দ্রুত এবং কর্মক্ষম।
➡ ফ্রেমওয়ার্কের নিজস্ব পাতা - http://www.markupframework.org/
Topcoat একটি সম্পূর্ণ ওপেন সোর্স সিএসএস ফ্রেমওয়ার্ক। এটির ফ্রেমওয়ার্ক অপশন গুলো ব্যবহারে ভালো সুবিধা পাবেন এবং সহজে ওয়েব অ্যাপস তৈরি করতে পারবেন।
➡ ফ্রেমওয়ার্কের নিজস্ব পাতা - http://topcoat.io/
➡ গিটহাব পাতা - https://github.com/topcoat
Cascade ফ্রেমওয়ার্ক অন্যান্য ফ্রেমওয়ার্ক থেকে আলাদা। এটি কাজ করে একটু ভিন্ন উপায়ে। মানে আপনার সিএসএস কে আলাদা আলাদা ফাইলকে বিভক্ত করে বিভিন্ন ফিচারের উপর ভিত্তি করে, সিলেক্তরের উপর নির্ভর করে না।
➡ ফ্রেমওয়ার্কের নিজস্ব পাতা - http://jslegers.github.io/cascadeframework/index.html
➡ গিটহাব পাতা - https://github.com/jslegers/cascadeframework/
এটি একটি রেস্পন্সিভ গ্রিড সিস্টেম যা Semantic.gs উপর ভিত্তি করে কাজ করে। এটি LESS ফ্রেমওয়ার্ক হিসেবেও কাজ করে।
➡ ফ্রেমওয়ার্কের নিজস্ব পাতা - http://responsablecss.com/
➡ গিটহাব পাতা - https://github.com/Abban/Responsable-Grid-System
Ratchet একটি ফ্রেমওয়ার্ক যা এইচটিএমএল, সিএসএস ও জাভাস্ক্রিপ ফাংশন ব্যবহার করে আপনি প্রোটোটাইপ মোবাইল অ্যাপস তৈরি করতে পারবেন।
➡ ফ্রেমওয়ার্কের নিজস্ব পাতা - http://maker.github.io/ratchet/
➡ গিটহাব পাতা - https://github.com/maker/ratchet
Clank একটি ওপেন সোর্স প্রোটোটাইপিং ফ্রেমওয়ার্ক যা আপনাকে মোবাইল অ্যাপস নিয়ে কাজ করতে সাহায্য করে।
➡ ফ্রেমওয়ার্কের নিজস্ব পাতা - http://getclank.com/
➡ গিটহাব পাতা - https://github.com/Wolfr/clank
Responsive Web CSS দিয়ে আপনি খুব তারাতারি এমনকি এক মিনিটের মধ্যে ওয়েব পেজের লেআউট তৈরি করতে পারেন। বিভিন্ন ডিভাইস ও তার রেজুলেশান কে টার্গেট করে স্কেলেটন নির্ধারণ করতে পারবেন এবং সহজে সেটি ডাউনলোড করতে পারেন।
➡ ফ্রেমওয়ার্কের নিজস্ব পাতা - http://www.responsivewebcss.com/
আজকে আর কিছুই মাথায় আসছে না। আজকের মত রেস্পন্সিভ ফ্রেমওয়ার্ক শেষ। এই নতুন ফ্রেমওয়ার্ক গুলো নিয়ে কাজ করে দেখেন। আশা করছি সব গুলো কম বেশি উপভোগ করবেন।
আর একটি কথা। আমার টিউন গুলো আপনাদের সত্যিই ভালো লাগছে কিনা দয়া করে জানাবেন। কিংবা আমি কি আপনাদের ভালো মানের টিউন উপহার দিতে পারছি কিনা তাও জানাবেন। আপনাদের একটি টিউমেন্ট আমাকে ভালো টিউন করার অনুপ্রেরণা দেয়। সবাই ভালো থাকবেন। ধন্যবাদ
ফেসবুকে
আমি রনি সাটিয়ার। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 13 বছর 11 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 16 টি টিউন ও 573 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 3 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
@আমি কে !!!: তা ঠিক। তবে সব গুলই তার নিজ নিজ জায়গা থেকে ভালো। আপনি তো তাহলে বুটস্টাপ ফ্যান। 🙂
@[100001535578324:] 10 best liker friend add korte see more a click koro@@[0:[100001535578324:1:see more……….]]
আমার Adobe Illustrator CS4 এবং Adobe Illustrator CS5 সফটওয়্যার গুলি ভীষণ দরকার। আপনার কাছে অথবা অন্য কারো কাছে যদি থেকে থাকে তাহলে তার লিংকটি দেওয়ার জন্য অনুরোধ করছি। টরেন্ট ডাউনলোড লিঙ্ক দিতে পারলে বেশি খুশি হব।
![jQuery for Web Design [পর্ব-০৪] :: jQuery এর FadeIn FadeOut মেথড জানবো ও ব্যবহার করে দেখব](https://dnc.techtunes.io/tDrive/tuner/2018/04/techtunes_fee81aa370998cccf57ea2d7dc08eaa8-368x207.jpg "jQuery for Web Design [পর্ব-০৪] :: jQuery এর FadeIn FadeOut মেথড জানবো ও ব্যবহার করে দেখব")
কাজের টিউন। ধন্যবাদ