{"id":330364,"date":"2022-03-06T09:00:09","date_gmt":"2022-03-06T09:00:09","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=330364"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=330364","title":{"rendered":"<span>\u041f\u0430\u0442\u0442\u0435\u0440\u043d\u044b \u0432\u0435\u0440\u0441\u0442\u043a\u0438. \u041a\u0430\u043a \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u0442\u044c \u0432\u0435\u0440\u0441\u0442\u0430\u043b\u044c\u0449\u0438\u043a\u043e\u0432 \u0438 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u043e\u0432<\/span>"},"content":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0414\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430\u043c\u0438 \u0438 \u0432\u0435\u0440\u0441\u0442\u0430\u043b\u044c\u0449\u0438\u043a\u0430\u043c\u0438 \u0434\u043b\u044f \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u043e\u0448\u0438\u0431\u043e\u043a \u0438 \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0440\u0430\u0431\u043e\u0442\u044b.<\/p>\n<p>\u0420\u0430\u0431\u043e\u0442\u0430 \u0431\u043e\u0433\u0430\u0442\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438. \u041e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u0430 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u0430\u043c \u0440\u0430\u0437\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0444\u0438\u043b\u044f.<\/p>\n<p>\u0414\u0438\u0437\u0430\u0439\u043d \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0441\u043d\u043e\u0432\u043e\u0439 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0442\u043a\u0438 \u0438 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<\/p>\n<h2>\u041a\u0440\u0438\u0442\u0435\u0440\u0438\u0438 \u0445\u043e\u0440\u043e\u0448\u0435\u0433\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0430:<\/h2>\n<ol>\n<li>\n<p>\u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u0438\u0437\u0430\u0439\u043d\u0430 (\u0446\u0432\u0435\u0442\u0430, \u0448\u0440\u0438\u0444\u0442\u044b, \u0440\u0430\u0437\u043c\u0435\u0440\u044b, \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0438 \u0442.\u0434.)<\/p>\n<\/li>\n<\/ol>\n<ol start=\"2\">\n<li>\n<p>\u041f\u0440\u0438\u043d\u0446\u0438\u043f \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0441\u0442\u0438. \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043e\u0434\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u043a \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f\u043c \u044d\u0442\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u0434\u0440\u0443\u0433\u0438\u0445 \u0447\u0430\u0441\u0442\u044f\u0445 \u043c\u0430\u043a\u0435\u0442\u0430. \u041d\u0443\u0436\u043d\u043e \u0438\u0437\u0431\u0435\u0433\u0430\u0442\u044c \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.- \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0438\u0445. \u0420\u0435\u0447\u044c \u0438\u0434\u0451\u0442 \u043e\u0431 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0441\u0442\u0438\u043b\u0435\u0439 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 figma: \u0448\u0440\u0438\u0444\u0442\u043e\u0432, \u0446\u0432\u0435\u0442\u043e\u0432, \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432 \u0438 \u043f\u0440\u043e\u0447\u0435\u0433\u043e.<\/p>\n<\/li>\n<\/ol>\n<ol start=\"3\">\n<li>\n<p>\u041f\u043e\u0440\u044f\u0434\u043e\u043a \u0432 \u0441\u043b\u043e\u044f\u0445 \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0439 \u043d\u0435\u0439\u043c\u0438\u043d\u0433 &#8212; \u043f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e \u044d\u0442\u043e \u0432\u0430\u0448 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u0438\u0437\u043c. \u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442\u044c \u043a \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0443 \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e.<\/p>\n<\/li>\n<\/ol>\n<ol start=\"4\">\n<li>\n<p>\u041f\u0440\u043e\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0438 touch \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445. \u041f\u043e\u043c\u043d\u0438\u0442\u0435 \u043e\u0431 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0438 hover event\u00a0 \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u0435\u0432\u0430\u0439\u0441\u0430\u0445, \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0439\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e \u0432 \u0441\u0432\u043e\u0438\u0445 \u043c\u0430\u043a\u0435\u0442\u0430\u0445. (\u043d\u0430 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0435 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442, \u0430 \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0439 \u043a\u0435\u0439\u0441 \u043d\u0435 \u0443\u0447\u0442\u0435\u043d.)<\/p>\n<\/li>\n<\/ol>\n<ol start=\"5\">\n<li>\n<p>\u0414\u043b\u044f \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0432\u0435\u0440\u0441\u0442\u0430\u043b\u044c\u0449\u0438\u043a\u0430 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0443 \u0441\u0442\u043e\u0438\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0438\u0434\u0435\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439.<\/p>\n<\/p>\n<\/li>\n<\/ol>\n<h2>\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043f\u043e \u0432\u0435\u0440\u0441\u0442\u043a\u0435:<\/h2>\n<ol>\n<li>\n<p>Pixel perfect &#8212; \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0435\u0435. \u041e\u043d\u043e \u043f\u0440\u0435\u043e\u0431\u043b\u0430\u0434\u0430\u043b\u043e \u0434\u043b\u044f \u0440\u0430\u0441\u0442\u0440\u043e\u0432\u044b\u0445 \u043c\u0430\u043a\u0435\u0442\u043e\u0432, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0435 \u0431\u044b\u043b\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0443\u0442\u043e\u0447\u043d\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u041d\u0430 \u044d\u0442\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0434\u043b\u044f \u043d\u0430\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0434\u0438\u0437\u0430\u0439\u043d\u0430. \u041f\u043e\u0434\u043e\u0431\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e.<\/p>\n<\/li>\n<\/ol>\n<ol start=\"2\">\n<li>\n<p>\u041d\u0435 \u0441\u0442\u043e\u0438\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u043f\u043e \u0442\u0435\u0433\u0430\u043c \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 a, li, ui, h, p \u0438 \u0442\u0434, \u0421\u043e\u0437\u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043a\u043b\u0430\u0441\u0441\u044b \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0442\u043e\u0447\u043d\u043e\u0433\u043e \u0432\u044b\u0431\u043e\u0440\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0432\u044f\u0437\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043a\u043b\u0430\u0441\u0441 \u043e\u0431\u0435\u0440\u0442\u043a\u0443 \u0432 body .main h1 {}. \u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e h1 &#8212; \u043f\u043b\u043e\u0445\u043e .h1 &#8212; \u0445\u043e\u0440\u043e\u0448\u043e. \u041f\u043e\u043c\u043d\u0438\u043c \u043f\u0440\u043e \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0441\u0442\u0438!<\/p>\n<\/li>\n<\/ol>\n<ol start=\"3\">\n<li>\n<p>\u041d\u0435 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u044b\u0441\u043e\u0442\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c (input button \u0438 \u0442\u0434) \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e padding. \u0414\u0438\u0437\u0430\u0439\u043d\u0435\u0440 \u0437\u0430\u0434\u0430\u0435\u0442 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0441\u0442\u0440\u043e\u043a \u0438\u043b\u0438 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430\u00a0 \u043f\u043e\u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 height \u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0437\u0430\u0434\u0430\u0435\u043c \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445.<\/p>\n<\/li>\n<\/ol>\n<ol start=\"4\">\n<li>\n<p>\u041b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0438\u043a\u0441\u0435\u043b\u0438 \u0432 \u0432\u0435\u0440\u0441\u0442\u043a\u0435, \u0430 \u043d\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u0435\u0434\u0438\u043d\u0438\u0446\u044b \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f. \u0414\u0438\u0437\u0430\u0439\u043d \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u043d \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u0432\u043c\u0435\u0448\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b. \u041f\u0440\u043e\u0446\u0435\u043d\u0442\u044b \u0442\u043e\u0436\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0430\u043a\u043a\u0443\u0440\u0430\u0442\u043d\u043e,\u00a0 \u0435\u0441\u043b\u0438 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u043c\u0438\u043c\u043e 25% 50% 100% \u0442\u043e, \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u0432\u044b \u0434\u0435\u043b\u0430\u0435\u0442\u0435 \u0447\u0442\u043e-\u0442\u043e \u043d\u0435 \u0442\u0430\u043a. 50% \u0435\u0441\u043b\u0438 \u0434\u0435\u043b\u0438\u043c \u043f\u043e\u0440\u043e\u0432\u043d\u0443 2 \u0431\u043b\u043e\u043a\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 1 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f \u043d\u0443 \u0438 25% \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e 4 \u0431\u043b\u043e\u043a\u0430.<\/p>\n<\/p>\n<\/li>\n<\/ol>\n<h2>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0433\u043e\u0442\u043e\u0432\u044b\u0445 ui \u0441\u0438\u0441\u0442\u0435\u043c \u0438 bootstrap.<\/h2>\n<p>\u0412 \u043f\u0440\u043e\u0436\u0435\u043a\u0442\u0430\u0445 \u0443 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u0441 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043b\u044e\u0431\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u0438 \u0444\u043e\u0440\u043c\u044b, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f bootstrap \u0438 \u043f\u0440\u043e\u0447\u0438\u0435 ui \u0441\u0438\u0441\u0442\u0435\u043c\u044b, \u0432\u044b \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u0431\u0443\u0434\u0435\u0442\u0435 \u043e\u0431\u0432\u044f\u0437\u044b\u0432\u0430\u0442\u044c \u0438\u0445 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u043e\u0431\u0435\u0440\u0442\u043a\u0430\u043c\u0438 \u0438 \u043a\u043e\u0441\u0442\u044b\u043b\u044f\u043c\u0438, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0435\u0441\u044f \u0437\u0430 \u0441\u043e\u0431\u043e\u0439 \u043d\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0432 \u0432\u0438\u0434\u0435 js \u0438 style \u043a\u043e\u0434\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u0441 \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u044b\u043c \u0432\u0438\u0437\u0443\u0430\u043b\u043e\u043c \u0441\u0442\u043e\u0438\u0442 \u044d\u0442\u043e\u0433\u043e \u0438\u0437\u0431\u0435\u0433\u0430\u0442\u044c \u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u043f\u043e\u0434 \u0441\u0432\u043e\u0438 \u043d\u0443\u0436\u0434\u044b.<\/p>\n<\/p>\n<h2>\u0420\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u044b.<\/h2>\n<p>\u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440 https:\/\/github.com\/jtapes\/styles-example<\/p>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d \u043f\u043e\u0434\u0445\u043e\u0434 \u0430\u0442\u043e\u043c\u0430\u0440\u043d\u044b\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043c\u043e\u0436\u0435\u0442 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043c html \u043a\u043e\u0434\u0430. \u041e\u0434\u043d\u0430\u043a\u043e \u0434\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u0447\u043d\u044b\u043c \u0438 \u043b\u0430\u043a\u043e\u043d\u0438\u0447\u043d\u044b\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u043a\u043b\u0430\u0441\u0441\u043e\u0432. \u041f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u043c \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430 \u0432 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441ss \u0441\u0442\u0438\u043b\u0435\u0439, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043e\u0431\u0435\u0440\u0442\u043e\u043a.<\/p>\n<h2>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u044b \u0434\u043b\u044f &#8212; \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c, \u0448\u0440\u0438\u0444\u0442\u043e\u0432, \u0438\u043a\u043e\u043d\u043e\u043a \u0438 \u0442\u0434.<\/h2>\n<ol>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0438 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0446\u0432\u0435\u0442\u043e\u0432, \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043a\u0440\u0430\u0441\u0438\u0442\u044c \u043f\u0438\u043f\u0435\u0442\u043a\u043e\u0439, \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u044f \u0446\u0432\u0435\u0442, \u0438\u043b\u0438 \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c hex \u043a\u043e\u0434\u044b.<\/p>\n<\/li>\n<\/ol>\n<ol start=\"2\">\n<li>\n<p>\u041c\u0430\u043b\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0442\u0442\u0435\u043d\u043a\u043e\u0432 \u043e\u0434\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043d\u0435\u043d\u0443\u0436\u043d\u043e\u0439 \u043f\u0443\u0442\u0430\u043d\u0438\u0446\u044b. \u041d\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0439\u0442\u0435 &#171;50 \u043e\u0442\u0442\u0435\u043d\u043a\u043e\u0432 \u0441\u0435\u0440\u043e\u0433\u043e&#187;. \u0414\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043e\u043a\u043e\u043b\u043e 6 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0438 4 \u0432\u0430\u0440\u0438\u0430\u0446\u0438\u0439 \u0441\u0435\u0440\u043e\u0433\u043e.<\/p>\n<\/li>\n<\/ol>\n<ol start=\"3\">\n<li>\n<p>\u0412\u044b\u043d\u0435\u0441\u0435\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 \u0432 ui kit (dashboard) \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u043a\u043e\u0434\u0430\u0445 \u0446\u0432\u0435\u0442\u0430 \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0431\u0435\u0437 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f Figma. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0440\u0430\u0441\u043f\u0435\u0447\u0430\u0442\u043a\u0443 \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u0443 \u0434\u043b\u044f brandbook.<\/p>\n<\/li>\n<\/ol>\n<ol start=\"4\">\n<li>\n<p>\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439 \u0432 figma \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0442\u044c \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f\u043c\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0446\u0432\u0435\u0442\u043e\u0432 \u0432 \u043a\u043e\u0434\u0435. \u042d\u0442\u043e \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u043d\u0435 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 figma \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0446\u0432\u0435\u0442\u0430.<\/p>\n<\/li>\n<\/ol>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440\u044b \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0439<\/p>\n<p>main, primary, success, danger, warning<\/p>\n<pre><code class=\"css\">$color-main: #464c54;  $color-primary: #ff2e00; $color-primary-hover: #d72d00; $color-primary-active: #bd2200;  $color-success: #25b782; $color-blue: #7da9e0;  $color-withe: #f4f4f4; $color-gray-light: #ccd1d9; $color-gray: #8c9299;  $color-element: #545c66; $color-element-light: #656d78;<\/code><\/pre>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043b\u0430\u0441\u0441\u044b \u0446\u0432\u0435\u0442\u043e\u0432 \u0438 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 html.<\/p>\n<pre><code class=\"css\">@mixin color($name, $color) {   .bg-#{$name}  {     background: $color !important; \/* stylelint-disable-line declaration-no-important *\/   }   .color-#{$name} {     color: $color !important; \/* stylelint-disable-line declaration-no-important *\/   } }<\/code><\/pre>\n<p>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c<\/p>\n<pre><code class=\"css\">@include color('base', $color-main); @include color('primary', $color-primary); @include color('success', $color-success); @include color('blue', $color-blue); @include color('withe', $color-withe); @include color('light', $color-gray-light); @include color('gray', $color-gray); @include color('element', $color-element); @include color('element2', $color-element-light);<\/code><\/pre>\n<p>\u0434\u043b\u044f `background-color` \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c bg-{{name}} .bg-primary .bg-danger<\/p>\n<p>\u0434\u043b\u044f `color` \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c color-{{name}}<\/p>\n<p>.color-primary .color-danger<\/p>\n<hr\/>\n<h2>\u041a\u0440\u0430\u0442\u043d\u043e\u0441\u0442\u044c \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432 \u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432<\/h2>\n<p>\u041a\u0440\u0430\u0442\u043d\u043e\u0441\u0442\u044c\u044e \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432 \u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u044d\u0442\u043e \u0441\u043e\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u0435 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u043e\u043c \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430 \u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0445 \u0442\u0430\u043a\u0438\u0445 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0439 \u043d\u0430 \u043e\u0434\u043d\u043e \u0446\u0435\u043b\u043e\u0435 \u0447\u0438\u0441\u043b\u043e. \u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f 4px &#8212; \u0437\u043d\u0430\u0447\u0438\u0442, \u0432\u0441\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u044f 4, \u043d\u0430 \u043a\u0430\u043a\u043e\u0435-\u043b\u0438\u0431\u043e \u0446\u0435\u043b\u043e\u0435 \u0447\u0438\u0441\u043b\u043e.\u00a0<\/p>\n<p>4px, 8px, 12px, 16px, 20px \u0438 \u0442\u0434.\u00a0 \u0420\u0430\u0437\u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c 1px \u0438 2px.<\/p>\n<p>\u041f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043a\u0440\u0430\u0442\u043d\u043e\u0441\u0442\u044c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, 22px \u0438\u043b\u0438 11px), \u043d\u043e \u043b\u0443\u0447\u0448\u0435 \u0441\u043e\u0431\u043b\u044e\u0434\u0430\u0442\u044c \u0435\u0435 \u0445\u043e\u0442\u044f \u0431\u044b \u043a 2px. \u0435\u0441\u043b\u0438 \u0431\u0430\u0437\u043e\u0432\u0430\u044f 4px.<\/p>\n<p>\u0412 \u0438\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0430\u043c \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0434\u0435\u043b\u0438\u0442\u044c \u043f\u0438\u043a\u0441\u0435\u043b\u044c \u043f\u0440\u0438 \u0446\u0435\u043d\u0442\u0440\u043e\u0432\u043a\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443 \u043a\u043d\u043e\u043f\u043a\u0438 \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 11px, \u0430 \u0432\u044b\u0441\u043e\u0442\u0430 \u043a\u043d\u043e\u043f\u043a\u0438 40px.<\/p>\n<p>\u0414\u0435\u043b\u0430\u0435\u043c \u043d\u0430\u0448 \u0448\u0440\u0438\u0444\u0442 \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443 \u043a\u043d\u043e\u043f\u043a\u0438.<\/p>\n<p>40 &#8212; 11 = 29\/2 = 14.5 (\u043e\u0442\u0441\u0442\u0443\u043f \u0441\u0432\u0435\u0440\u0445\u0443 \u0438 \u043d\u0438\u0437\u0443)<\/p>\n<p>\u0411\u0440\u0430\u0443\u0437\u0435\u0440 \u0441\u043c\u043e\u0436\u0435\u0442 \u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c\u0441\u044f\u00a0 \u0441 \u0434\u0435\u043b\u0435\u043d\u0438\u0435\u043c \u043d\u0430 \u043f\u0438\u043a\u0441\u0435\u043b\u0438 &#8212; \u044d\u0442\u043e \u043d\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430. \u0417\u0434\u0435\u0441\u044c \u0441\u0442\u043e\u0438\u0442 \u0432\u043e\u043f\u0440\u043e\u0441 \u044d\u0441\u0442\u0435\u0442\u0438\u0447\u043d\u043e\u0441\u0442\u0438 \u0438 \u043b\u0435\u0433\u043a\u043e\u0441\u0442\u0438 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0432\u0435\u0440\u0441\u0442\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0410 \u043f\u0440\u0438 \u0440\u0430\u0437\u0431\u0438\u0435\u043d\u0438\u0438 \u043c\u0430\u043a\u0435\u0442\u0430 \u043f\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u044c\u043d\u043e\u0439 \u0441\u0435\u0442\u043a\u0435 \u0432 figma \u043d\u0435 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0432\u044b\u0445\u043e\u0434\u0438\u0442\u044c \u0437\u0430 \u0435\u0433\u043e \u0433\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<p>\u041d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0435\u043c \u0432\u044b\u043d\u043e\u0441\u0438\u0442\u044c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043f\u043e \u043e\u0442\u0441\u0442\u0443\u043f\u0430\u043c \u0432 ui kit, \u0442\u0443\u0442 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0432\u0441\u0435 \u0434\u043e\u0433\u043e\u0432\u043e\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u043f\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0443.<\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043b\u0438\u0441\u0442, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043a\u043b\u0430\u0441\u0441\u043e\u0432:<\/p>\n<pre><code class=\"css\">$sizes: (   0: 0,   4: 4px,   8: 8px,   12: 12px,   16: 16px,   20: 20px,   24: 24px,   28: 28px,   32: 32px,   36: 36px,   40: 40px,   44: 44px,   48: 48px, );<\/code><\/pre>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0432 \u043c\u0438\u043a\u0441\u0438\u043d\u0435 \u0438 \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u043a\u043b\u0430\u0441\u0441\u044b:<\/p>\n<pre><code class=\"css\">@mixin sizes-classes($screen-name: '') {   @each $index, $size in $sizes {     .m#{$screen-name}-#{$index} {       margin: $size !important;     }     .mx#{$screen-name}-#{$index} {       margin-right: $size !important;       margin-left: $size !important;     }     .my#{$screen-name}-#{$index} {       margin-top: $size !important;       margin-bottom: $size !important;     }     .ml#{$screen-name}-#{$index} {       margin-left: $size !important;     }     .mr#{$screen-name}-#{$index} {       margin-right: $size !important;     }     .mt#{$screen-name}-#{$index} {       margin-top: $size !important;     }     .mb#{$screen-name}-#{$index} {       margin-bottom: $size !important;     }      .p#{$screen-name}-#{$index} {       padding: $size !important;     }     .px#{$screen-name}-#{$index} {       padding-right: $size !important;       padding-left: $size !important;     }     .py#{$screen-name}-#{$index} {       padding-top: $size !important;       padding-bottom: $size !important;     }     .pl#{$screen-name}-#{$index} {       padding-left: $size !important;     }     .pr#{$screen-name}-#{$index} {       padding-right: $size !important;     }     .pt#{$screen-name}-#{$index} {       padding-top: $size !important;     }     .pb#{$screen-name}-#{$index} {       padding-bottom: $size !important;     }   } } <\/code><\/pre>\n<pre><code class=\"css\">@include sizes-classes; @include project-classes;  @include media(lg) {   @include sizes-classes('-lg');   @include project-classes('-lg'); }  @include media(md) {   @include sizes-classes('-md');   @include project-classes('-md'); }  @include media(sm) {   @include sizes-classes('-sm');   @include project-classes('-sm'); }<\/code><\/pre>\n<p>\u041d\u0435 \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u044b \u0434\u043b\u044f \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432 \u0438 \u0434\u0435\u043b\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 20 \u0432\u0430\u0440\u0438\u0430\u0446\u0438\u0439, \u0442\u0430\u043a \u043a\u0430\u043a \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043c\u0430\u0441\u0441\u0443 \u0440\u0435\u0434\u043a\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0438 \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u043c css \u0444\u0430\u0439\u043b \u0434\u043b\u044f \u043f\u0435\u0440\u0432\u0438\u0447\u043d\u043e\u0439 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438. \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 1 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f 14 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 (\u0438\u0437 \u043c\u0438\u043a\u0441\u0438\u043d\u0430 padding \u0438 margin) * 4 (\u0432\u0441\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f) &#8212; \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f 56 \u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u0442\u043e\u0438\u0442 \u0441\u043e\u043a\u0440\u0430\u0449\u0430\u0442\u044c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0432 \u043b\u0438\u0441\u0442\u0435.<\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445:<\/p>\n<pre><code class=\"css\">$size-0: map-get($sizes, 0); $size-4: map-get($sizes, 4); $size-8: map-get($sizes, 8); $size-12: map-get($sizes, 12); $size-16: map-get($sizes, 16); $size-20: map-get($sizes, 20); $size-24: map-get($sizes, 24); $size-28: map-get($sizes, 28); $size-32: map-get($sizes, 32); $size-36: map-get($sizes, 36); $size-40: map-get($sizes, 40); $size-44: map-get($sizes, 44); $size-48: map-get($sizes, 48); $size-52: 52px; $size-60: 60px; $size-64: 64px; $size-80: 80px; $size-84: 84px; $size-88: 88px; $size-100: 100px;<\/code><\/pre>\n<p>\u0414\u043e \u043f\u0435\u0440\u0432\u043e\u0433\u043e size-52 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043e\u0442 $sizes. \u0414\u043b\u044f \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b, \u043a\u0440\u0430\u0442\u043d\u044b\u0435 \u043d\u0430\u0448\u0438\u043c \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u0438\u044f\u043c.<\/p>\n<p>\u0412\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0437\u0430\u043f\u0440\u0435\u0442\u0438\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b, \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043f\u043e \u0442\u0438\u043f\u0443 $size-4 $size-32 \u0438 \u0442\u0434, \u0430 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043e\u043f\u0443\u0441\u043a\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 100 50 25 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u043e\u0432, \u0415\u0441\u043b\u0438 \u0432\u0441\u0435 \u0436\u0435 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043e\u0442\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u043e\u0442 \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0430 &#8212; \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0439\u0442\u0435 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043d\u0435\u0434\u043e\u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u0438 \u043f\u043e\u044f\u0441\u043d\u0438\u0442, \u0447\u0442\u043e \u044d\u0442\u043e &#8212; \u0447\u0430\u0441\u0442\u044c \u0434\u0438\u0437\u0430\u0439\u043d\u0430.<\/p>\n<pre><code class=\"css\">  &amp;__subcategories {     max-width: 600px; \/\/ \u0420\u0430\u0437\u043c\u0435\u0440 \u0432\u0442\u043e\u0440\u043e\u0439 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 \u0438\u0437 \u0434\u0438\u0437\u0430\u0439\u043d\u0430   }<\/code><\/pre>\n<p>\u0434\u043b\u044f `margin` \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c m`{-media}?`-`{size}` (x,y) &#8212; \u043e\u0441\u0438<\/p>\n<p>.m-1 .ml-2 mt-md-1 .mx-4 .my-2<\/p>\n<p>\u0434\u043b\u044f `padding` \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c p`{-media}?`-`{size}` (x,y) &#8212; \u043e\u0441\u0438<\/p>\n<p>.p-1 .pl-2 pt-md-1 .px-4 .py-2<\/p>\n<p>\u0434\u043b\u044f \u0438\u043a\u043e\u043d\u043e\u043a \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u044b &#8212; `icon-{size}`<\/p>\n<p>\u0427\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b \u0442\u043e\u043b\u044c\u043a\u043e 3 \u043a\u043b\u0430\u0441\u0441\u0430:<\/p>\n<p>icon-16 icon-24 icon-32<\/p>\n<pre><code class=\"css\">svg {   width: 100%;   height: 100%;   fill: currentColor; }  .icon-16 {   width: $size-16;   height: $size-16; }  .icon-24 {   width: $size-24;   height: $size-24; }  .icon-32 {   width: $size-32;   height: $size-32; }<\/code><\/pre>\n<hr\/>\n<h2>\u0421\u0442\u0438\u043b\u0438 \u0448\u0440\u0438\u0444\u0442\u043e\u0432<\/h2>\n<p>\u041a\u0430\u043a \u0438 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 \u0446\u0432\u0435\u0442\u0430\u043c\u0438 \u0438 \u043e\u0442\u0441\u0442\u0443\u043f\u0430\u043c\u0438 \u0432\u0441\u0435 \u0448\u0440\u0438\u0444\u0442\u044b \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0437\u0430\u043d\u0435\u0441\u0442\u0438 \u0432 \u0441\u0442\u0438\u043b\u0438 figma \u0438 \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u0432 up kit, \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u044f \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0434\u0435\u0441\u044f\u0442\u043a\u0438 \u0432\u0430\u0440\u0438\u0430\u0446\u0438\u0439 \u0442\u043e\u043b\u0449\u0438\u043d\u044b \u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430, \u043c\u0435\u0436\u0431\u0443\u043a\u0432\u0435\u043d\u043d\u044b\u0445 \u0438 \u043c\u0435\u0436\u0441\u0442\u0440\u043e\u0447\u043d\u044b\u0445 \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b\u043e\u0432. \u041e\u0431\u044b\u0447\u043d\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e: \u0440\u0430\u0437\u043c\u0435\u0440\u044b &#8212; h1, h2, h3, h4: default text, small text. \u041d\u0430\u0447\u0435\u0440\u0442\u0430\u043d\u0438\u044f &#8212; regular, medium, bold.<\/p>\n<p>\u0412\u0435\u0440\u0441\u0442\u0430\u043b\u044c\u0449\u0438\u043a\u0443 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043d\u0430\u0448\u0438 \u0448\u0440\u0438\u0444\u0442\u044b, \u043d\u0443\u0436\u043d\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443, \u043e\u0442\u043a\u0443\u0434\u0430 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0448\u0440\u0438\u0444\u0442\u044b regular, bold \u0438 \u0442.\u0434., \u0412 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0441\u0434\u0435\u043b\u0430\u0435\u0442 \u043d\u0430\u0447\u0435\u0440\u0442\u0430\u043d\u0438\u0435 bold \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e. \u042d\u0442\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043c\u0430\u043a\u0435\u0442\u0443.<\/p>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043a\u043b\u0430\u0441\u0441\u044b \u0434\u043b\u044f \u0437\u0430\u0434\u0430\u043d\u0438\u044f \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u043e \u0442\u0438\u043f\u0443 .h1 .h2 \u0438\u043b\u0438 \u0432 \u043a\u0440\u0430\u0439\u043d\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 @mixin h1. \u041c\u0438\u043a\u0441\u0438\u043d\u044b \u043f\u043b\u043e\u0445\u0438 \u0442\u0435\u043c \u0447\u0442\u043e,\u00a0 \u0434\u0443\u0431\u043b\u0438\u0440\u0443\u044e\u0442, \u0430 \u043d\u0435 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430. \u0412 \u0432\u0435\u0440\u0441\u0442\u043a\u0435 \u043d\u0443\u0436\u043d\u044b\u0439 \u0448\u0440\u0438\u0444\u0442 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0441\u00a0 \u043f\u043e\u043c\u043e\u0449\u044c\u044e font-weight.<\/p>\n<p>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/p>\n<pre><code class=\"css\">@font-face {   src: url('https:\/\/fonts.gstatic.com\/s\/rubik\/v14\/iJWKBXyIfDnIV7nBrXw.woff2') format('woff2');   font-family: 'Rubik';   font-weight: 100 500;   font-style: normal;   font-display: swap; }  @font-face {   src: url('https:\/\/fonts.gstatic.com\/s\/rubik\/v14\/iJWKBXyIfDnIV7nBrXw.woff2') format('woff2');   font-family: 'Rubik';   font-weight: 600 800;   font-style: normal;   font-display: swap; } <\/code><\/pre>\n<p>\u0422\u0430\u0431\u043b\u0438\u0446\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0438 \u0442\u0438\u043f\u043e\u0432:<\/p>\n<pre><code>100: Thin; 200: Extra Light (Ultra Light); 300: Light; 400: Normal; 500: Medium; 600: Semi Bold (Demi Bold); 700: Bold; 800: Extra Bold (Ultra Bold); 900: Black (Heavy).<\/code><\/pre>\n<p>\u041d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0448\u0440\u0438\u0444\u0442\u043e\u0432.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0434\u0440\u0443\u0433 \u043f\u043e \u043a\u0430\u043a\u043e\u0439-\u043b\u0438\u0431\u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u044d\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e, \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u0435\u043d.<\/p>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043c\u0438\u043a\u0441\u0438\u043d\u043e\u0432 \u0434\u043b\u044f \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432<\/p>\n<pre><code class=\"css\">.h3 { \u00a0\u00a0@include h3;  \u00a0\u00a0@include media(md) { \u00a0\u00a0\u00a0\u00a0@include h4; \u00a0\u00a0} }<\/code><\/pre>\n<pre><code class=\"css\">@mixin font($size: 18px,  $line-height: 24px, $letter-spacing: 0.1px, $weight: 400, $bottom: false) {   margin: 0;   font-family: $font;   font-weight: $weight;   font-size: $size;   line-height: $line-height;   letter-spacing: $letter-spacing;   user-select: text;    @if $bottom {     margin-bottom: $bottom;   } }  @mixin h1 {   @include font(48px, 54px, 2px, 600, $size-32); }  @mixin h2 {   @include font(32px, 32px, 1.5px, 500, $size-24); }  @mixin h3 {   @include font(24px, 28px, 0.5px, 400, $size-16); }  @mixin h4 {   @include font(20px, 28px, 0.3px, 400, $size-8); }  @mixin text {   @include font; }  @mixin text-sm {   @include font(16px, 22px); }  @mixin text-default {   @include text;   @include media(tablet) {     @include text-sm;   } } <\/code><\/pre>\n<p>\u0417\u0430\u0448\u0438\u0432\u0430\u0442\u044c margin bottom \u0432 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u043e, \u043e\u0431\u044b\u0447\u043d\u043e \u044d\u0442\u0438 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0448\u0440\u0438\u0444\u0442\u0430 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0434\u0438\u0437\u0430\u0439\u043d\u043e\u043c.<\/p>\n<p>\u0423\u0431\u0440\u0430\u0442\u044c \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u043c\u043e\u0436\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c: &#8212; .h1 .mb-0<\/p>\n<hr\/>\n<h2>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/h2>\n<p>\u0412\u0441\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0435\u0441\u044f \u0441\u0442\u0438\u043b\u0438 \u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 (\u0442\u0435\u043d\u0438, \u0440\u0430\u0434\u0438\u0443\u0441\u044b, \u0431\u043e\u0440\u0434\u0435\u0440\u044b) \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440 \u0442\u0430\u043a\u0436\u0435 \u0432\u044b\u043d\u043e\u0441\u0438\u0442 \u0432 ui kit. \u041d\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0434\u0435\u043b\u0430\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0432\u0430\u0440\u0438\u0430\u0446\u0438\u0439.<\/p>\n<p>\u0412 \u0432\u0435\u0440\u0441\u0442\u043a\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u044d\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a:<\/p>\n<pre><code class=\"css\">$font: 'Rubik', sans-serif; $radius-block: $size-8; $radius-element: $size-8; $border-element: $size-4; $show-block: 0 0 $size-40 rgba($color-element, 0.1); $animate-time: 0.2s;<\/code><\/pre>\n<hr\/>\n<h2>\u041a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u0435 \u0442\u043e\u0447\u043a\u0438<\/h2>\n<p>\u0414\u0438\u0437\u0430\u0439\u043d\u0435\u0440 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0432 ui kit: \u043a\u0430\u043a\u0438\u0435 \u0442\u043e\u0447\u043a\u0438 \u043f\u0435\u0440\u0435\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0443 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041e\u0431\u044b\u0447\u043d\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c \u044d\u043a\u0440\u0430\u043d\u043e\u0432 \u043d\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445.<\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0451\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435:<\/p>\n<pre><code class=\"css\">$breakpoints: (   xl: 1200px,   lg: 992px,   md: 768px,   sm: 576px, );<\/code><\/pre>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043c\u0438\u043a\u0441\u0438\u043d \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043c\u0435\u0434\u0438\u0430 \u0443\u0441\u043b\u043e\u0432\u0438\u0439:<\/p>\n<pre><code class=\"css\">@mixin media($Device) {   @media screen and (max-width: map-get($breakpoints, $Device) - 1px) {     @content;   } }<\/code><\/pre>\n<hr\/>\n<h2>\u0421\u0435\u0442\u043a\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h2>\n<p>\u042d\u0442\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043a\u043e\u043b\u043e\u043d\u043e\u043a, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f \u0431\u0443\u0434\u0443\u0449\u0438\u0435 \u0431\u043b\u043e\u043a\u0438. \u041f\u043e\u0434 \u0440\u0430\u0437\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0441\u0435\u0442\u043a\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f, \u043a\u0430\u043a \u0438 \u043c\u0435\u0436\u043a\u043e\u043b\u043e\u043d\u043e\u0447\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b.<\/p>\n<p>\u041e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0432 \u0441\u0442\u0438\u043b\u044f\u0445:<\/p>\n<pre><code class=\"css\">@import 'variables';  $columns-count: 12; $gutter: $size-16; $width: 100% \/ $columns-count;  @mixin grid($breakpoint: '') {   $prefix: if($breakpoint == '', '', '-');    @for $i from 1 through $columns-count {     .col#{$prefix}#{$breakpoint}-#{$i} {       width: $width * $i;       @if $i != 1 {         margin-left: $gutter;       }     }   }    @for $i from 1 through $columns-count {     .off#{$prefix}#{$breakpoint}-#{$i} {       margin-left: calc(#{$gutter} + #{$width * $i});     }   } }  @include grid; @each $breakpoint, $value  in $breakpoints {   @media (max-width: $value) {     @include grid($breakpoint);   } } <\/code><\/pre>\n<hr\/>\n<h2>\u041a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u043a\u043b\u0430\u0441\u0441\u044b<\/h2>\n<p>\u0414\u043b\u044f \u0432\u0441\u0435\u0445 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043f\u0440\u0435\u0444\u0438\u043a\u0441:<\/p>\n<pre><code class=\"css\">$custom: 'pr'; \/\/ \u043f\u0440\u0435\u0444\u0438\u043a\u0441 \u0434\u043b\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432  .#{$custom}-container {   margin: 0 auto;   padding: 0 map-get($sizes, 24);   width: 100%;   max-width: 1140px !important;    @include media(md) {     padding: 0 map-get($sizes, 16);   }    @include media(md) {     max-width: 556px !important;   } }<\/code><\/pre>\n<hr\/>\n<h2>\u041a\u043b\u0430\u0441\u0441\u044b \u0443\u0442\u0438\u043b\u0438\u0442\u044b<\/h2>\n<pre><code class=\"css\">@mixin project-classes($screen-name: '') {   .d#{$screen-name}-n {     display: none !important;   }   .d#{$screen-name}-b {     display: block !important;   }   .d#{$screen-name}-f {     display: flex !important;   }   .fw#{$screen-name}-w {     flex-wrap: wrap !important;   }   .fw#{$screen-name}-n {     flex-wrap: nowrap !important;   }   .fd#{$screen-name}-c {     flex-direction: column !important;   }   .fd#{$screen-name}-r {     flex-direction: row !important;   }   .fb#{$screen-name}-100 {     flex-basis: 100% !important;   }   .ai#{$screen-name}-c {     align-items: center !important;   }   .ai#{$screen-name}-fs {     align-items: flex-start !important;   }   .ai#{$screen-name}-fe {     align-items: flex-end !important;   }   .as#{$screen-name}-fs {     align-self: flex-start !important;   }   .as#{$screen-name}-fe {     align-self: flex-end !important;   }   .as#{$screen-name}-c {     align-self: center !important;   }   .jc#{$screen-name}-fe {     justify-content: flex-end !important;   }   .jc#{$screen-name}-fs {     justify-content: flex-start !important;   }   .jc#{$screen-name}-c {     justify-content: center !important;   }   .jc#{$screen-name}-sb {     justify-content: space-between !important;   }    .bg#{$screen-name}-n {     background: none !important;   }    .br#{$screen-name}-n {     border: none !important;   }    .w#{$screen-name}-100 {     width: 100% !important;   }   .h#{$screen-name}-100 {     height: 100% !important;   }    .w#{$screen-name}-50 {     width: 50% !important;   }   .h#{$screen-name}-50 {     height: 50% !important;   }    .w#{$screen-name}-25 {     width: 50% !important;   }   .h#{$screen-name}-25 {     height: 50% !important;   }    .f#{$screen-name}-l {     font-weight: 300;   }   .f#{$screen-name}-r {     font-weight: 400;   }   .f#{$screen-name}-m {     font-weight: 600;   }   .f#{$screen-name}-b {     font-weight: 800;   } }<\/code><\/pre>\n<p>\u042d\u0442\u043e \u0438 \u0435\u0441\u0442\u044c \u0432\u0435\u0440\u0441\u0442\u043a\u0430 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u043c. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e\u0447\u0435\u043d\u044c \u0447\u0430\u0441\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0440\u043e\u0432\u043d\u044f\u0442\u044c \u0431\u043b\u043e\u043a\u0438 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438: \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e d-f, \u0438 \u043d\u0435 \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u044b-\u043e\u0431\u0435\u0440\u0442\u043a\u0438.<\/p>\n<p>\u0414\u043b\u044f `display-flex: flex`\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c `d-f`<\/p>\n<p>\u0414\u043b\u044f `align-items: center`- `ai-c`<\/p>\n<p>\u0421\u043f\u0438\u0441\u043e\u043a \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043f\u043e\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043f\u043e \u043c\u0435\u0440\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0415\u0441\u043b\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 2 \u0441\u043b\u043e\u0432, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0431\u0443\u043a\u0432\u044b \u0441\u043b\u043e\u0432 `text-align` = `ta`<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 1 \u0431\u0443\u043a\u0432\u044b \u0438 \u043d\u0435 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u0443\u0435\u0442 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 &#8212;\u00a0 `display` = `d`<\/p>\n<p>\u041f\u0440\u0438 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u0435 \u043f\u0435\u0440\u0432\u043e\u0439 \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u0431\u0443\u043a\u0432\u044b &#8212; `border` = `br` \u0438\u043b\u0438 \u0447\u0430\u0441\u0442\u044c \u0441\u043b\u043e\u0432\u0430 \u043f\u043e \u043b\u043e\u0433\u0438\u043a\u0435 `background` = `bg`<\/p>\n<p>\u0421\u0442\u0430\u0440\u0430\u0439\u0442\u0435\u0441\u044c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u0443\u044e \u0432\u0435\u0440\u0441\u0442\u043a\u0443 \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0438 \u043c\u0438\u043a\u0441\u0438\u043d\u043e\u0432 scss.<\/p>\n<p>`class=&#187;d-f m-4 m-md-4&#8243;` &#8212; \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u043e<\/p>\n<p>`class=&#187;d-f m-4 m-md-4 d-f m-4 m-md-4 d-f m-4 m-md-4 d-f m-4 m-md-4&#8243;` &#8212; \u041f\u043b\u043e\u0445\u043e. \u0412 \u0442\u0430\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043a\u043b\u0430\u0441\u0441 \u0441 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0433\u043e.<\/p>\n<p>`class=&#187;d-f custom-class&#187;` &#8212; \u043d\u0435 \u0437\u0430\u043f\u0440\u0435\u0449\u0435\u043d\u043e, \u043d\u043e \u0438\u043d\u043e\u0433\u0434\u0430 \u0443\u0434\u043e\u0431\u043d\u0435\u0439 \u0438 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u0435\u0439 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0432 \u043a\u043b\u0430\u0441\u0441\u0435: `display: flex`.<\/p>\n<p>\u0412\u043e\u0437\u044c\u043c\u0438\u0442\u0435 \u0437\u0430 \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u043d\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 5 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0432 \u0431\u043b\u043e\u043a\u0435.<\/p>\n<p>\u041d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u043e \u043a\u043b\u0430\u0441\u0441\u044b w-100 h-100, w-50 h-50, w-25 h-25<\/p>\n<hr\/>\n<h2>Z-index<\/h2>\n<p>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 `@include z-index(\u043d\u0430\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043b\u044e\u0447\u0430)`<\/p>\n<p>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u044f z-index \u0437\u0430\u0434\u0430\u043d\u044b \u0441 \u0448\u0430\u0433\u043e\u043c 10 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043c\u0435\u0441\u0442\u043e \u0434\u043b\u044f \u043e\u0448\u0438\u0431\u043e\u043a \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a.<\/p>\n<p>\u041f\u0440\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u043d\u043e\u0432\u043e\u0433\u043e \u043a\u043b\u044e\u0447\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432\u0441\u0435 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u044b \u0441 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u043a\u0430\u0440\u0442\u043e\u0439 z-index:<\/p>\n<pre><code class=\"css\">$z-index: (   modal: 30,   header: 20,   menu: 10,   default: 1, );<\/code><\/pre>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>\u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0441\u043d\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442\u044c \u043a \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0443 \u0432\u0435\u0440\u0441\u0442\u043a\u0438 \u0438 \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u043c\u0430\u043a\u0435\u0442\u0430. \u042d\u0442\u043e \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u0435\u0439 \u0432 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442 \u043b\u0435\u0433\u043a\u043e\u0435, \u043d\u0435\u0437\u0430\u0442\u0435\u0439\u043b\u0438\u0432\u043e\u0435 \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043c\u0435\u0436\u0434\u0443 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u0430\u043c\u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0441\u0444\u0435\u0440.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"v-portal\" style=\"display:none;\"><\/div>\n<\/div>\n<p> <!----> <!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/654555\/\"> https:\/\/habr.com\/ru\/post\/654555\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0414\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430\u043c\u0438 \u0438 \u0432\u0435\u0440\u0441\u0442\u0430\u043b\u044c\u0449\u0438\u043a\u0430\u043c\u0438 \u0434\u043b\u044f \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u043e\u0448\u0438\u0431\u043e\u043a \u0438 \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0440\u0430\u0431\u043e\u0442\u044b.<\/p>\n<p>\u0420\u0430\u0431\u043e\u0442\u0430 \u0431\u043e\u0433\u0430\u0442\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438. \u041e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u0430 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u0430\u043c \u0440\u0430\u0437\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0444\u0438\u043b\u044f.<\/p>\n<p>\u0414\u0438\u0437\u0430\u0439\u043d \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0441\u043d\u043e\u0432\u043e\u0439 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0442\u043a\u0438 \u0438 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<\/p>\n<h2>\u041a\u0440\u0438\u0442\u0435\u0440\u0438\u0438 \u0445\u043e\u0440\u043e\u0448\u0435\u0433\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0430:<\/h2>\n<ol>\n<li>\n<p>\u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u0438\u0437\u0430\u0439\u043d\u0430 (\u0446\u0432\u0435\u0442\u0430, \u0448\u0440\u0438\u0444\u0442\u044b, \u0440\u0430\u0437\u043c\u0435\u0440\u044b, \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0438 \u0442.\u0434.)<\/p>\n<\/li>\n<\/ol>\n<ol start=\"2\">\n<li>\n<p>\u041f\u0440\u0438\u043d\u0446\u0438\u043f \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0441\u0442\u0438. \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043e\u0434\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u043a \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f\u043c \u044d\u0442\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u0434\u0440\u0443\u0433\u0438\u0445 \u0447\u0430\u0441\u0442\u044f\u0445 \u043c\u0430\u043a\u0435\u0442\u0430. \u041d\u0443\u0436\u043d\u043e \u0438\u0437\u0431\u0435\u0433\u0430\u0442\u044c \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.- \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0438\u0445. \u0420\u0435\u0447\u044c \u0438\u0434\u0451\u0442 \u043e\u0431 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0441\u0442\u0438\u043b\u0435\u0439 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 figma: \u0448\u0440\u0438\u0444\u0442\u043e\u0432, \u0446\u0432\u0435\u0442\u043e\u0432, \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432 \u0438 \u043f\u0440\u043e\u0447\u0435\u0433\u043e.<\/p>\n<\/li>\n<\/ol>\n<ol start=\"3\">\n<li>\n<p>\u041f\u043e\u0440\u044f\u0434\u043e\u043a \u0432 \u0441\u043b\u043e\u044f\u0445 \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0439 \u043d\u0435\u0439\u043c\u0438\u043d\u0433 &#8212; \u043f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e \u044d\u0442\u043e \u0432\u0430\u0448 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u0438\u0437\u043c. \u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442\u044c \u043a \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0443 \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e.<\/p>\n<\/li>\n<\/ol>\n<ol start=\"4\">\n<li>\n<p>\u041f\u0440\u043e\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0438 touch \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445. \u041f\u043e\u043c\u043d\u0438\u0442\u0435 \u043e\u0431 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0438 hover event\u00a0 \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u0435\u0432\u0430\u0439\u0441\u0430\u0445, \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0439\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e \u0432 \u0441\u0432\u043e\u0438\u0445 \u043c\u0430\u043a\u0435\u0442\u0430\u0445. (\u043d\u0430 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0435 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442, \u0430 \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0439 \u043a\u0435\u0439\u0441 \u043d\u0435 \u0443\u0447\u0442\u0435\u043d.)<\/p>\n<\/li>\n<\/ol>\n<ol start=\"5\">\n<li>\n<p>\u0414\u043b\u044f \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0432\u0435\u0440\u0441\u0442\u0430\u043b\u044c\u0449\u0438\u043a\u0430 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0443 \u0441\u0442\u043e\u0438\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0438\u0434\u0435\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439.<\/p>\n<\/p>\n<\/li>\n<\/ol>\n<h2>\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043f\u043e \u0432\u0435\u0440\u0441\u0442\u043a\u0435:<\/h2>\n<ol>\n<li>\n<p>Pixel perfect &#8212; \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0435\u0435. \u041e\u043d\u043e \u043f\u0440\u0435\u043e\u0431\u043b\u0430\u0434\u0430\u043b\u043e \u0434\u043b\u044f \u0440\u0430\u0441\u0442\u0440\u043e\u0432\u044b\u0445 \u043c\u0430\u043a\u0435\u0442\u043e\u0432, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0435 \u0431\u044b\u043b\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0443\u0442\u043e\u0447\u043d\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u041d\u0430 \u044d\u0442\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0434\u043b\u044f \u043d\u0430\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0434\u0438\u0437\u0430\u0439\u043d\u0430. \u041f\u043e\u0434\u043e\u0431\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e.<\/p>\n<\/li>\n<\/ol>\n<ol start=\"2\">\n<li>\n<p>\u041d\u0435 \u0441\u0442\u043e\u0438\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u043f\u043e \u0442\u0435\u0433\u0430\u043c \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 a, li, ui, h, p \u0438 \u0442\u0434, \u0421\u043e\u0437\u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043a\u043b\u0430\u0441\u0441\u044b \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0442\u043e\u0447\u043d\u043e\u0433\u043e \u0432\u044b\u0431\u043e\u0440\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0432\u044f\u0437\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043a\u043b\u0430\u0441\u0441 \u043e\u0431\u0435\u0440\u0442\u043a\u0443 \u0432 body .main h1 {}. \u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e h1 &#8212; \u043f\u043b\u043e\u0445\u043e .h1 &#8212; \u0445\u043e\u0440\u043e\u0448\u043e. \u041f\u043e\u043c\u043d\u0438\u043c \u043f\u0440\u043e \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0441\u0442\u0438!<\/p>\n<\/li>\n<\/ol>\n<ol start=\"3\">\n<li>\n<p>\u041d\u0435 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u044b\u0441\u043e\u0442\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c (input button \u0438 \u0442\u0434) \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e padding. \u0414\u0438\u0437\u0430\u0439\u043d\u0435\u0440 \u0437\u0430\u0434\u0430\u0435\u0442 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0441\u0442\u0440\u043e\u043a \u0438\u043b\u0438 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430\u00a0 \u043f\u043e\u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 height \u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0437\u0430\u0434\u0430\u0435\u043c \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445.<\/p>\n<\/li>\n<\/ol>\n<ol start=\"4\">\n<li>\n<p>\u041b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0438\u043a\u0441\u0435\u043b\u0438 \u0432 \u0432\u0435\u0440\u0441\u0442\u043a\u0435, \u0430 \u043d\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u0435\u0434\u0438\u043d\u0438\u0446\u044b \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f. \u0414\u0438\u0437\u0430\u0439\u043d \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u043d \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u0432\u043c\u0435\u0448\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b. \u041f\u0440\u043e\u0446\u0435\u043d\u0442\u044b \u0442\u043e\u0436\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0430\u043a\u043a\u0443\u0440\u0430\u0442\u043d\u043e,\u00a0 \u0435\u0441\u043b\u0438 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u043c\u0438\u043c\u043e 25% 50% 100% \u0442\u043e, \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u0432\u044b \u0434\u0435\u043b\u0430\u0435\u0442\u0435 \u0447\u0442\u043e-\u0442\u043e \u043d\u0435 \u0442\u0430\u043a. 50% \u0435\u0441\u043b\u0438 \u0434\u0435\u043b\u0438\u043c \u043f\u043e\u0440\u043e\u0432\u043d\u0443 2 \u0431\u043b\u043e\u043a\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 1 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f \u043d\u0443 \u0438 25% \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e 4 \u0431\u043b\u043e\u043a\u0430.<\/p>\n<\/p>\n<\/li>\n<\/ol>\n<h2>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0433\u043e\u0442\u043e\u0432\u044b\u0445 ui \u0441\u0438\u0441\u0442\u0435\u043c \u0438 bootstrap.<\/h2>\n<p>\u0412 \u043f\u0440\u043e\u0436\u0435\u043a\u0442\u0430\u0445 \u0443 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u0441 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u043b\u044e\u0431\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u0438 \u0444\u043e\u0440\u043c\u044b, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f bootstrap \u0438 \u043f\u0440\u043e\u0447\u0438\u0435 ui \u0441\u0438\u0441\u0442\u0435\u043c\u044b, \u0432\u044b \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u0431\u0443\u0434\u0435\u0442\u0435 \u043e\u0431\u0432\u044f\u0437\u044b\u0432\u0430\u0442\u044c \u0438\u0445 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u043e\u0431\u0435\u0440\u0442\u043a\u0430\u043c\u0438 \u0438 \u043a\u043e\u0441\u0442\u044b\u043b\u044f\u043c\u0438, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0435\u0441\u044f \u0437\u0430 \u0441\u043e\u0431\u043e\u0439 \u043d\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0432 \u0432\u0438\u0434\u0435 js \u0438 style \u043a\u043e\u0434\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u0441 \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u044b\u043c \u0432\u0438\u0437\u0443\u0430\u043b\u043e\u043c \u0441\u0442\u043e\u0438\u0442 \u044d\u0442\u043e\u0433\u043e \u0438\u0437\u0431\u0435\u0433\u0430\u0442\u044c \u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u043f\u043e\u0434 \u0441\u0432\u043e\u0438 \u043d\u0443\u0436\u0434\u044b.<\/p>\n<\/p>\n<h2>\u0420\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u044b.<\/h2>\n<p>\u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440 https:\/\/github.com\/jtapes\/styles-example<\/p>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d \u043f\u043e\u0434\u0445\u043e\u0434 \u0430\u0442\u043e\u043c\u0430\u0440\u043d\u044b\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043c\u043e\u0436\u0435\u0442 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043c html \u043a\u043e\u0434\u0430. \u041e\u0434\u043d\u0430\u043a\u043e \u0434\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u0447\u043d\u044b\u043c \u0438 \u043b\u0430\u043a\u043e\u043d\u0438\u0447\u043d\u044b\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u043a\u043b\u0430\u0441\u0441\u043e\u0432. \u041f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u043c \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430 \u0432 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441ss \u0441\u0442\u0438\u043b\u0435\u0439, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u0432\u044b\u0445 \u043e\u0431\u0435\u0440\u0442\u043e\u043a.<\/p>\n<h2>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u044b \u0434\u043b\u044f &#8212; \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c, \u0448\u0440\u0438\u0444\u0442\u043e\u0432, \u0438\u043a\u043e\u043d\u043e\u043a \u0438 \u0442\u0434.<\/h2>\n<ol>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0438 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0446\u0432\u0435\u0442\u043e\u0432, \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043a\u0440\u0430\u0441\u0438\u0442\u044c \u043f\u0438\u043f\u0435\u0442\u043a\u043e\u0439, \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u044f \u0446\u0432\u0435\u0442, \u0438\u043b\u0438 \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c hex \u043a\u043e\u0434\u044b.<\/p>\n<\/li>\n<\/ol>\n<ol start=\"2\">\n<li>\n<p>\u041c\u0430\u043b\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0442\u0442\u0435\u043d\u043a\u043e\u0432 \u043e\u0434\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043d\u0435\u043d\u0443\u0436\u043d\u043e\u0439 \u043f\u0443\u0442\u0430\u043d\u0438\u0446\u044b. \u041d\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0439\u0442\u0435 &#171;50 \u043e\u0442\u0442\u0435\u043d\u043a\u043e\u0432 \u0441\u0435\u0440\u043e\u0433\u043e&#187;. \u0414\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043e\u043a\u043e\u043b\u043e 6 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0438 4 \u0432\u0430\u0440\u0438\u0430\u0446\u0438\u0439 \u0441\u0435\u0440\u043e\u0433\u043e.<\/p>\n<\/li>\n<\/ol>\n<ol start=\"3\">\n<li>\n<p>\u0412\u044b\u043d\u0435\u0441\u0435\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 \u0432 ui kit (dashboard) \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u043a\u043e\u0434\u0430\u0445 \u0446\u0432\u0435\u0442\u0430 \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0431\u0435\u0437 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f Figma. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0440\u0430\u0441\u043f\u0435\u0447\u0430\u0442\u043a\u0443 \u0437\u0430\u043a\u0430\u0437\u0447\u0438\u043a\u0443 \u0434\u043b\u044f brandbook.<\/p>\n<\/li>\n<\/ol>\n<ol start=\"4\">\n<li>\n<p>\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439 \u0432 figma \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0442\u044c \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f\u043c\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0446\u0432\u0435\u0442\u043e\u0432 \u0432 \u043a\u043e\u0434\u0435. \u042d\u0442\u043e \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u043d\u0435 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 figma \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0446\u0432\u0435\u0442\u0430.<\/p>\n<\/li>\n<\/ol>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440\u044b \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0439<\/p>\n<p>main, primary, success, danger, warning<\/p>\n<pre><code class=\"css\">$color-main: #464c54;  $color-primary: #ff2e00; $color-primary-hover: #d72d00; $color-primary-active: #bd2200;  $color-success: #25b782; $color-blue: #7da9e0;  $color-withe: #f4f4f4; $color-gray-light: #ccd1d9; $color-gray: #8c9299;  $color-element: #545c66; $color-element-light: #656d78;<\/code><\/pre>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043b\u0430\u0441\u0441\u044b \u0446\u0432\u0435\u0442\u043e\u0432 \u0438 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 html.<\/p>\n<pre><code class=\"css\">@mixin color($name, $color) {   .bg-#{$name}  {     background: $color !important; \/* stylelint-disable-line declaration-no-important *\/   }   .color-#{$name} {     color: $color !important; \/* stylelint-disable-line declaration-no-important *\/   } }<\/code><\/pre>\n<p>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c<\/p>\n<pre><code class=\"css\">@include color('base', $color-main); @include color('primary', $color-primary); @include color('success', $color-success); @include color('blue', $color-blue); @include color('withe', $color-withe); @include color('light', $color-gray-light); @include color('gray', $color-gray); @include color('element', $color-element); @include color('element2', $color-element-light);<\/code><\/pre>\n<p>\u0434\u043b\u044f `background-color` \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c bg-{{name}} .bg-primary .bg-danger<\/p>\n<p>\u0434\u043b\u044f `color` \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c color-{{name}}<\/p>\n<p>.color-primary .color-danger<\/p>\n<hr\/>\n<h2>\u041a\u0440\u0430\u0442\u043d\u043e\u0441\u0442\u044c \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432 \u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432<\/h2>\n<p>\u041a\u0440\u0430\u0442\u043d\u043e\u0441\u0442\u044c\u044e \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432 \u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u044d\u0442\u043e \u0441\u043e\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u0435 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u043e\u043c \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430 \u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0445 \u0442\u0430\u043a\u0438\u0445 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0439 \u043d\u0430 \u043e\u0434\u043d\u043e \u0446\u0435\u043b\u043e\u0435 \u0447\u0438\u0441\u043b\u043e. \u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f 4px &#8212; \u0437\u043d\u0430\u0447\u0438\u0442, \u0432\u0441\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d\u0438\u044f 4, \u043d\u0430 \u043a\u0430\u043a\u043e\u0435-\u043b\u0438\u0431\u043e \u0446\u0435\u043b\u043e\u0435 \u0447\u0438\u0441\u043b\u043e.\u00a0<\/p>\n<p>4px, 8px, 12px, 16px, 20px \u0438 \u0442\u0434.\u00a0 \u0420\u0430\u0437\u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c 1px \u0438 2px.<\/p>\n<p>\u041f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043a\u0440\u0430\u0442\u043d\u043e\u0441\u0442\u044c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, 22px \u0438\u043b\u0438 11px), \u043d\u043e \u043b\u0443\u0447\u0448\u0435 \u0441\u043e\u0431\u043b\u044e\u0434\u0430\u0442\u044c \u0435\u0435 \u0445\u043e\u0442\u044f \u0431\u044b \u043a 2px. \u0435\u0441\u043b\u0438 \u0431\u0430\u0437\u043e\u0432\u0430\u044f 4px.<\/p>\n<p>\u0412 \u0438\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0430\u043c \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0434\u0435\u043b\u0438\u0442\u044c \u043f\u0438\u043a\u0441\u0435\u043b\u044c \u043f\u0440\u0438 \u0446\u0435\u043d\u0442\u0440\u043e\u0432\u043a\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443 \u043a\u043d\u043e\u043f\u043a\u0438 \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430 11px, \u0430 \u0432\u044b\u0441\u043e\u0442\u0430 \u043a\u043d\u043e\u043f\u043a\u0438 40px.<\/p>\n<p>\u0414\u0435\u043b\u0430\u0435\u043c \u043d\u0430\u0448 \u0448\u0440\u0438\u0444\u0442 \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443 \u043a\u043d\u043e\u043f\u043a\u0438.<\/p>\n<p>40 &#8212; 11 = 29\/2 = 14.5 (\u043e\u0442\u0441\u0442\u0443\u043f \u0441\u0432\u0435\u0440\u0445\u0443 \u0438 \u043d\u0438\u0437\u0443)<\/p>\n<p>\u0411\u0440\u0430\u0443\u0437\u0435\u0440 \u0441\u043c\u043e\u0436\u0435\u0442 \u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c\u0441\u044f\u00a0 \u0441 \u0434\u0435\u043b\u0435\u043d\u0438\u0435\u043c \u043d\u0430 \u043f\u0438\u043a\u0441\u0435\u043b\u0438 &#8212; \u044d\u0442\u043e \u043d\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430. \u0417\u0434\u0435\u0441\u044c \u0441\u0442\u043e\u0438\u0442 \u0432\u043e\u043f\u0440\u043e\u0441 \u044d\u0441\u0442\u0435\u0442\u0438\u0447\u043d\u043e\u0441\u0442\u0438 \u0438 \u043b\u0435\u0433\u043a\u043e\u0441\u0442\u0438 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430 \u0432\u0435\u0440\u0441\u0442\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0410 \u043f\u0440\u0438 \u0440\u0430\u0437\u0431\u0438\u0435\u043d\u0438\u0438 \u043c\u0430\u043a\u0435\u0442\u0430 \u043f\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u044c\u043d\u043e\u0439 \u0441\u0435\u0442\u043a\u0435 \u0432 figma \u043d\u0435 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0432\u044b\u0445\u043e\u0434\u0438\u0442\u044c \u0437\u0430 \u0435\u0433\u043e \u0433\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<p>\u041d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0435\u043c \u0432\u044b\u043d\u043e\u0441\u0438\u0442\u044c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043f\u043e \u043e\u0442\u0441\u0442\u0443\u043f\u0430\u043c \u0432 ui kit, \u0442\u0443\u0442 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0432\u0441\u0435 \u0434\u043e\u0433\u043e\u0432\u043e\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u043f\u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0443.<\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043b\u0438\u0441\u0442, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043a\u043b\u0430\u0441\u0441\u043e\u0432:<\/p>\n<pre><code class=\"css\">$sizes: (   0: 0,   4: 4px,   8: 8px,   12: 12px,   16: 16px,   20: 20px,   24: 24px,   28: 28px,   32: 32px,   36: 36px,   40: 40px,   44: 44px,   48: 48px, );<\/code><\/pre>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0432 \u043c\u0438\u043a\u0441\u0438\u043d\u0435 \u0438 \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u043a\u043b\u0430\u0441\u0441\u044b:<\/p>\n<pre><code class=\"css\">@mixin sizes-classes($screen-name: '') {   @each $index, $size in $sizes {     .m#{$screen-name}-#{$index} {       margin: $size !important;     }     .mx#{$screen-name}-#{$index} {       margin-right: $size !important;       margin-left: $size !important;     }     .my#{$screen-name}-#{$index} {       margin-top: $size !important;       margin-bottom: $size !important;     }     .ml#{$screen-name}-#{$index} {       margin-left: $size !important;     }     .mr#{$screen-name}-#{$index} {       margin-right: $size !important;     }     .mt#{$screen-name}-#{$index} {       margin-top: $size !important;     }     .mb#{$screen-name}-#{$index} {       margin-bottom: $size !important;     }      .p#{$screen-name}-#{$index} {       padding: $size !important;     }     .px#{$screen-name}-#{$index} {       padding-right: $size !important;       padding-left: $size !important;     }     .py#{$screen-name}-#{$index} {       padding-top: $size !important;       padding-bottom: $size !important;     }     .pl#{$screen-name}-#{$index} {       padding-left: $size !important;     }     .pr#{$screen-name}-#{$index} {       padding-right: $size !important;     }     .pt#{$screen-name}-#{$index} {       padding-top: $size !important;     }     .pb#{$screen-name}-#{$index} {       padding-bottom: $size !important;     }   } } <\/code><\/pre>\n<pre><code class=\"css\">@include sizes-classes; @include project-classes;  @include media(lg) {   @include sizes-classes('-lg');   @include project-classes('-lg'); }  @include media(md) {   @include sizes-classes('-md');   @include project-classes('-md'); }  @include media(sm) {   @include sizes-classes('-sm');   @include project-classes('-sm'); }<\/code><\/pre>\n<p>\u041d\u0435 \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u044b \u0434\u043b\u044f \u043e\u0442\u0440\u0438\u0446\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432 \u0438 \u0434\u0435\u043b\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 20 \u0432\u0430\u0440\u0438\u0430\u0446\u0438\u0439, \u0442\u0430\u043a \u043a\u0430\u043a \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043c\u0430\u0441\u0441\u0443 \u0440\u0435\u0434\u043a\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0438 \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u043c css \u0444\u0430\u0439\u043b \u0434\u043b\u044f \u043f\u0435\u0440\u0432\u0438\u0447\u043d\u043e\u0439 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438. \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 1 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f 14 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 (\u0438\u0437 \u043c\u0438\u043a\u0441\u0438\u043d\u0430 padding \u0438 margin) * 4 (\u0432\u0441\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f) &#8212; \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f 56 \u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u0442\u043e\u0438\u0442 \u0441\u043e\u043a\u0440\u0430\u0449\u0430\u0442\u044c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0432 \u043b\u0438\u0441\u0442\u0435.<\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445:<\/p>\n<pre><code class=\"css\">$size-0: map-get($sizes, 0); $size-4: map-get($sizes, 4); $size-8: map-get($sizes, 8); $size-12: map-get($sizes, 12); $size-16: map-get($sizes, 16); $size-20: map-get($sizes, 20); $size-24: map-get($sizes, 24); $size-28: map-get($sizes, 28); $size-32: map-get($sizes, 32); $size-36: map-get($sizes, 36); $size-40: map-get($sizes, 40); $size-44: map-get($sizes, 44); $size-48: map-get($sizes, 48); $size-52: 52px; $size-60: 60px; $size-64: 64px; $size-80: 80px; $size-84: 84px; $size-88: 88px; $size-100: 100px;<\/code><\/pre>\n<p>\u0414\u043e \u043f\u0435\u0440\u0432\u043e\u0433\u043e size-52 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043e\u0442 $sizes. \u0414\u043b\u044f \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b, \u043a\u0440\u0430\u0442\u043d\u044b\u0435 \u043d\u0430\u0448\u0438\u043c \u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u0438\u044f\u043c.<\/p>\n<p>\u0412\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0437\u0430\u043f\u0440\u0435\u0442\u0438\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b, \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043f\u043e \u0442\u0438\u043f\u0443 $size-4 $size-32 \u0438 \u0442\u0434, \u0430 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043e\u043f\u0443\u0441\u043a\u0430\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 100 50 25 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u043e\u0432, \u0415\u0441\u043b\u0438 \u0432\u0441\u0435 \u0436\u0435 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043e\u0442\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u043e\u0442 \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0430 &#8212; \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0439\u0442\u0435 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043d\u0435\u0434\u043e\u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u0438 \u043f\u043e\u044f\u0441\u043d\u0438\u0442, \u0447\u0442\u043e \u044d\u0442\u043e &#8212; \u0447\u0430\u0441\u0442\u044c \u0434\u0438\u0437\u0430\u0439\u043d\u0430.<\/p>\n<pre><code class=\"css\">  &amp;__subcategories {     max-width: 600px; \/\/ \u0420\u0430\u0437\u043c\u0435\u0440 \u0432\u0442\u043e\u0440\u043e\u0439 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 \u0438\u0437 \u0434\u0438\u0437\u0430\u0439\u043d\u0430   }<\/code><\/pre>\n<p>\u0434\u043b\u044f `margin` \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c m`{-media}?`-`{size}` (x,y) &#8212; \u043e\u0441\u0438<\/p>\n<p>.m-1 .ml-2 mt-md-1 .mx-4 .my-2<\/p>\n<p>\u0434\u043b\u044f `padding` \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c p`{-media}?`-`{size}` (x,y) &#8212; \u043e\u0441\u0438<\/p>\n<p>.p-1 .pl-2 pt-md-1 .px-4 .py-2<\/p>\n<p>\u0434\u043b\u044f \u0438\u043a\u043e\u043d\u043e\u043a \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u044b &#8212; `icon-{size}`<\/p>\n<p>\u0427\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b \u0442\u043e\u043b\u044c\u043a\u043e 3 \u043a\u043b\u0430\u0441\u0441\u0430:<\/p>\n<p>icon-16 icon-24 icon-32<\/p>\n<pre><code class=\"css\">svg {   width: 100%;   height: 100%;   fill: currentColor; }  .icon-16 {   width: $size-16;   height: $size-16; }  .icon-24 {   width: $size-24;   height: $size-24; }  .icon-32 {   width: $size-32;   height: $size-32; }<\/code><\/pre>\n<hr\/>\n<h2>\u0421\u0442\u0438\u043b\u0438 \u0448\u0440\u0438\u0444\u0442\u043e\u0432<\/h2>\n<p>\u041a\u0430\u043a<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-330364","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/330364","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=330364"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/330364\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=330364"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=330364"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=330364"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}