میرے بہترین طریقے – CSS
1. پیش لفظ
آج کل CSS سے اس کی صلاحیت سے کم کام لیا جاتا ہے (under-utilized)۔ Angular/React/Vue/... ڈویلپرز اور UI ڈیزائنرز کے درمیان ایک خلیج ہے۔
UI ڈیزائنر تیس <div> ایک دوسرے میں گھسا کر ان پر چالیس CSS کلاسز لگا دیتا ہے، جبکہ Angular ڈویلپر ہر دو ہفتے بعد تازہ ترین لائبریری پر جھوم اٹھتا ہے، حالانکہ اس کا ڈیپنڈنسی
جہنم کب کا npm i --force کے بغیر بِلڈ نہیں ہوتا، کیونکہ Peer Dependencies آپس میں ٹکراتی ہیں۔ TypeScript کے دیوانے کو CSS اور HTML سے کچھ خاص غرض نہیں۔ سادہ ترین اِن پٹس کے لیے بھی
اسے Material استعمال کرنا پڑتا ہے، کیونکہ اسے ڈر ہے کہ ورنہ ویلیڈیشن اس سے نہیں ہو پائے گی۔ اور پہیہ دوبارہ ایجاد کر کے وقت ضائع کرنا تو کوئی چاہتا ہی نہیں۔ یہ بات اسے سمجھ نہیں آتی کہ پہلی ہی
ایسی ضرورت پر جو لائبریری پوری نہیں کرتی، سارا وقت پھر سے ضائع ہو جاتا ہے اور بندہ خود کو لائبریری کے GitHub Issues پڑھتے ہوئے پاتا ہے۔
Fullstack پروجیکٹ میں ڈویلپر کو شاذ و نادر ہی فرنٹ اینڈ ڈیزائنر کے طور پر اپنی صلاحیتیں آزمانے کا موقع ملتا ہے۔ اسے Figma میں اسکرین ماک اپس ملتے ہیں اور انہیں ہو بہو بنانا ہوتا ہے۔ اس قسم کے زیادہ تر فرنٹ اینڈ ڈویلپرز کو یہ علم ہی نہیں کہ CSS کی صرف ایک سطر سے ریسپانسیو لے آؤٹ بن سکتا ہے۔ CSS پہلے سے کہیں زیادہ طاقتور ہے۔ گئے وہ دن جب JS سے اسٹائل کے جگاڑ، بے شمار media queries اور IE 8 کے لیے عارضی حل کرنے پڑتے تھے۔ ہُرّے!
2. بالکل درمیان میں
انٹرویو میں ہمیشہ پسند نہیں کیا گیا، لیکن مجھے بڑا مزہ آتا تھا: اس سوال کا کہ کیا میں فرنٹ اینڈ میں اچھا ہوں، میں شوق سے یہ جواب دیتا تھا: “اوہ ہاں۔ میں ایک <div> کو عمودی طور پر درمیان میں لا سکتا ہوں۔”
کسی div کو درمیان میں لانا بدنامی کی حد تک مشکل ہے۔
اب نہیں:
.parent {
display: grid;
place-items: center
}3. ریسپانسیو Grid
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}4. ریسپانسیو Flex
.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.box {
flex: 1 1 150px; /* Stretching: */
flex: 0 1 150px; /* No stretching: */
margin: 5px;
}5. صفحے کا لے آؤٹ
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}6. سائیڈ بار
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}