Take Up This Challenge:

  1. Our E-commerce supports 10 Brands: [Brand-1, Brand-2, Brand-3, ...rest ]
  2. Each Brand has 10 Categories: [Category-1, Category-2, Category-3, ...rest ]
  3. Each Category has 10 sections: [Section-1, Section-2, Section-3, ...rest]
  4. Each Section has 4 Products or more: [Product-1, Product-2, Product-3, Product-4]
  5. Each Product has 10 types: [type-1, type-2, type-3, ..rest]
  6. And each year - for 10 years - we will add this amount of items again: [Year-2019, Year-2020, Year-2021, ..rest]

So our E-commerce has ( 10 ^ 4 ) x 4 types of products (= 40,000), up to (= 400,000) after 10 years!

Your task will be to show this 40,000 types on our limited homepage:

  • the homepage should NOT become too messy
  • only stable and well defined libraries are allowed
  • user can interact and navigate easily
  • User Experience Design rules should be followed

And please do not forget about:

  • page responsiveness
  • cross-web-browsers compatibilities
  • code refactoring / updating / maintenance, should NOT frustrate us

Okay. Assuming flexible repetition of two to five (= 2,3,4,5), instead of 10;

It can be solved / done by the following steps.

این چالش رو حل کنید:

  1. فروشگاه اینترنتی داریم که 10 تا برند را پشتیبانی می کند : [Brand-1, Brand-2, Brand-3, ...rest ]
  2. هر برند 10 دسته بندی دارد: [Category-1, Category-2, Category-3, ...rest ]
  3. هر دسته بندی 10 بخش دارد: [Section-1, Section-2, Section-3, ...rest]
  4. هر بخش 4 محصول و یا بیشتر دارد: [Product-1, Product-2, Product-3, Product-4]
  5. هر محصول 10 نوع مختلف دارد: [type-1, type-2, type-3, ..rest]
  6. و هر سال - برای 10 سال - ما این حجم محصول را دوباره اضافه می کنیم: [Year-2019, Year-2020, Year-2021, ..rest]

بنابراین فروشگاه ما 10 به توان 4 ضرب در 4 تا نوع محصول دارد (000و40) و بعد از 10 سال تا مقدار (000و400) هم می رسد

وظیفه شما این است که این 000و40 نوع محصول را در صفحه اصلی ماه نشان دهید:

  • صفحه اصلی نباید شلوغ و بهم ریخته شود
  • فقط کتابخانه های پایدار مجاز به استفاده هستند
  • کاربر باید بتواند به راحتی از آن استفاده کند
  • قواعد بهبود تجربه ی کاربری باید دنبال شود

و لطفا این موارد را فراموش نکنید:

  • صفحه باید واکنشگرا باشد
  • در تمام مرورگرها به درستی کار کند
  • آبدیت و نگاهداری کد ها نباید ما را اذیت کند
  • اگه کاربر نتواند محصولی را پیدا کنید بسادگی بتواند به ما اطلاع دهد.

باشد. برای انعطاف پذیری فرض می کنیم ورودی هایمان بین 2 تا 5 هستند بجای 10 ثابت;

این چالش با انجام این مراحل می تواند حل شود.


First dealing with Brands ( n ^ 1 ) x 1:
  • using carousel-z

اول برند ها رو حل کنیم ( عدد بتوان 1 ) ضرب در 1:
  • با استفاده carousel-z

Second dealing with Categories ( n ^ 2 ) x 1:
  • using carousel-z
  • then nesting carousel-y

دوم دسته بندی ها ( عدد بتوان 2 ) ضرب در 1:
  • با استفاده carousel-z
  • بعد داخل کردن carousel-y

Third Sections ( n ^ 3 ) x 1:
  • using carousel-z
  • nesting carousel-y
  • nesting carousel-x

  • arrow: true
  • form: "compact-arrow"
  • position: "center"

سوم بخش ها ( عدد بتوان 3 ) ضرب در 1:
  • با استقاده carousel-z
  • داخل کردن carousel-y
  • داخل کردن carousel-x

Forth Products ( n ^ 3 ) x 4:
  • using carousel-z
  • nesting carousel-y
  • nesting carousel-x
  • nesting slick-x

چهارم محصول ها ( عدد بتوان 3 ) ضرب در 4:
  • با استفاده carousel-z
  • داخل کردن carousel-y
  • داخل کردن carousel-x
  • داخل کردن slick-x

Finally Types ( n ^ 4 ) x 4:
  • using carousel-z
  • nesting carousel-y
  • nesting carousel-x
  • nesting slick-x
  • nesting carousel-z again. ( Could be carousel-y or carousel-x)

Tada! Three Brands with nested Categories and Sections, etc.

  • As compact as possible
  • As stable as CSS3 is
  • Interactive Asynchronously (NOT blocking JS's single thread)

Disable JS in your browser and try it.

در نهایت نوع ها ( عدد بتوان 4 ) ضرب در 4:
  • با استفاده carousel-z
  • داخل کردن carousel-y
  • داخل کردن carousel-x
  • داخل کردن slick-x
  • داخل کردن carousel-z دوباره. ( می توانست carousel-y یا carousel-x) هم باشد

خب! سه تا برند با دسته بندی ها و بخش ها و غیره.

  • تا ممکن است فشرده هستند
  • به همان اندازه سی اس اس ۳ پایدار هستند
  • به صورت غیر همزمان کار می کند (جاواسکریپت که یک نخ دارد را مسدود نمی کند)

جاواسکرپت مرورگر خود را غیر فعال و آزمایش کنید.

Okay. But what about each year. You just solved one-tenth of the Challenge.

We have 10 years. That was only for one year!

No problem. Just nest everything:
  • in another carousel-x component,
  • or in a tab-x or tab-y component,
  • or use a step-switch component,
  • or use a progress-x component like so:

باشد. اما درباره هر سال. شما فقط یک چهارم چالش را حل کردید.

ماه ۱۰ سال داریم. ان فقط برای یک سال بود!!

هیچ مشکلی نیست. فقط هر چیزی هست را قرار بده در:
  • یک carousel-x کامپوننت دیگز,
  • و یا یک tab-x یا tab-yکامپوننت,
  • و یا یک step-switch کامپوننت,
  • و یا یک progress-x کامپوننت مانند همین:

Welcome!

Read about features in Features section ...

Read what are required before using it in Prerequisite section ...

For usage see How to Use section ...

Or directly go to Download section ...

خوش آمدید!

در مورد ویژگی ها بخش Features را بخوانید ...

پیشنیاز های قبل از استفاده زا در بخش Prerequisite بخوانید ...

برای نحوه ی استفاده بخش How to Use را ببینید ...

و یا مستقیم به بخش Download بروید ...

Components' Features:

  • Zero external dependency
  • Zero delay on running (NOT blocking JS's single thread)
  • No worrying for cross-browsers compatibilities
  • No worrying if JS has been disabled by users
  • No worrying for updating old code / library to new code / library

While each component can be create using JS, but none of them need JS for their life-cycle.

ویژگی ها

More Via Your Browser

بیشتر از طریق مرورگر

More Via Your Terminal

بیشتر از طریق ترمینال

  1. # Home Page Is:
  2. curl -sL somacss.ir
  3. # Create Page
  4. curl -sL somacss.ir/create/
  5. # Document Page
  6. curl -sL somacss.ir/document/
  7. # Examples Page
  8. curl -sL somacss.ir/example/