শুরু করা
rastrillo অ্যাপ প্রথম দিনেই এই সবটা পায়, তবে ডিজাইন সিস্টেম যে কেউ ব্যবহার করতে পারে। JavaScript দিয়ে ক্রমান্বয়ে উন্নত, কিন্তু JavaScript লাগে না।
স্টাইলশিট
tokens.css হল কাঠামো: কম্পোনেন্ট ক্লাস, লেআউট, আর টাইপ, স্পেসিং ও রেডিয়াসের স্কেল। এর মানগুলি রেফারেন্স, ঠিক হয় অন্যত্র। themes/<name>.css হল রং, টাইপ ফ্যামিলি আর আকার: একটিই :root ব্লক, যেখানে প্রতিটি রং একবার light-dark() জোড়া হিসেবে ঘোষিত।
স্ক্রিপ্ট
rastrillo.js হল প্রোগ্রেসিভ-এনহ্যান্সমেন্ট শিম: ফ্র্যাগমেন্ট পোলিং, লাইট ডিসমিস, সুইচ টেনে সরানো। busy.js হল বিজি নিয়ম। যেখানে CSS পারে না, সেখানে anchor.js ড্রপডাউন মেনু স্ক্রিনের ভেতরে রাখে। select.js আর datetime.js হল এনহ্যান্সমেন্ট, কোনও কন্ট্রোল নিজে থেকে না চাওয়া পর্যন্ত প্রতিটিই নিষ্ক্রিয়, আর প্রতিটিই আলাদা করে মুছে ফেলা যায়।
প্রতিটি ফাইলের ওজন
আকার KiB-তে। দর্শক gzip করা সংস্করণটিই ডাউনলোড করেন।
- tokens.cssকাঠামো: প্রতিটি কম্পোনেন্ট ক্লাস, প্রতিটি স্কেল, আর কোথাও কোনও রঙের লিটারাল নেই। প্রতিটি থিমে একই ফাইল।লেখা অবস্থায় ২৮১ · gzip করার পর ৭৩ · মন্তব্য বাদ দিয়ে gzip করার পর ২১
- theme-day.cssday থিমের রঙ, টাইপ ফ্যামিলি আর আকার: একটিমাত্র :root ব্লক, যেখানে প্রতিটি রঙ একবার light-dark() জোড়া হিসেবে ঘোষিত।লেখা অবস্থায় ২৭ · gzip করার পর ৭.৩ · মন্তব্য বাদ দিয়ে gzip করার পর ১.৭
- theme-plain.cssplain থিমের রঙ, টাইপ ফ্যামিলি আর আকার: একটিমাত্র :root ব্লক, যেখানে প্রতিটি রঙ একবার light-dark() জোড়া হিসেবে ঘোষিত।লেখা অবস্থায় ১৮ · gzip করার পর ৪.২ · মন্তব্য বাদ দিয়ে gzip করার পর ১.১
- theme-signal.csssignal থিমের রঙ, টাইপ ফ্যামিলি আর আকার: একটিমাত্র :root ব্লক, যেখানে প্রতিটি রঙ একবার light-dark() জোড়া হিসেবে ঘোষিত।লেখা অবস্থায় ১৮ · gzip করার পর ৪.৬ · মন্তব্য বাদ দিয়ে gzip করার পর ১.২
- shell.cssফোনে পাতার মধ্যে স্লাইড, sidebar আর console শেলের জন্য। shell.js-এর সঙ্গে মুছে ফেলা যায়।লেখা অবস্থায় ৪.২ · gzip করার পর ১.১ · মন্তব্য বাদ দিয়ে gzip করার পর ০.৫
- rastrillo.jsপ্রোগ্রেসিভ-এনহ্যান্সমেন্ট শিম: ফ্র্যাগমেন্ট পোলিং, লাইট ডিসমিস আর সুইচ টেনে সরানো। প্রতিটি স্ক্যাফোল্ড করা অ্যাপ এটি পায়।লেখা অবস্থায় ১৯ · gzip করার পর ৭.২ · মন্তব্য বাদ দিয়ে gzip করার পর ২.৬
- busy.jsবিজি নিয়ম: ফর্ম পাঠানোর সময় তার বোতাম অন্তত 650ms স্পিনার দেখায় আর দ্বিতীয় সাবমিট ফিরিয়ে দেয়; পেছনে ফিরলে আবার আগের মতো হয়। প্রতিটি স্ক্যাফোল্ড করা অ্যাপ এটি পায়।লেখা অবস্থায় ১৫ · gzip করার পর ৫.৩ · মন্তব্য বাদ দিয়ে gzip করার পর ১.৩
- live.jsলাইভ পেজ: সার্ভার জানালে যে ডেটা বদলেছে, তখন নিজে থেকে হালনাগাদ হওয়া অংশ, আর যে ফর্ম একই জায়গায় সেভ হয়। কোনও পেজে rastrillo-live মেটা ট্যাগ না থাকলে নিষ্ক্রিয়, আর আলাদাভাবে মুছে ফেলা যায়।লেখা অবস্থায় ২৯ · gzip করার পর ১০.০ · মন্তব্য বাদ দিয়ে gzip করার পর ৫.০
- light.jsযে আলো গভীরতার স্টাইলগুলো পড়ে: সময় অনুযায়ী আলোকিত ছায়া, আর পয়েন্টারের নিচের বোতামে একটা দ্যুতি। স্থির ডিজ়াইনের জন্য এটি মুছে ফেলুন।লেখা অবস্থায় ১১ · gzip করার পর ৪.১ · মন্তব্য বাদ দিয়ে gzip করার পর ২.১
- anchor.jsযে ব্রাউজারে CSS অ্যাঙ্কর পজিশনিং নেই, সেখানে ড্রপডাউনের মেনু স্ক্রিনের ভেতরে রাখে। যেখানে আছে সেখানে কিছুই করে না: আপনার সমর্থিত সব ব্রাউজারে এলে এটি মুছে দিন।লেখা অবস্থায় ৩.২ · gzip করার পর ১.৪ · মন্তব্য বাদ দিয়ে gzip করার পর ০.৬
- shell.jssidebar আর console শেলের ফোন নেভিগেশন: পাতার মধ্যে স্লাইড, ইতিহাস আবার কাজে লাগানো পেছনে, আর আপনি যে অংশ ছেড়ে গিয়েছিলেন সেখানে ফোকাস ফেরানো। আলাদা করে মুছে ফেলা যায়।লেখা অবস্থায় ৮.০ · gzip করার পর ৩.২ · মন্তব্য বাদ দিয়ে gzip করার পর ১.৪
- transition.jscolumn, stage ও topbar পাতায় পাতার ট্রানজিশন বাদ পড়লে ত্রুটি লগ হওয়া আটকায়। sidebar ও console পাতায় এটি লাগে না।লেখা অবস্থায় ০.৯ · gzip করার পর ০.৪ · মন্তব্য বাদ দিয়ে gzip করার পর ০.৪
- select.jsfield-select-এর সার্চযোগ্য কম্বোবক্স। কোনও select নিজে data-rst-select দিয়ে না চাইলে নিষ্ক্রিয়, আর আলাদা করে মুছে ফেলা যায়।লেখা অবস্থায় ৫৫ · gzip করার পর ১৮ · মন্তব্য বাদ দিয়ে gzip করার পর ৮.০
- datetime.jsতারিখ ফিল্ডের স্বাভাবিক-ভাষার ইনপুট। কোনও ফিল্ড data-rst-date বা data-rst-time দিয়ে না চাইলে নিষ্ক্রিয়, আর আলাদা করে মুছে ফেলা যায়।লেখা অবস্থায় ৭৬ · gzip করার পর ২৪ · মন্তব্য বাদ দিয়ে gzip করার পর ১১
- calendar.jsওই ফিল্ডের ক্যালেন্ডার বোতাম যে মাসের গ্রিড খোলে। datetime.js প্যানেল না চাওয়া পর্যন্ত নিষ্ক্রিয়, আর আলাদা করে মুছে ফেলা যায়: এটি ছাড়া বোতামটি ব্রাউজারের নিজস্ব পিকারে ফিরে যায়।লেখা অবস্থায় ২২ · gzip করার পর ৭.১ · মন্তব্য বাদ দিয়ে gzip করার পর ৩.১
নতুন অ্যাপ লেখা অবস্থায় ৫৪৩ KiB CSS আর JavaScript পায়, gzip করার পর ১৬০ KiB: tokens.css, একটি থিম, আর স্ক্রিপ্টগুলি।
নতুন rastrillo অ্যাপে
rastrillo new এগুলি অ্যাপের static ডিরেক্টরিতে লেখে আর লেআউট থেকে লিঙ্ক করে, আগে tokens.css। তারপর থেকে সেগুলি আপনার: বদলে নিন, বা যেটা কাজে লাগে না মুছে দিন।
rastrillo new --theme=signal myappথিম দু'বার পিন করা হয়। --theme ঠিক করে সরবরাহ করা কোন থিমটি static/theme.css-এ কপি হবে, আর অ্যাপ তৈরির সময়েই তা লিখে রাখা হয়।
const vendoredTheme = "signal"ফ্রেমওয়ার্ক ছাড়াই ব্যবহার
উপরের নামগুলিই লিঙ্ক। tokens.css আর একটি থিম নিন, গোটা ভিজ্যুয়াল সিস্টেম আপনার: সাধারণ HTML-এ অ্যাট্রিবিউট, কোনও বিল্ড স্টেপ নেই।
এই ক্রমে লিংক করুন, আগে tokens.css:
<link rel ="stylesheet" href ="tokens.css" >
<link rel ="stylesheet" href ="theme-signal.css" >আপগ্রেড করা
যে ফাঁদটি একটি বিকেল খরচ করার আগেই জেনে রাখা ভালো: tokens.css স্ক্যাফোল্ডের সময় অ্যাপের static ডিরেক্টরিতে কপি হয়ে সেখানেই জমে যায়, অথচ সে যেসব partial-কে স্টাইল করে সেগুলি মডিউলের সঙ্গে আপগ্রেড হতে থাকে। অ্যাপ নিঃশব্দে নতুন মার্কআপ পুরোনো CSS-এর উপর চালাতে পারে। আপগ্রেড করার সময় tokens.css আবার কপি করুন, সঙ্গে থিম আর স্ক্রিপ্টগুলিও।
rastrillo doctor অ্যাপের জমে থাকা ফাইলগুলি মডিউলের ফাইলের সঙ্গে মিলিয়ে দেখবে আর সেগুলি আবার কপি করার প্রস্তাব দেবে।