براؤزر میں ڈیزائن کریں

مواد

• کوڈ کے ساتھ ڈیزائن کرنے کے فوائد
• پہلے ڈیٹا
• موبائل کی نیکی
• ایک مشترکہ زبان کی تلاش
• تیزی سے سیکھیں
• تیز تکرار
• لانچ کرنے کے لئے تیز وقت
• HTML5 کیوں؟
• جادوئی اعداد و شمار- وصف
• CSS3 - یہ نیا فوٹوشاپ ہے
• ساس + کمپاس: جادوئی طور پر مزیدار
• jQuery: اوہ ، ہاں آپ کر سکتے ہیں
• فریم ورک
• آخری خیالات

یہ مضمون سب سے پہلے. نیٹ میگزین کے 235 کے شمارے میں شائع ہوا - ویب ڈیزائنرز اور ڈویلپرز کے لئے دنیا کا سب سے زیادہ فروخت ہونے والا رسالہ۔

میں کبھی بھی ضرورت سے زیادہ کوئی اور کام کرنے کا پرستار نہیں رہا ہوں۔ میں ان طریقوں اور ٹولز کا اندازہ کرتا ہوں جن کی بنیاد پر وہ مجھے یا اپنی ٹیم کو زیادہ موثر بناتے ہیں۔ وہ کتنی جلدی ہمیں کام کرنے والی مصنوعات میں لے جاتے ہیں؟ وہ بات چیت کرنے میں کتنے موثر ہیں؟ کیا وہ ہمارے راستے سے دور رہتے ہیں؟

کئی سالوں میں ، میں نے اپنے ڈیزائن عمل اور اوزار کو ایڈجسٹ کیا ہے۔ میں تصور کرتا ہوں کہ میں ایسا ہی کرتا رہوں گا۔ یہی ٹیکنالوجی اور ویب کے لئے ڈیزائننگ کی نوعیت ہے۔ یہ صنعت مستقل طور پر تیار ہورہی ہے۔ ہمارے عمل اور اوزار کو بھی تیار کرنے کی ضرورت ہے۔

ایچ ٹی ایم ایل 5 اور سی ایس ایس 3 فوٹوشاپ سے دور اور ایک زندہ ، سانس لینے کے ڈیزائن کی سمت - زیادہ سے زیادہ ڈیزائن کے عمل کو اپ اسٹریم میں منتقل کرنا آسان بنا دیتا ہے۔ فاؤنڈیشن ، بوٹسٹریپ اور jQuery جیسے ٹولز آپ کے ڈیزائن کے عمل کو زیادہ سے زیادہ قابل رسائی کوڈ پر منتقل کرتے ہیں۔

کوڈ کے ساتھ ڈیزائن کرنے کے فوائد

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

پہلے ڈیٹا

HTML کے ساتھ ڈیزائن کرنے کے بارے میں جو چیز میں ہمیشہ پسند کرتا ہوں وہ یہ ہے کہ اس سے اعداد و شمار کے پہلے نقطہ نظر سے سوچنے کی حوصلہ افزائی ہوتی ہے۔ اس کے برعکس ، ڈرائنگ پروگرام مثلا Ill السٹریٹر ، اومنی گرافل ، یا بالسمیق کا استعمال کرتے ہوئے ، آپ ایک باکس کے ساتھ شروع کرتے ہیں اور اسے ڈیٹا سے پُر کرتے ہیں۔

ایچ ٹی ایم ایل میں آپ ڈوم (دستاویز آبجیکٹ ماڈل) تعمیر کرتے ہیں ، اس طرح کے مندرجات کی میز بنانا۔ یہ بامعنی درجہ بندی کے ساتھ صحیح انفارمیشن ڈیزائن میں واپسی ہے۔ HTML5 نئے معنوی عناصر: آرٹیکل ، سیکشن ، ہیڈر ، ایک طرف ، فوٹر اور اسی طرح کے اضافے کے ساتھ ایک قدم آگے جاتا ہے۔ یہ ڈیٹا او approachل نقطہ نظر موبائل کو پہلے ، ذمہ دار ڈیزائنوں کے ساتھ اچھی طرح ملا دیتا ہے۔

موبائل کی نیکی

اگر آپ یہ پڑھ رہے ہیں تو ، آپ شاید موبائل کے لئے ڈیزائن کر رہے ہو۔ اور امکانات ہیں کہ آپ کو ایک یا دو فارم تیار کرنے کی ضرورت ہے۔ HTML5 کے ساتھ ، آپ کی قسمت میں ہے۔ HTML5 سے پہلے ، آپ کی ان پٹ کی اقسام متن یا پاس ورڈ فیلڈ میں بہت زیادہ تھیں۔ HTML5 نے متعدد اضافی ان پٹ اقسام کو متعارف کرایا ، جن میں شامل ہیں:

ان پٹ کی قسم = "ای میل"> ان پٹ کی قسم = "ٹیلی"> ان پٹ کی قسم = "یو آر ایل"> ان پٹ کی قسم = "تاریخ"> ان پٹ کی قسم = "تاریخ وقت">

ان اضافی ، انوکھے ان پٹ اقسام کے بارے میں جو حقیقت میں حیرت انگیز ہے وہ یہ ہے کہ iOS اور Android پر موبائل براؤزر انہیں پہچان لیتے ہیں اور خود بخود ایک سیاق و سباق سے واقف کی بورڈ کو تبدیل کردیتے ہیں ، جس میں کوئی خاص jQuery پلگ ان یا ہیکس کی ضرورت نہیں ہوتی ہے۔ اوہ ، اور اگر آپ کے براؤزر کو نہیں معلوم کہ کیا ہے ان پٹ کی قسم = "ای میل"> ہے ، تو پھر یہ صرف ایک متن ان پٹ سے ڈیفالٹ ہے۔

ایک مشترکہ زبان کی تلاش

"یہ حیرت انگیز ہے کہ ہمارے ڈیزائنرز اور ڈویلپر ایک ہی زبان میں کیسے کام کرسکتے ہیں"۔ جان ڈریگو ، انفلیشن میں ایپلی کیشن ڈویلپر۔

ملاحظہ کریں اگر یہ واقف ہے۔ میں ایک کانفرنس روم میں ہوں جس میں آدھا درجن سرور سائیڈ ایپلی کیشن ڈیوس ہیں جو میرے ارد گرد حلقوں کو روبی ، ازگر ، جاوا یا .NET میں کوڈ کرسکتے ہیں۔ میں اکلوتی ڈیزائنر ہوں۔ میری چند تجاویز کو ابتداء میں مسترد کردیا گیا تھا کیوں کہ اس پر عمل درآمد بہت پیچیدہ ہے۔ میں وائٹ بورڈ تک جاکر بورڈ پر کچھ ایچ ٹی ایم ایل اور سی ایس ایس لکھنا شروع کرتا ہوں تاکہ اس ڈیزائن کو کیسے لاگو کیا جاسکے۔ اچانک گفتگو کا لہجہ بدل جاتا ہے اور ایک ڈویلپر ہچکچاتے ہوئے کہتا ہے ، "ٹھیک ہے ، ہاں - اگر ہم اسے اس طرح سے کرتے ہیں تو ، یہ کام کرسکتا ہے۔"

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

تیزی سے سیکھیں

اگرچہ وائر فریم اور بصری کمپوزٹ منصوبہ بندی میں مدد کرسکتے ہیں ، لیکن یہ جامد نوادرات نظریاتی ہیں۔ آپ نے کتنی بار کسی سے بات چیت کی وضاحت کرنے کی کوشش کی ہے ، صرف ان کا جواب دینے کے لئے ، "مجھے لگتا ہے کہ مجھے اسے دیکھنا پڑے گا۔" جتنی جلدی آپ کسی پروٹو ٹائپ پر پہنچیں گے ، کچھ لوگوں کے ساتھ بات چیت کرسکتی ہے ، آپ اس ڈیزائن کا تجربہ کرسکتے ہیں اور دیکھ سکتے ہیں کہ آیا خیالات کام کر رہے ہیں۔

تیز تکرار

آخری بار جب آپ کا فوٹو شاپ کمپ کے ساتھ میچ سے باہر آنے والا کوئی آخری ڈیزائن تیار ہوا؟ تقریبا کبھی نہیں. ڈیجیٹل پروڈکٹ ڈیزائن کے ساتھ ، تبدیلی مسلسل ہوتی رہتی ہے۔ مزید برآں ، درجن بھر اسکرینوں میں آپ کے عنوانات کے سائز کو 22pt سے 24pt تک بڑھانے جیسی تبدیلیاں فوٹوشاپ میں گھنٹے لگ سکتی ہیں۔ اسمارٹ آبجیکٹ آپ کو فوٹو شاپ میں آبجیکٹ پر مبنی ڈیزائن کی ایک سطح فراہم کرتے ہیں۔ بدقسمتی سے ، زیادہ تر بصری ڈیزائنرز جن کو میں جانتا ہوں وہ سمارٹ آبجیکٹ کا کافی استعمال نہیں کرتے ہیں۔ سی ایس ایس کے ساتھ ، کیونکہ یہ ڈیزائن کے لئے زیادہ منظم انداز کی حوصلہ افزائی کرتا ہے ، اس وجہ سے ٹائپوگرافک تبدیلیوں میں گھنٹوں کی بجائے منٹ لگتے ہیں۔

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

لانچ کرنے کے لئے تیز وقت

برسوں کے دوران ، جب میں نے اپنے ڈیزائن کے زیادہ کام کے بہاؤ کو کوڈ میں تبدیل کیا تو ، میں نے ایک بہتری میں بہتری محسوس کی۔ اس وقت مارکیٹ میں آنے والے وقت میں 20 سے 30 فیصد تک کمی واقع ہوئی۔ میں جتنا زیادہ یہ کام کرتا ہوں ، کم وقت میں نقل کی کوششوں میں صرف کرتا ہوں۔ میں فوٹو شاپ یا آتش بازی میں جانے اور پھر کام کو کوڈ میں دہرانے کے لئے کم سائیکل گزار رہا ہوں۔

کسی وقت ڈیزائن کو کسی قسم کے پسدید کے ساتھ انٹرفیس کرنا پڑتا ہے ، چاہے وہ CMS ، ریل ایپ ہو یا کوئی اور۔ چونکہ میرے ڈیزائن کا زیادہ تر کام ضابطہ میں ہے ، انضمام جلد سے جلد ہوتا ہے۔ کچھ سال پہلے ، میرا ایک مؤکل ، پوائنٹ رول ، پانچ دن میں پروٹوٹائپ سے پروڈکشن گیا تھا۔

HTML5 کیوں؟

HTML5 HTML کے پچھلے ورژن کی نسبت آسان ہے۔ مثال کے طور پر دستاویز کی قسم کا اعلان دیکھیں۔ HTML کے پچھلے ورژن میں ، ڈاکٹرائپ کچھ اس طرح نظر آیا:

! ڈوکائٹ ایچ ٹی ایم ایل پبلک "- // ڈبلیو 3 سی // ڈی ٹی ڈی ایکس ایچ ٹی ایم ایل 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">

اور چھ مختلف ورژن تھے۔ خوش قسمتی سے HTML5 ڈاکٹرائپ اس طرح لگتا ہے:

! ڈوکیئپ HTML>

سنجیدگی سے یہی ہے. حیران کن حد تک آسان۔

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

div id = "ہیڈر> div id =" نوی "> </ div> / div> Div id =" مین "> Div id =" سائڈبار "> </ div> / div> Div id =" فوٹر "> </ div>

وہاں عام سے کچھ بھی نہیں۔ لیکن ایک بار مواد کے ساتھ بھرا ہوا ، یہ ٹیمپلیٹ Div سوپ میں بدل جاتا ہے۔ اس کے برعکس ، HTML5 کے نئے معنوی عناصر کے ساتھ ، آپ کو اسکین کرنے میں بہت آسان اور آسان کچھ ملتا ہے ، جیسے:

ہیڈر> NAV / NAV / ہیڈر> مضمون> ایک طرف> / طرف> / مضمون> فوٹر> / فوٹر>

اس کو دیکھو. کچھ سمجھ میں آجاتا ہے۔

جادوئی اعداد و شمار- وصف

HTML5 ایک اور حیرت انگیز ہک کے ساتھ آیا ہے جو آپ کو اپنے ہی معنی خیز معنی تیار کرنے کی صلاحیت فراہم کرتا ہے: ڈیٹا-. پہلے ، اگر آپ کسی DOM عنصر کو کوئی معنی خیز تفویض کرنا چاہتے ہیں تو آپ ID ، کلاس اور کردار تک محدود تھے۔

بدقسمتی سے ، شناختی انفرادیت ہونی چاہئے۔ کلاس آفاقی ہیں (یپی!) ، لیکن ان کا استعمال جلدی سے گندگی میں بدل سکتا ہے۔ کردار ایک غیر منقولہ اثاثہ ہیں جو اے آر آئی اے کے لئے اہم معنی فراہم کرتے ہیں۔ حال ہی میں ، میں ڈیفالٹ استعمال کر رہا ہوں- ایونٹ سے باخبر رہنے والے تجزیاتی پلیٹ فارم کے لئے جو ہم انفلیکشن میں تیار کررہے ہیں۔ہم اپنے ڈیزائنوں کو جانچنے کے بڑے پرستار ہیں۔ جب ایسی ایپلی کیشنز یا صفحات پر کام کر رہے ہیں جن میں بڑی حد تک انٹرایکٹیویٹی موجود ہے تو ، ہم چاہیں گے کہ صفحے کے اندر صارفین کی مصروفیات کے بارے میں مزید دانی بصیرت حاصل ہو۔

داخل کریں ڈیٹا-. اس کی مدد سے آپ تفویض کرسکتے ہیں ، ساتھ گزر سکتے ہیں ، اور کسی 'خود اپنی وضاحتی' معنی ماڈل کو تشکیل دے سکتے ہیں۔ لہذا ، مثال کے طور پر ، آپ یہ کرسکتے ہیں:

ان پٹ کی قسم = "بٹن" ڈیٹا-آئی ڈی = "فیس بک" ڈیٹیرجیون = "مین" ڈیٹا واقعہ = "رجسٹر"> ان پٹ کی قسم = "بٹن" ڈیٹا-آئی ڈی = "ٹویٹر" ڈیٹیرجیئن = "مین" ڈیٹا-ایونٹ = "رجسٹر "> ان پٹ کی قسم =" بٹن "ڈیٹا-آئی ڈی =" لنکڈ ان "ڈیٹاجیئن =" مین "ڈیٹا-ایونٹ =" رجسٹر ">

ہم سامعین کو جاوا اسکرپٹ کے ساتھ صفحے پر منسلک کرسکتے ہیں اور جب بھی کوئی صارف اس کے بٹن پر کلک کرتا ہے یا اس بٹن کو کلیک کرتا ہے تو ہم اس سرگرمی کو ٹریک کرسکتے ہیں۔ کسی نے OAuth کے ذریعے ٹویٹر کے ذریعہ کسی کو رجسٹرڈ کرنے کے قابل ہونے کے بجائے ، ہم دیکھ سکتے ہیں کہ انہوں نے فیس بک ، پھر ٹویٹر ، پھر لنکڈ ان پر قبضہ کیا اور پھر آخر کار انہوں نے اپنے OAuth ماڈل کے لئے ٹویٹر کا انتخاب کرنے کا فیصلہ کیا۔

اس کو پنٹیرسٹ جیسے سائٹ تک پھیلانے کا تصور کریں ، یا نیا میس اسپیس ڈیزائن جہاں گاہک دلچسپی کی بنیاد پر ٹائلوں کو دوبارہ ترتیب دینے کے لئے گھسیٹتے اور ڈراپ کرتے ہیں۔ یا ممکنہ طور پر ٹائلیں چھپا کر انہیں دلچسپی نہیں ہے ڈیٹا- وصف آپ کو ایسی چیزوں کے لئے معنی معنی کی اضافی پرت منسلک کرنے یا تفویض کرنے کے قابل بناتا ہے جن کی آپ وضاحت کرسکتے ہیں۔ ایجیکس پر بہت زیادہ انحصار کرنے والی سائٹوں اور ایپس کے ل it یہ لامحدود مواقع کھول دیتا ہے۔

CSS3 - یہ نیا فوٹوشاپ ہے

سی ایس ایس 3 نے ڈیزائن اور لئسٹ کو ڈیزائن کرنے کی ایک پوری نئی سطح پر لایا جس میں پس منظر کی تصاویر ، سلائسیں اور بدنام زمانہ ’سلائڈنگ ڈورز‘ تکنیک کی ضرورت ہوتی تھی۔ شکر ہے ، یہ سب ماضی کی بات ہے۔

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

پہلے ، ڈیفالٹ میں کچھ ایڈجسٹمنٹ کریں بٹن> اور ان پٹ کی قسم = "جمع کروائیں"> عناصر. یہ فرض کرتے ہوئے کہ آپ سی ایس ایس کے ایک معیاری سیٹ کو دوبارہ استعمال کرتے ہیں ، ہم تھوڑا سا سائز لینے اور سانس لینے کا کمرہ شامل کریں گے۔

/ * بٹن کے بٹن ، جن کو بٹن ملے۔ ======================================= * * / بٹن ، ان پٹ [قسم = "جمع کروائیں]] {اونچائی: 2.7 منٹ؛ بھرتی: .4 ایم .7 ایم؛ لائن اونچائی: 1.9؛ }

احتجاج: بٹن اور ان پٹ جو جمع کرائے جاتے ہیں ان کو ری اسٹائل کرنا مشکل ہوسکتا ہے۔ میں نے لائن اونچائی کو 1.6 یا اس سے زیادہ میں ایڈجسٹ کرکے پایا ہے ، آپ اس کے اندر ایک اضافی ڈیو یا اسپین کی ضرورت سے بچ سکتے ہیں۔ بٹن> ٹیگ

اب ہم نے اپنا بٹن مسئلہ 'فکس' کردیا ہے ، ہم ایک تشکیل دے سکتے ہیں .btn کلاس ہمیں کونے کونے ، ایک لکیری میلان ، خاکہ اور وہ لیٹرپریس نظر کے ساتھ ایک عمدہ صاف ستھرا بٹن دے گا۔

.btn {display: inline-block؛ بارڈر: 1px ٹھوس # d4d4cc؛ -موز بارڈر رداس: 4px؛ -ویبکیٹ-سرحد-رداس: 4px؛ سرحد کا رداس: 4px؛ بھرتی: .4 ایم .7 ایم؛ پس منظر: # edeff2؛ پس منظر: -ویبکیٹ - میلان (لکیری ، 0٪ 0٪، 0٪ 100٪، سے (#fefefe)، کلر اسٹاپ (0.55، # edeff2)، سے (# e4e6e9))؛ پس منظر: -موز-لکیری-میلان (سینٹر ٹاپ ، # فیفی ، # ایڈیف 2 55٪ ، # e4e6e9)؛ -موز-باکس-شیڈو: rgba (160،172،187، .7) 0 0 .2 ایم 0؛ -ویبکیٹ-باکس-شیڈو: rgba (160،172،187، .7) 0 0 .2 ایم 0؛ باکس-شیڈو: rgba (160،172،187، .7) 0 0 .2 ایم 0؛ رنگ: # 6c7786؛ فونٹ سائز: 1.1 ایم؛ متن کا سایہ: #fefefe 1px 0 1px؛ لائن اونچائی: 1.375 ایم؛ کرسر: پوائنٹر؛ }

اور پھر ٹھیک ٹھیک چمک کے ساتھ ہور کا ایک عمدہ اثر باکس سائے طریقہ:

.btn: ہوور، .btn: فوکس {-موز-باکس-شیڈو: # 129ceb 0px 0px 2px؛ -ویبکیٹ-باکس-شیڈو: # 129ceb 0 0 2px؛ باکس شیڈو: # 129ceb 0 0 2px؛ پس منظر: # e6e9eb؛ پس منظر: -ویبکیٹ - میلان (لکیری ، 0٪ 0٪، 0٪ 100٪، سے (# f7f7f7)، کلر اسٹاپ (0.55، # f6f6f7)، سے (# e6e9eb))؛ پس منظر: -موز-لکیریگریڈینٹ (سینٹر ٹاپ ، # f7f7f7، # f6f6f7 55٪، # e6e9eb)؛ رنگ: # 45484b؛ متن کا سایہ: rgb (255،255،255) 1px 1px 0؛ بارڈر رنگ: # c9c9c0؛ }

اب ، میں لکیری میلان کوڈ لکھنے کا بڑا پرستار نہیں ہوں۔ یہ لمبا اور الجھا ہوا ہے۔ جیسا کہ آپ دیکھ سکتے ہیں ، میں نے صرف ورژن شامل کیا ہے -موز, -ویبکیٹ، اور معیاری ماڈل۔ اگر آپ -o اور -ms ورژن شامل کرنا چاہتے ہیں تو آپ کو کوڈ کو دوگنا کرنے کی ضرورت ہوگی۔

دو اور اختیارات ہیں۔ ایک CSS3 جنریٹر ہے۔ ویب پر کلررزلا سمیت متعدد دستیاب ہیں۔ لیکن اگر آپ اپنے کھیل کو تھوڑا سا بڑھانا چاہتے ہیں تو ساس میں غوطہ خوری پر غور کریں: کمپاس کے ساتھ مل کر ، یہ ایک خدا کا کام ہے۔

ساس + کمپاس: جادوئی طور پر مزیدار

آپ CSS4 ایک تنگاوالا ایڈیشن کی امید کرنا چھوڑ سکتے ہیں۔ یہ یہاں ہے اور اسے ساس + کمپاس کہا جاتا ہے۔ ساس کا مطلب مصنوعی طور پر حیرت انگیز اسٹائل شیٹس ہے: آپ CSS3 کے تمام روایتی فوائد کو متغیرات ، مکسینز ، ایکسٹینڈرز اور دیگر سامانوں کے اضافی خوشیوں کے ساتھ حاصل کرتے ہیں۔

میں نے حال ہی میں ایک 5،000 لائن لائن سی ایس ایس فائل کو ری فیکٹر کیا ہے جس میں نیلے رنگ کے ایک ہی سائے میں 30 سے ​​زیادہ مختلف حالتیں ہیں۔ ساس کے ساتھ ، میں نے اس کوڈ کے ساتھ ہر تغیرات کو تبدیل کیا:

رنگ: $ نیلا؛

بیان کرکے . نیلا میں میرے _variables.scss فائل ، میں ایک طے شدہ رنگ بنا سکتا ہوں جس کا حوالہ ہر سی ایس ایس یا ایس سی ایس ایس فائل دے سکتا ہے۔ CSS لکھنے والا کوئی بھی شخص استعمال کرسکتا ہے . نیلا اور آئی آئروپر استعمال کرنے ، ہیکس کوڈ ، یا آرجیبی ، آر جی بی اے یا ایچ ایس ایل رنگ تلاش کرنے کی فکر کرنے کی ضرورت نہیں ہے۔

یہ خطی میلان کوڈ یاد ہے؟ کوڈ کی کئی لائنوں کو لکھنے کے بجائے اس کے بارے میں:

@ شامل پس منظر (لکیری-میلان (# b1cfdc ، # 7a9cac))؛

ساس اور کمپاس کو بھاری لفٹنگ کرنے دیں اور آپ کے لئے صحیح نحو تخلیق کریں: ہو گیا۔ ہم کہتے ہیں کہ آپ کسی رنگ کا گہرا یا ہلکا ورژن چاہتے ہیں۔ آپ فوٹو شاپ میں آئی آئروپر کو گھوم سکتے ہو ، یا بس ہل / سیاہ کو کمانڈ کا استعمال ساس میں کرسکتے ہیں۔

@ شامل پس منظر (لکیری-میلان (گہرا ($ لٹریگری ، 2٪)) ، سیاہ ($ آف سفید ، 5٪))؛

یہ 2٪ گہرا ہونے کے ساتھ ایک لکیری میلان پیدا کرے گا $ لائٹ گرے اور 5٪ سیاہ ہلکا سفید. واول! یہاں تک کہ آپ کو HEX یا RGB کوڈز کی بھی ضرورت نہیں ہے۔

jQuery: اوہ ، ہاں آپ کر سکتے ہیں

میرے پاس اعتراف کرنا ہے۔ جاوا اسکرپٹ مجھے ڈرانے کے لئے استعمال ہوتا تھا۔ پھر مجھے jQuery مل گیا۔ میں جاوا اسکرپٹ گرو ہونے کا دعوی نہیں کروں گا ، لیکن مجھے کافی اعتماد ہے کہ میں کسی بھی قسم کی منتقلی ، یا جس فنکشن میں مجھے jQuery استعمال کرنے کی ضرورت ہے ، کو نکال سکتا ہوں۔

مثال کے طور پر ، دوسرا نیا نمبر شامل کرنے کے لنک پر کلک کرکے اسکرین پر ثانوی فون نمبر ان پٹ ظاہر کرنے کی صلاحیت کو لیں۔ jQuery کا استعمال کرتے ہوئے ، آپ آسانی سے یہ لکھتے ہیں:

// - ترقی پسند انکشاف - // $ (’. نیا نمبر‘)۔ کلک کریں (فنکشن () {$ (’. Alt-نمبر’)۔ fadeIn (’فاسٹ’)؛})؛

کچھ زیادہ ترقی یافتہ چیز کی تلاش ہے؟ اس کے لئے شاید ایک پلگ ان ہے۔ بنیادی سلوک آسان ہے اور پیچیدہ ہیں jQuery کے ساتھ قابل رسائی ہیں۔

فریم ورک

آج سب سے زیادہ مضبوط فریم ورک میں سے دو فاؤنڈیشن اور بوٹسٹریپ ہیں۔ اب ، اس سے پہلے کہ آپ سی ایس ایس فریم ورک کو خارج کردیں ، مجھے آپ سے کچھ پوچھنے دو۔ کیا آپ jQuery استعمال کرتے ہیں؟ ریلیوں پر روبی۔ ججنگو۔ تمام فریم ورک۔

جیسے jQuery اور RoR ، فاؤنڈیشن اور بوٹسٹریپ پیدا ہوئے تھے یہ جاننے کے لئے کہ ہمارے پاس بار بار کام کرنے کی کافی تعداد موجود ہے (جیسے ری سیٹ ، نوع ٹائپ ، گرڈ ، فارم ، بٹن ، نیوی اور فہرستیں)۔ فاؤنڈیشن اور بوٹسٹریپ دونوں مددگار کلاسوں کے استعمال کے ذریعہ ذمہ دار ڈیزائنوں کے لئے معاونت پیش کرتے ہیں۔ دونوں اچھی طرح سے دستاویزی دستاویزات کی حامل ہیں اور ان کا تجربہ سڑک پر کیا گیا ہے ، لہذا آپ انہیں اعتماد کے ساتھ استعمال کرسکتے ہیں۔

دونوں کے درمیان ایک اہم فرق: بوٹسٹریپ سی ایس ایس پری پروسیسنگ کے لئے کم نظام پر مبنی ہے ، جبکہ فاؤنڈیشن ساس پر مبنی ہے۔ میں اضافی صلاحیتوں کی وجہ سے ساس کو کم سے کم ترجیح دیتا ہوں ، لیکن ساس اور لیس سکواش روایتی سی ایس ایس دونوں ٹکڑے ٹکڑے کر کے۔

فریم ورک پر ایک آخری سوچا۔ ان لوگوں کے ل who ، جو کسی اور کے فریم ورک کے اضافی ٹکڑے کا وارث نہیں ہونا چاہتے ہیں ، موجودہ وجود کو چننے اور اسے ننگی ہڈیوں تک اتارنے پر غور کریں ، یا اپنی ہی چیز کو رول کرنے کے لئے کچھ لوگوں سے چیری اٹھانا چاہتے ہیں۔ بہر حال ، واقعی میں کوئ وجہ نہیں ہے کہ ہر بار سکریچ سے شروع ہو۔

آخری خیالات

آپ کا ڈیزائن آخر کس طرح نکلا ہے اس پر زیادہ سے زیادہ کنٹرول چاہتے ہیں؟ مزید عمل کو کوڈ میں اوپر کی طرف منتقل کریں۔ HTML5 آخر کار ڈوم میں کچھ سمجھ لاتا ہے۔ باطل پر اچھ .ا پن ڈاکٹرائپs اور Divitis. CSS3 نیا فوٹوشاپ ہے: لکیری گریڈینٹ ، بارڈرڈیس ، اور باکس سائے FTW! اور بوٹسٹریپ ، فاؤنڈیشن ، ساس اور jQuery جیسے ٹولز کے ذریعہ ، ڈیزائن کو اپ اسٹریم میں منتقل کرنا کبھی بھی آسان نہیں تھا۔

تخلیقی بلق پر HTML5 کی 55 حیرت انگیز مثالوں کو دریافت کریں۔