۱۵ فریم ورک شگفت انگیز سی اس اس (Amazing Flexbox CSS Framework)

جعبه منعطف یا flexbox ویژگی است برای نمایش المان ها. ویژگی flexbox در CSS3 معرفی شد. اگر که شما با لیست ها ( ol و ul ) و آیتم های آن ( یعنی li ) آشنا باشید، می دانید که یک لیست ( یعنی ul ) شامل چند li می باشد که در واقع این li ها فرزندان لیست می باشند. flexbox هم دقیقا به همین شکل است. در مقاله پیش رو بهترین فریم ورک های flexbox سی اس اس را معرفی می کنیم.

نویسنده سید علی اندرزگو

۱۵ فریم ورک شگفت انگیز سی اس اس (Amazing Flexbox CSS Framework)

جعبه منعطف یا flexbox ویژگی است برای نمایش المان ها. ویژگی flexbox در CSS3 معرفی شد. اگر که شما با لیست ها ( ol و ul ) و آیتم های آن ( یعنی li ) آشنا باشید، می دانید که یک لیست ( یعنی ul ) شامل چند li می باشد که در واقع این li ها فرزندان لیست می باشند. flexbox هم دقیقا به همین شکل است. در مقاله پیش رو بهترین فریم ورک های flexbox سی اس اس را معرفی می کنیم.

یک لیست ( یعنی ul ) شامل چند li می باشد که در واقع این li ها فرزندان لیست می باشند. flexbox هم دقیقا به همین شکل است، یعنی یک المان (معمولا Div) می تواند فرزندانی را در بر داشته باشد که به این فرزندان flex item می گوییم.

معماری Flexbox با تنظیم طراحی برای دستگاه‌ایی با اندازه‌های مختلف صفحه، روند ساخت‌وساز طراحی وب سایت را اصلاح کرده‌است. استفاده از طرح Flexbox تضمین می‌کند که مولفه‌ها هنگامی که طرح صفحه باید با اندازه صفحه متمایز و دستگاه‌های نمایش مطابقت داشته باشد به خوبی عمل می کنند. فلکس باکس باعث می‌شود که برنامه‌ها گزینه بهینه ایی از مقیاس کوچک و بزرگ باشند. طراحی UIs واکنش پذیر نسبتا دشوار است و UIs ها را در اندازه‌های مختلف صفحه نمایش می‌دهد و این روش می‌تواند ازار دهنده باشد.

طراحی Flexbox اجزاء را درون یک کانتینر قرار می دهد ، آنها را مونتاژ می کند همچنین آن‌ها را با یک ستون یا ردیف، بدون توجه به اندازه ایی که دارند بر اساس اندازه صفحه نمایش در دسترس پخش می‌کند.

عناصر را می توان به صورت افقی یا عمودی تراز کرد. طراحی انعطاف پذیر و واکنش گرا انتخاب ایده آلی است. با Flexbox، برای سرعت بخشیدن به فرایند طراحی وب مجموعه خوبی در اختیار شما قرار می گیرد

فریم ورک محبوب Flexbox CSS ریسپانسو

برای تفسیر ظاهر کلی یک صفحه وب حالت ساختار جعبه انعطاف پذیر یا همان Flexbox جایگزینی برای Floats ارائه می دهد. در حالی که Floats فقط به ما امکان می دهد باکس های های خود را به صورت افقی قرار دهیم. flexbox به ما امکان کنترل کامل بر باکس ها ما را می دهد (تراز، جهت، مکان و اندازه).

۱ . Juiced

Juiced یک فریم ورک سمت کاربر CSS چند منظوره است که به پیکربندی چیدمان Flexbox تکیه دارد و نسبت به چارچوب های CSS مبتنی بر شبکه فعلی مزایای بسیاری دارد. یکی از موارد باورنکردنیاست که در بوت استرپ با آن روبرو می شوید، ویژگی های دیگری درد که باسایر فریم ورک های Flexbox CSS قابل مقایسه است، اما با هدف گیری بهتر و ستون های سفارشی، گزینه های ترازبندی قوی تر، HTML قابل توجیه و سبک های اعلانی کمتری دارد.

۲ . Basis

Basis اولین فریم ورک sass / css مبتنی بر flexbox سبک، و انعطاف پذیر است و مختص تلفن همراه است (mobile first). کلاس های پایه پیشوند دارند. کد BEM است و از Sass / SCSS (MindBemding) استفاده می کند. می تواند به عنوان یک فریم ورک CSS یا به عنوان یک کتابخانه میکسین برای Sass و SCSS استفاده شود. با استفاده از فریم ورک های CSS زمان كمتري صرف می کنیم و بيشتر بر توسعه برنامه هاي جذاب وب سايت متمركز می شويم

این تئوری همچنین تئوری ریتم عمودی را تکمیل می کند که یک طراحی مناسب و عادلانه را ارائه می دهد. معماری CSS مبتنی بر FLOCSS است و یک استراتژی مدولار ارائه می دهد.

۳ . Bulma

Bulma یک فریم ورک CSS امروزی، انعطاف پذیر و همه کاره مبتنی بر Flexbox است. Flexbox یک روش طراحی برای ترکیب و تقسیم اتاق مورد در ظرفی است که طول مورد آن طول مورد آن نامشخص یا پویا است. ویژگی اصلی ظرف فلکس امکان تغییر عرض / ارتفاع محصولات به منظور قرارگیری آنها در بهترین باکس ممکن است. قابل حمل است و گزینه های دیگری برای واردات هر آنچه شما نیاز دارید ارائه می دهد. این مورد شامل ۲۹ پرونده SASS به طور جداگانه است.

این framework فقط تا حدودی از IE 10 + پشتیبانی می کند، و با همه مرورگرهای امروزی به جز اینترنت اکسپلورر به خوبی کار می کند.

۴ . Thimble CSS

Thimble CSS یک framework هوشمندانه CSS است که برای مرورگرهای فعلی اینترنت با Flexbox تدوین شده است. این به معنای داشتن یک کد نرم است. این یک فریم ورک Flexbox CSS است که سبک، واکنش گرا، منبع باز و آماده SASS است.

همچنین، Flexbox ایده‌آل ترین حالت را برای برق‌رسانی به برنامه‌ها و وب سایت‌های اینترنتی شما ایجاد می‌کند.

نحوه راه اندازی یک وب سایت جدید (نکات، ترفندها و نگرش ها)

۵ . Milligram

Milligram مجموعه ای از حداقل چیدمان را برای یک نقطه شروع سریع و مرتب ارائه می دهد. فقط برای ۲ کیلوبایت انتخاب کنید! در کد cleaner به خصوص برای عملکرد برتر و بهره‌وری بهتر با ویژگی‌های reset کوچک‌تر به دست می‌آید. milligram برای استفاده در برنامه‌های امروزی در نظر گرفته می‌شود. سیستم شبکه از واحد rem براساس ابعاد، و طول استفاده می‌کند. milligram رسما Chrome، فایرفاکس، IE، Safari، و نسخه‌های فعلی اپرا را ترویج می‌کند.

۶ . Flexbox-grid

فریم ورک Flexbox فقط برای تنظیمات یک بعدی و شبکه طرح دو بعدی طراحی شده است. این بدان معنی است که اگر محصولات را در یک جهت قرار دهید (به عنوان مثال سه دکمه در یک هدر)، سپس از Flexbox استفاده کنید: این انعطاف پذیری بیشتری را نسبت به CSS Grid به شما ارائه می دهد. این ترکیبی از عرض، حداقل عرض، حداکثر عرض، flex پایه، و flex است که در داخل مواد و مواردی مانند فضای سفید و سایر محصولات موجود در همان خط قرار نمی گیرد.

۷ . Wire CSS

Wire یک فریم ورک مبتنی بر SASS است که راحت و سبک است. اصل هدایت Wire آسان است و در آن از سبک های نامناسب اجتناب شده. در واقع این فریم ورک فقط به یک عنصر HTML اصول می پردازد و شامل یک شبکه Flexbox و همچنین مجموعه ای از مخلوط ها / دستیاران برای تسهیل و سریعتر کار روزانه است. Wireاز پیش پردازنده قوی CSS است که در Sass منتشر شده است.

این تنها با کلاسهای HTML یا با ترکیبی از دوره های شخصی شما در Sass استفاده می شود و این ویژگی را کاملاً قابل تنظیم می کند.

۸ . BOBSCSS

BobScss یک فریم ورک CSS است که به Flexbox وابسته است تا یک طراحی وب سایت کاملاً ریسپانسیو و برای پلتفرم موبایل ایجاد کند. این یک فریم ورک سبک برای مجموعه ها و برنامه های اساسی است. این فریم ورک بر سرعت و کارایی تمرکز دارد و بدون هیچ مشکلی در موارد مختلف کارایی دارد از تلفن همراه گرفته تا تبلت و دسکتاپ .

۹ . BEMSkel

BEMSkel از BEM و SASS برای ایجاد یک ساختار CSS سبک وزن استفاده می کند. هدف از آن ارایه مبنایی قوی برای برنامه‌های وب و واسط‌های کاربر بسته به اجزا است. BEMSkel با استفاده از BEM (بلاک، Element، تغییردهنده)نامگذاری، کنوانسیون نامگذاری منسجم و دقیق را ارائه می‌دهد که شما را قادر می‌سازد تا رابط کاربری خود را به بلوک‌های جداگانه‌ای تقسیم کرده و کد فعلی را مجددا مورد استفاده مجدد قرار دهد.

این سبک برای مؤلفه هایی مانند متن، دکمه ها، جداول و ساختارهایی که بیشتر مورد استفاده قرار می گیرند، ارائه می دهد. همچنین برای ایجاد سیستم های شبکه دو روش وجود دارد: grid و Flexbox. اگر می خواهید به مرورگرهای قدیمی یا Flexbox کمک کنید، از شبکه به عنوان یک قانون ساده استفاده کنید.

۱۰ . Flexible grid layout

شما می توانید به سرعت پروژه خود را با استفاده از طرح بندی شبکه انعطاف پذیر و استفاده از قسمت هایی از فریم ورک به مؤلفه های سفارشی شروع کنید. این طرح، همترازی و اندازه ستون‌های شبکه، پیمایش، اجزا، و هر چیز دیگری را با یک مجموعه کامل از برنامه‌های Flexgrid responsive مدیریت می‌کند. برای اجرای پیچیده تر CSS سفارشی بسیار مهم است. طراحی Responsive معمولاً شامل استفاده از نمایش داده های رسانه ای از CSS3 است و اغلب حاوی تصاویر انعطاف پذیر از CSS3 است.

۱۱ . Kube UI Framework

Kube یک فریم ورک CSS است که با هدف ایجاد طرح های مدرن، سریع و سبک طراحی شده است. این برنامه با ریتم افقی مبتنی بر شبکه ۴ پیکسلی، تایپوگرافی خوش ساخت، ابزارهای پیشرفته برای طراحی ریسپانسیو و سیستم های شبکه تعاملی مبتنی بر Flexbox و کمک به همه مرورگرهای رومیزی و موبایل امروزی وارد می شود. این سبک خود را اجرا نمی کند و نیازی به طرح و روش خاصی برای دنبال کردن ندارد .

Kube دارای یک ساختار فوق العاده است که به شما در ایجاد برنامه های مدولار و مقیاس پذیر مانند پنل های مدیریتی یا جلوی وب سایت ها کمک می کند. به طور کلی می توانید از Kube برای ایجاد یک رابط کاربری وب سایت یا رابط اداری استفاده کنید و ده ها ساعت پس انداز کنید. از آنجا که راه حل های آماده Kube شما را از وظایف روزمره کاهش می دهد.

۱۲ . SPECTRE.CSS

SPECTRE.CSS یک فریم ورک سبک، ریسپانسیو و مدرن CSS برای توسعه سریعتر و توسعه یافته است. Spectre تایپوگرافی اساسی و سبک های عناصر، طرح بندی پاسخگو مبتنی بر flexbox، اجزای خالص CSS و منابع با بهترین برنامه نویسی و زبان منسجم از طراحی را ارائه می دهد . با ویرایش پرونده های Sass در پوشه / src یا حذف قسمت های اضافی از پرونده های منبع.scss، می توانید نسخه Spectre.css خود را سفارشی کنید.

فریم ورک Spectre از Autoprefixer برای ایجاد اکثر سبک های سازگار برای تنظیم مجدد CSS با مرورگرهای قبلی و Normalize.css استفاده می کند. Spectre برای مرورگرهای امروزی است.

۱۳ . SPECTRE.CSS

Chuck CSS یک فریم ورک CSS همه کاره، سازگار، ریسپانسیو و مختص تلفن همراه است (mobile first) است که به شبکه Flexbox تولید شده با LESS و Autoprefixer وابسته است. این فریم ورک شامل بسیاری از ویژگی ها مانند شبکه Flexbox، تایپوگرافی دقیق، دکمه های شگفت آور، هشدارها و پنجره های معین است. همچنین با کتابخانه های فونت سازگار است از جمله FontAwesome و Ionicons.

۱۴ . Reflex

Reflex یک شبکه سبک و منعطف Flexbox با کمک مرورگر متقاطع یک بلوک خط برگشت ورودی و بدون محدودیت در ساخت چند منظوره است. Polyfills یک مرورگر برگشت پذیر (تولید شده در جاوا اسکریپت) است که به شما امکان می دهد که بتوانید در مرورگرهای قدیمی با ویژگی هایی که مرورگرهای جدید دارند کار کنید. Reflex یک گزینه ایده آل برای ایجاد شبکه های جاسازی شده پیچیده است که از خواص طرح Flexbox پیش بینی شده است. ویژگی های آن:

  1. یک بسته سبک – برای ۱۲ کیلوبایت کوچک شده و برای تنها ۱٫۸ کیلوبایت شده است.
  2. سلول های پیش فرض شبکه با همان ارتفاع.
  3. سلولهای شبکه رفلکس که هرگز یکدیگر را از حالت خارج نمی کنند (مانند شبکه های شناور).

۱۵ . CSS  Plus

CSS plus یک راه آسان و سریع برای ایجاد طرح های منعطف و ریسپانسیو مبتنی بر Flexbox ارائه می دهد. Flexbox به شما امکان می دهد یک ظرف انعطاف پذیر را مشخص کنید و همچنین به عنوان ستون یا چند ردیف شناور باشند. css علاوه بر ایجاد چیدمان های پیچیده، ریسپانسیو و انعطاف‌پذیر براساس این ایده‌های اولیه را ممکن می‌سازد:

  1. شدت و / یا انعطاف پذیری
  2. پرس و جو در رسانه
  3. ردیف ها و ستون ها (رویکرد جدول)
  4. تراز کردن

نتیجه

یک راه امیدوار کننده برای ایجاد و طراحی یک وب سایت، طرح Flexbox است. در حالی که یک طراحی انعطاف پذیر و ریسپانسیو را ایجاد می کند، برای شما آرامش ذهنی فراهم می آورد. در این مقاله فریم ورک های شگفت انگیز CSS بر اساس Flexbox ارائه شد که می توانید از آنها استفاده کنید. این فریم ورک ها با مرورگرهای فعلی، سبک، انعطاف پذیر و سازگار هستند.

شمما باید در هنگام نشان دادن فریم ورک مناسب CSS مبتنی بر Flexbox محتاط عمل کنید. انتخاب شما باید روی پارامترهایی از قبیل اندازه قاب، کارآیی، سازگاری مرورگر، کاربر پسند بودن متمرکز شود یا اینکه بطور فعال حفظ شود. خوشبختانه طراحی Flexbox کار کاملاً خوبی را انجام می دهد و این امکان را فراهم می کند تا با تغییر ارتفاع عرض و ترتیب به درستی مونتاژ قطعات، از صفحه نمایش در دسترس استفاده کنید.

پرکاربردترین زبان های برنامه نویسی در سال ۲۰۲۰

منبع

دانلود قالب شرکتی jony

دانلود قالب شرکتی jony

نویسنده سید علی اندرزگو

دانلود قالب شرکتی carbook

دانلود قالب شرکتی carbook

نویسنده سید علی اندرزگو

پاسخی بگذارید

ایمیل شما منتشر نشده و نزد ما محفوظ است.