rastrillo ডিজাইন সিস্টেম

ডিজাইন সিস্টেম যা কিছু দেয়, তার সংক্ষিপ্ত পরিচয়। থিম: day। ভাষা: বাংলা।

rastrillo অ্যাপ প্রথম দিনেই এই সবটা পায়, তবে ডিজাইন সিস্টেম যে কেউ ব্যবহার করতে পারে। JavaScript দিয়ে ক্রমান্বয়ে উন্নত, কিন্তু JavaScript লাগে না।

স্টাইলশিট

tokens.css হল কাঠামো: কম্পোনেন্ট ক্লাস, লেআউট, আর টাইপ, স্পেসিং ও রেডিয়াসের স্কেল। এর মানগুলি রেফারেন্স, ঠিক হয় অন্যত্র। themes/<name>.css হল রং, টাইপ ফ্যামিলি আর আকার: একটিই :root ব্লক, যেখানে প্রতিটি রং একবার light-dark() জোড়া হিসেবে ঘোষিত।

স্ক্রিপ্ট

rastrillo.js হল প্রোগ্রেসিভ-এনহ্যান্সমেন্ট শিম: ফ্র্যাগমেন্ট পোলিং, বিজি স্টেট, লাইট ডিসমিস। select.js আর datetime.js হল এনহ্যান্সমেন্ট — কোনও কন্ট্রোল নিজে থেকে না চাওয়া পর্যন্ত প্রতিটিই নিষ্ক্রিয়, আর প্রতিটিই আলাদা করে মুছে ফেলা যায়।

প্রতিটি ফাইলের ওজন

বিভিন্ন অংশের ফাইলের আকার।

• tokens.cssকাঠামো: প্রতিটি কম্পোনেন্ট ক্লাস, প্রতিটি স্কেল, আর কোথাও কোনও রঙের লিটারাল নেই। প্রতিটি থিমে একই ফাইল।122033 বাইট
• theme-day.cssday থিমের রঙ, টাইপ ফ্যামিলি আর আকার: একটিমাত্র :root ব্লক, যেখানে প্রতিটি রঙ একবার light-dark() জোড়া হিসেবে ঘোষিত।10828 বাইট
• theme-plain.cssplain থিমের রঙ, টাইপ ফ্যামিলি আর আকার: একটিমাত্র :root ব্লক, যেখানে প্রতিটি রঙ একবার light-dark() জোড়া হিসেবে ঘোষিত।10286 বাইট
• theme-signal.csssignal থিমের রঙ, টাইপ ফ্যামিলি আর আকার: একটিমাত্র :root ব্লক, যেখানে প্রতিটি রঙ একবার light-dark() জোড়া হিসেবে ঘোষিত।11083 বাইট
• rastrillo.jsপ্রোগ্রেসিভ-এনহ্যান্সমেন্ট শিম: ফ্র্যাগমেন্ট পোলিং, বিজি স্টেট আর লাইট ডিসমিস। প্রতিটি স্ক্যাফোল্ড করা অ্যাপ এটি পায়।16364 বাইট
• select.jsfield-select-এর সার্চযোগ্য কম্বোবক্স। কোনও select নিজে data-rst-select দিয়ে না চাইলে নিষ্ক্রিয়, আর আলাদা করে মুছে ফেলা যায়।11919 বাইট
• datetime.jsতারিখ ফিল্ডের স্বাভাবিক-ভাষার ইনপুট। কোনও ফিল্ড data-rst-date বা data-rst-time দিয়ে না চাইলে নিষ্ক্রিয়, আর আলাদা করে মুছে ফেলা যায়।76584 বাইট
• calendar.jsওই ফিল্ডের ক্যালেন্ডার বোতাম যে মাসের গ্রিড খোলে। datetime.js প্যানেল না চাওয়া পর্যন্ত নিষ্ক্রিয়, আর আলাদা করে মুছে ফেলা যায়: এটি ছাড়া বোতামটি ব্রাউজারের নিজস্ব পিকারে ফিরে যায়।22725 বাইট

নতুন অ্যাপ সব মিলিয়ে 260453 বাইট CSS আর JavaScript পায়: tokens.css, একটি থিম, আর স্ক্রিপ্টগুলি।

নতুন rastrillo অ্যাপে

rastrillo new এগুলি অ্যাপের static ডিরেক্টরিতে লেখে আর লেআউট থেকে লিঙ্ক করে, আগে tokens.css। তারপর থেকে সেগুলি আপনার: বদলে নিন, বা যেটা কাজে লাগে না মুছে দিন।

rastrillo new --theme=day myapp

থিম দু'বার পিন করা হয়। --theme ঠিক করে সরবরাহ করা কোন থিমটি static/theme.css-এ কপি হবে, আর অ্যাপ তৈরির সময়েই তা লিখে রাখা হয়।

const vendoredTheme = "day"

ফ্রেমওয়ার্ক ছাড়াই ব্যবহার

উপরের নামগুলিই লিঙ্ক। tokens.css আর একটি থিম নিন, গোটা ভিজ্যুয়াল সিস্টেম আপনার: সাদামাটা ক্লাস, সাধারণ HTML, কোনও বিল্ড স্টেপ নেই।

আপগ্রেড করা

যে ফাঁদটি একটি বিকেল খরচ করার আগেই জেনে রাখা ভালো: tokens.css স্ক্যাফোল্ডের সময় অ্যাপের static ডিরেক্টরিতে কপি হয়ে সেখানেই জমে যায়, অথচ সে যেসব partial-কে স্টাইল করে সেগুলি মডিউলের সঙ্গে আপগ্রেড হতে থাকে। অ্যাপ নিঃশব্দে নতুন মার্কআপ পুরোনো CSS-এর উপর চালাতে পারে। আপগ্রেড করার সময় tokens.css আবার কপি করুন, সঙ্গে থিম আর স্ক্রিপ্টগুলিও।

rastrillo doctor অ্যাপের জমে থাকা ফাইলগুলি মডিউলের ফাইলের সঙ্গে মিলিয়ে দেখবে আর সেগুলি আবার কপি করার প্রস্তাব দেবে।