postcss-flexbox کے ساتھ پیچیدہ ترتیب کی تعمیر

Sep 17, 2025
کيسے

FlexBox سی ایس ایس بلٹ کو کم کرنے کے لئے ایک عظیم آلے ہے، اور کچھ چینی میں ذریعہ آرڈر اور سیدھ جیسے چیزوں سے نمٹنے کے لئے بنایا گیا ہے. لیکن یہ ریاضی اور گٹر کے سائز کو تخلیق کرنے کے لئے کسی بھی مدد کی پیشکش نہیں کرتا. جیسا کہ بہت سے ماہرین بار بار ریاست: FlexBox اچھا ہے، لیکن یہ ایک گرڈ نظام نہیں ہے.

ہمیں FlexBox استعمال کرنا چاہئے، لیکن ہمیں گرڈ کے نظام کے پیچھے بنیادی تصورات کو دور نہیں کرنا چاہئے جو ہمیں ڈیزائن کے 'جغرافیہ دور' سے باہر نکالا.

  • کالمز کو کچھ کرنے کے لئے متناسب بنائیں
  • آپ کے ڈیزائن میں مسلسل گٹروں کا استعمال کریں

ہم وہاں بہت سے Flexbox گرڈ کے نظام میں سے ایک استعمال کرسکتے ہیں، لیکن تمام ایمانداری میں، ان کے پیچھے شیلیوں کو زیادہ تر فلوٹ پر مبنی گرڈ کے طور پر بھی شامل ہیں. مصنفین صرف ڈسپلے شامل کریں: کنٹینر پر فلیکس، کچھ مددگار طبقات کے ساتھ ساتھ جو flexbox خصوصیات (مثال کے طور پر، ایک کلاس کی طرح . گرڈ-عمودی-سیدھ-مڈ ایک obfuscation ہے سیدھ - اشیاء: سینٹر ).

صرف فرق یہ ہے کہ اب کالم 'لچکدار' ہیں، جس کا مطلب یہ ہے کہ ہم اس شوگر میں پہلے ذکر کرتے ہیں. لیکن یہ اب بھی اہم مسائل کو حل نہیں کرتا جو آج گرڈ کا سامنا کرتا ہے: گرڈ سسٹمز اب بھی سی ایس ایس بلٹ کی ایک ٹن کی پیداوار کرتا ہے، اور گرڈ اب بھی بورنگ ہیں.

  • 25 اوپر کلاس ویب سائٹ ٹیمپلیٹس

گرڈ کے ساتھ مسئلہ

System bloat: Bootstrap’s generated CSS for the grid alone is 16,435 characters – most of which you’ll never use

سسٹم بلٹ: صرف گرڈ کے لئے بوٹسٹریپ کے پیدا کردہ سی ایس ایس 16،435 حروف ہے - جس میں سے اکثر آپ کبھی بھی استعمال نہیں کریں گے

گرڈ مصنفین عام طور پر سی ایس ایس کے بڑے پیک کو تقسیم کرتے ہیں جو کچھ مباحثہ آلہ کے سائز کے مطابق آفسیٹ، ذریعہ آرڈر، سیدھ اور سائز تبدیل کرسکتے ہیں. وہ GZIP پر انحصار کرتے ہیں کہ کچھ نقصان کو کم کرنے کے لئے، لیکن یہ سب کچھ نہیں ملتا. اگر آپ کو ان اضافی خصوصیات کی ضرورت نہیں ہے تو کیا ہوگا؟

فریم ورک کو فرض کر رہے ہیں کہ آپ فی الحال پیشکش گرڈ مکسکس کا استعمال کرتے ہیں، سب سے بہتر حل ان لوگوں کو سیکھنے اور اپنے کالموں کی تشکیل کرنے کے لئے ہوسکتا ہے. یہ تھوڑا سا بلاشبہ پیدا کرتا ہے، لیکن آپ کے گرڈ کو مختلف فریم ورک کے درمیان بہت زیادہ نقل و حرکت پیش کرتا ہے.

دوسرا مسئلہ پر. ڈیزائنرز ذہنی طور پر مساوی طور پر سائز کے کالموں کے ایک مخصوص مجموعہ پر مبنی ان کے تمام فیصلوں کو بنانے کے لئے بند کر دیا گیا ہے. اس کے نتیجے میں، پورے انٹرنیٹ کو 'موبائل پر اسٹیک میں ایک دوسرے کے ساتھ دھونا شروع کرنا شروع ہوتا ہے. 1/12 کالم کے مجموعے کسی اور کے ساتھ 'dystopia.

Flexbox متعارف کرایا فلیکس بڑھتی ہوئی ، جس نے ہمیں تھوڑا سا آزاد کیا. اب ہم اس سائز کو مقرر کر سکتے ہیں جو اچھے نظر آتے ہیں اور باقی جگہ پر ایک وسیع عنصر کے ساتھ بھرتے ہیں، لیکن گٹروں کو مسلسل صفحے میں مسلسل طور پر لائن کرتے ہیں؟ کیا مواد کے علاقے ذہن میں کسی بھی قسم کے تناسب کے ساتھ رکھی جاتی ہیں، یا ہم اسے صرف ونگنگ کرنے کے لئے واپس ہیں؟

اژدھا داخل ہو

ان دونوں مسائل کا حل پوسٹ سی ایس ایس-اینٹی کے نام سے ایک فنکشن میں لپیٹ لیا جاتا ہے. POSTCS پلگ ان کی تعمیر کے اوزار جیسے ویبپ، گلپ یا صرف کمانڈ لائن کے ساتھ استعمال کیا جا سکتا ہے. اینٹی بے چینی طور پر سادہ سی ایس ایس (یا کسی بھی پریفورسر) میں بے حد سادہ API کے ساتھ ہے جو ماسک درجنوں دماغ بگگلنگ کیل فارمولا. یہ دو مکسین کی طرح پیرامیٹرز گرڈ دوستانہ سائز کی ایک بڑی تعداد میں لے جانے کی ضرورت ہوتی ہے.

ایک مثال یہ واضح کر سکتا ہے: چوڑائی: سائز (1/2) حاصل کریں (1) واپسی کیلک (99.99٪ * 1/2 - (30px - 30px * 1/2)) . چلو اس کو توڑ دو

  • سائز () سائز کی ایک جگہ الگ الگ فہرست ہے. یہ مختلف قسم کے سائز کا کوئی مجموعہ ہوسکتا ہے: درست سی ایس ایس کی لمبائی کی شکل میں فکسڈ نمبر ( پی ایکس ، ایم ، ٪ )؛ فرائض یا فلوٹ نمبر (جو کچھ بھی باقی ہے وہ واپس، سینس مقررہ نمبر)؛ اور آٹو مطلوبہ الفاظ (جو کچھ بھی باقی ہے اس کا سائز باقی ہے، سینسروں اور فکسڈ نمبر)
  • پلاک () ایک 1 پر مبنی انڈیکس ہے جو آپ کی فہرست سے گرڈ دوستانہ سائز حاصل کرتا ہے. تو سائز (1px 2px 3px) حاصل کریں (2) واپس آ جائے گا 2px.
  • The. کیل فارمولہ ایک گرڈ دوستانہ سائز ہے

ہم ان کے درمیان ایک 30px گٹر کے ساتھ دو کالم گرڈ میں ہر کالم کے لئے چوڑائی حاصل کرتے ہیں: 

.grid {
  ڈسپلے: فلیکس؛
  فلیکس لپیٹ: لپیٹ؛
}

.نصف {
  چوڑائی: سائز (1/2) حاصل کریں (1)؛ / * واپسی کیلک (99.99٪ * 1/2 - (30px - 30px * 1/2)) * /
  مارجن دائیں: 30px؛ / * ہر کالم کے دائیں طرف ایک گٹر رکھتا ہے * /
}

.half: nth-child (2n + 2) {/ * 2nd عنصر میں شروع ہوتا ہے اور 2s * / کی طرف سے گنتی شروع ہوتی ہے * /
  مارجن دائیں: 0؛ / * ہر قطار سے آخری گٹر کو ہٹا دیتا ہے * /
}

یہ پہلے سے ہی ڈیزائنرز کو ان سائز کو استعمال کرنے کی طاقت دیتا ہے جہاں کہیں بھی وہ دیکھتے ہیں، لیکن چلو گہری ڈوبتے ہیں.

سائز (100px 1/2) حاصل کریں (1) واپسی 100px. . کافی آسان ہے، لیکن ہمیں واپس آنے کے لئے اینٹی کا استعمال کیوں کرنا ہوگا 100px. ؟ ہم اسے ایک سیکنڈ میں ملیں گے.

سائز (100px 1/2) حاصل کریں (2) واپسی کیلک ((99.99٪ - (100px + (30px * 1))) * 1/2 - (30px - 30px * 1/2)) . حضور گھٹیا. اینٹی فکسڈ نمبروں کا کل سائز تلاش کر رہا ہے، اور پھر واپس آ رہا ہے 1/2. جو کچھ بھی چھوڑ دیا جاتا ہے - ایک این جی گرڈ دوستانہ انداز میں.

ہم ان کا استعمال کرسکتے ہیں کیل ایک کے ساتھ ایک گرڈ بنانے کے لئے فارمولا 100px. کالم اور دو 1/2. جیسے جیسے کالم (میں اسے ختم کروں گا .GRID. درختوں کو بچانے کے لئے طرزیں، لیکن آپ کو کوڈ میں شامل کرنے کا یقین ہے): 

. فکسڈ سائز {
  چوڑائی: سائز (100px 1/2) حاصل کریں (1)؛ / * 100px واپسی کرتا ہے (میں جانتا ہوں کہ یہ بیوقوف لگتا ہے لیکن تھوڑا سا وقت کے لئے میرے ساتھ برداشت) * /
  مارجن دائیں: 30px؛
}

.نصف {
  چوڑائی: سائز (100px 1/2) حاصل کریں (2)؛ / * واپسی کیلک ((99.99٪ - (100px + (30px * 1))) * 1/2 - (30px - 30px * 1/2)) * /
  مارجن دائیں: 30px؛
}

.half: nth-child (3n + 3) {
  مارجن دائیں: 0؛
}

اب ہم کچھ پہلے غیر منقولہ سائز حاصل کرسکتے ہیں، لیکن یہ ابھی تک سپر لچکدار نہیں ہے اور بہت سے سائز سے نمٹنے کے دوران بہت ساری لکھنے کی ضرورت ہوتی ہے.

PreProcessor Looping.

Minimal markup: A minimal markup, two-column, nth grid using postcss-ant. Notice how there is no margin-right on the last element in the row

کم سے کم مارک اپ: ایک کم سے کم مارک اپ، دو کالم، NTH گرڈ پوسٹ CSS-ANT کا استعمال کرتے ہوئے. یاد رکھیں کہ قطار میں آخری عنصر پر کوئی مارجن صحیح نہیں ہے

Preprocessorsers اور Postcss ہمیشہ ساتھ ساتھ نہیں ملتا ہے - خاص طور پر جب اپنی مرضی کے مطابق نحو شامل ہے. خوش قسمتی سے، اینٹی کی API پری پروسیسر کے دوستانہ ہیں. ہم ایک postcs-parser کی طرح Postcs-Parser کا استعمال کر سکتے ہیں جیسے POSCSS-SCSS ایک پریس ایس ایس پلگ ان کے ساتھ، لیکن یہ نقطہ نظر بہت غیر معمولی / غیر محدود پوسٹ سی ایس ایس پلگ ان کا استعمال کرتا ہے جو غریب طور پر sass کی فعالیت کی تعریف کرتا ہے. مجھے بہترین کام کا بہاؤ مل گیا ہے:

  • دیکھنے کے لئے نوڈ ساس کی طرح تیزی سے پری پروسیسر کا استعمال کریں in.scss. کرنے کے لئے باہر. css.
  • Postcss کو دیکھنے کے لئے استعمال کریں باہر. css. کرنے کے لئے Final.css.
  • & lt؛ لنک اور جی ٹی؛ کرنے کے لئے Final.css. آپ کے مارک اپ میں

یہ آپ کو سب سے بہترین preprocory syntax فراہم کرتا ہے تمام postcs کے ساتھ آپ کے دل کی خواہشات پلگ ان.

اب ٹھنڈی چیزوں کے لئے. PreProcessors عام طور پر ایک iTerator فراہم کرتے وقت ایک مخصوص تعداد کو لوپ کرنے کا ایک طریقہ ہے: 

 @ کے لئے میں $ 1 سے 3 {
  مواد: $ میں؛ // واپسی کے مواد: 1؛ مواد: 2؛ مواد: 3؛
}

preprocessors کے تھوڑا سا علم کے ساتھ، آپ واقعی دلچسپ طریقے سے اینٹی کا استعمال کرتے ہوئے شروع کر سکتے ہیں ... 

 $ سائز: 100px 1/2 1/2؛
$ گٹر: 30px؛
$ لمبائی: لمبائی ($ سائز)؛

. کالم {
  مارجن دائیں: $ گٹر؛

  @ کے لئے میں $ 1 سے $ لمبائی سے {
    & amp؛: nth-ynd-y_ {$ لمبائی} n + # {$ i}) {
      چوڑائی: سائز ($ سائز) حاصل ($ i) گٹر ($ گٹر)؛
    }
  }

  & amp؛: nth-ynd-y_ {$ لمبائی} n + # {$ لمبائی}) {
    مارجن دائیں: 0؛
  }
}

اب ہمارے غیر قانونی طور پر سائز کے کالم نئے قطاروں کے بغیر اضافی مارک اپ کے بغیر لپیٹ. آگے بڑھیں اور اس کوڈ کے ساتھ ٹنکر. مختلف سائز، گٹروں کی کوشش کریں، اور نئے سائز شامل کریں (جیسے 100px آٹو 100px).

یہ اینٹی کے ساتھ ایک خوبصورت عام پیٹرن ہے، لہذا میں نے اسے ایک جائیداد میں لپیٹ لیا ہے جو وینیلا سی ایس ایس کے ساتھ کام کرتا ہے: 

. گرڈ {
  پیدا گرڈ: سائز (100px 1/2 1/2)؛ / * آپ اضافی اختیارات منتقل کر سکتے ہیں، لیکن پلاک () اب ضرورت نہیں ہے. * /
}

بہت سے اختیارات

Preprocessor loops: ant really begins to show its strength when we combine it with preprocessor loops to create layouts that used to be impossible

Preprocessor loops: اینٹی واقعی اس کی طاقت کو ظاہر کرنے کے لئے شروع ہوتا ہے جب ہم اس پروسیسروسیسر loops کے ساتھ جمع کرنے کے لئے ناممکن ہونے کے لئے استعمال کرتے ہیں

نیت گرڈ بہت اچھا ہیں جب آپ کو عناصر کے سائز اور تعداد کو منظور کیا جاسکتا ہے، لیکن کبھی کبھی آپ کو ایک کنٹینر بنانا چاہتے ہیں اور صرف اس میں کچھ بے ترتیب سائز کے عناصر کو ڈمپ کریں گے. ان صورتوں میں، منفی مارجن گرڈ آپ کی بہترین شرط ہے. بس پاس منفی مارجن جیسے جیسے اینٹی: 

.grid {
  مارجن: 0 -15px؛
}

. کالم {
  چوڑائی: سائز (1/3) حاصل کریں (1) گرڈ (منفی مارجن)؛
  مارجن: 0 15px؛
}

نتیجہ

یہ مثالیں تمام ٹھنڈی چیزوں پر صرف ایک چھوٹا سا جھلک تھے پوسٹس- اینٹی کر سکتے ہیں. اس میں ایک اور اختیاری پیرامیٹرز اور بہت سے وضاحتی غلطی کی ہینڈلنگ کے بہت سے ہیں، لیکن اینٹی کی حقیقی طاقت آپ ہے.

'گونگا' کے اوزار جو صرف تھوڑا سا ڈیٹا واپس لوٹتے ہیں، ہمیشہ بہترین اوزار ہیں، کیونکہ وہ اقتدار واپس ڈویلپر کے ہاتھوں میں ڈالتے ہیں. یہی ہے کہ پوسٹ سی ایس ایس - اینٹی کو کیا کرنا تھا. اگر آپ حوصلہ افزائی کر رہے ہیں تو، سر corysimmons.github.io/postcss-ant. کچھ چہرہ پگھلنے والے ڈیمو اور میٹھی دستاویزات کے لئے.

یہ مضمون اصل میں نیٹ میگزین کے مسئلہ 286 میں شائع کیا گیا تھا، اسے یہاں خریدیں.

متعلقہ مضامین:

  • ویب ڈیزائن کیوں UX ماہرین کی ضرورت ہے
  • کرسمس 2016 کے لئے 10 اوپر ویب ڈیزائن کتابیں
  • ٹیسٹنگ ویب کارکردگی کے لئے 3 اوپر کے اوزار

کيسے - انتہائی مشہور مضامین

انٹرایکٹو پروٹوٹائپ کی تعمیر کے لئے فریمر ایکس کا استعمال کریں

کيسے Sep 17, 2025

(تصویری کریڈٹ: فریمر) ڈیزائنرز کے طور پر، ہمیشہ آپ کے منصوبے کے لئ..

3D گھاس کیسے بنانا

کيسے Sep 17, 2025

مختلف قسم کے مختلف طریقوں میں 3D گھاس پیدا کی جا سکتی ہے اور کسی بھی قدرت�..

Redux Thunk کے ساتھ شروع کریں

کيسے Sep 17, 2025

ریاست ایک رد عمل کی درخواست کا ایک بڑا حصہ ہے، لہذا Redux عام طور پر اس کے س..

فوٹوشاپ میں 3D متن بنائیں: ایک قدم بہ قدم گائیڈ

کيسے Sep 17, 2025

اس سبق میں، ہم آپ کو ایک ٹکڑا بنانے کے لئے کس طرح دکھایا جائے گا 3D آر..

کلی شاٹ کے ساتھ لاوا چراغ کیسے بنائیں

کيسے Sep 17, 2025

لوا لیمپ کے بارے میں کچھ عجیب طور پر مطمئن ہے. ایک آرام دہ اور پرسکون، رن..

مایا میں اپنی مرضی کے مطابق رگ کنٹرول کیسے بنائیں

کيسے Sep 17, 2025

یہ مایا ٹیوٹوریل آپ کو اپنی مرضی کے مطابق رگوں کی تعمیر کیسے کر�..

کس طرح ذمہ دار اور ڈیوائس - اجناساسک فارم ڈیزائن کرنے کے لئے

کيسے Sep 17, 2025

چاہے یہ ایک سائن اپ بہاؤ یا کثیر نقطہ نظر کا بہاؤ ہے، فارم ڈیجیٹل مصنوعا..

ایڈوب XD کے ساتھ ایک موبائل ایپ پروٹوٹائپ کیسے کریں

کيسے Sep 17, 2025

یہ سبق، آپ کو ایڈوب ایکس ڈی میں موبائل ایپ پروٹوٹائپ بنانے کے لئے کس �..

اقسام