{"id":156747,"date":"2012-10-30T23:47:03","date_gmt":"2012-10-30T19:47:03","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=156747"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=156747","title":{"rendered":"<span class=\"post_title\">24 CSS-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0434\u043b\u044f \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0432\u0435\u0431-\u0434\u0438\u0437\u0430\u0439\u043d\u0430<\/span>"},"content":{"rendered":"<div class=\"content html_format\">   \t\u0417\u0430\u043c\u0435\u0442\u0438\u043b, \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u043b\u044e\u0431\u043e\u0435 \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0435 Twitter Bootstrap, \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u043e\u0434\u0438\u043d \u0447\u0435\u043b\u043e\u0432\u0435\u043a \u043e\u0442\u043c\u0435\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u00ab\u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u043d\u043e\u0433\u043e \u0435\u0433\u043e \u0441\u0442\u0430\u043b\u043e\u00bb. \u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0432\u0441\u0435 \u0443\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442, \u043d\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043e\u043d \u0443\u0436\u0435 \u043f\u0440\u0438\u0435\u043b\u0441\u044f \u0438 \u043e\u043d\u0438 \u0445\u043e\u0442\u044f\u0442 \u0447\u0435\u0433\u043e-\u0442\u043e \u043d\u043e\u0432\u043e\u0433\u043e. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0440\u0435\u0448\u0438\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u044e \u0441\u043e \u0441\u0431\u043e\u0440\u043d\u0438\u043a\u043e\u043c \u0438\u0437 24 css-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432, \u0434\u0443\u043c\u0430\u044e \u043a\u0430\u0436\u0434\u044b\u0439 \u0441\u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0439\u0442\u0438 \u0447\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0434\u043b\u044f \u0441\u0435\u0431\u044f. \u0417\u0430\u043e\u0434\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442 \u0440\u0430\u0437\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u0435\u0435.<\/p>\n<p>  <a name=\"habracut\"><\/a>  <\/p>\n<h4><a href=\"http:\/\/twitter.github.com\/bootstrap\/\">Twitter Bootstrap<\/a><\/h4>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/048\/d9f\/036\/048d9f0365ec5fa83835e61416a406c5.jpg\"\/><\/p>\n<p>  \u0418\u0437\u0432\u0438\u043d\u044f\u044e\u0441\u044c \u043f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c\u0438, \u043a\u0442\u043e \u0435\u0433\u043e \u043d\u0435\u043d\u0430\u0432\u0438\u0434\u0438\u0442, \u043d\u043e \u0432\u0441\u0435-\u0442\u0430\u043a\u0438 \u0432 \u044d\u0442\u043e\u043c \u0441\u043f\u0438\u0441\u043a\u0435 \u043d\u0435\u043b\u044c\u0437\u044f \u0435\u0433\u043e \u043d\u0435 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044c.<br \/>  \u041e\u0447\u0435\u043d\u044c \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0439 \u0438 \u0448\u0438\u0440\u043e\u043a\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u043f\u0440\u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u0443\u0436\u0435 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0441\u0442\u0430\u0442\u0435\u0439, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u043e\u0441\u0442\u043e \u043a\u0440\u0430\u0442\u043a\u043e \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u044e \u0435\u0433\u043e \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438:  <\/p>\n<ul>\n<li>\u042f\u0437\u044b\u043a \u2014 LESS<\/li>\n<li>12-\u0442\u0438 \u043a\u043e\u043b\u043e\u043d\u043e\u0447\u043d\u0430\u044f \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0430\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432, \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u043e\u0432 \u0438 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u043e\u0432, \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043a\u043b\u0430\u0441\u0441\u043e\u0432: .span3, .span8<\/li>\n<li>\u041c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043a\u043d\u043e\u043f\u043e\u043a, \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0435 \u043c\u0435\u043d\u044e, \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0441\u0442\u0438\u043b\u044c \u043f\u043e\u043b\u0435\u0439 \u0432\u0432\u043e\u0434\u0430, \u0441\u043f\u0438\u0441\u043a\u043e\u0432, \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432, \u043c\u0435\u0442\u043e\u043a, \u0438\u043a\u043e\u043d\u043e\u043a, \u0430\u043b\u0435\u0440\u0442\u044b, \u0442\u0430\u0431\u044b, \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441-\u0431\u0430\u0440\u044b, \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0438\u0435 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0438, \u00ab\u0430\u043a\u043a\u043e\u0440\u0434\u0435\u043e\u043d\u00bb, \u00ab\u043a\u0430\u0440\u0443\u0441\u0435\u043b\u044c\u00bb, \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435.<\/li>\n<li>\u0420\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 Javascript-\u043f\u043b\u0430\u0433\u0438\u043d\u044b<\/li>\n<li>\u041f\u043e\u043b\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f<\/li>\n<li>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 Scaffolding, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 Bootstrap-\u0441\u0442\u0438\u043b\u044f \u043a \u0443\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u043c HTML<\/li>\n<li>\u0411\u043e\u043b\u044c\u0448\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u0438\u0448\u0435\u0442 \u043d\u043e\u0432\u044b\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u044b, \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0432\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0438\u0435\u0441\u044f \u0432 \u0434\u0438\u0437\u0430\u0439\u043d<\/li>\n<\/ul>\n<p>  \u041d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e Bootstrap \u2014 \u044d\u0442\u043e \u0432\u0441\u0435-\u0432-\u043e\u0434\u043d\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0434\u043e\u0432\u043b\u0435\u0442\u0432\u043e\u0440\u0438\u0442 \u043b\u044e\u0431\u044b\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430, \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0447\u0435\u043c\u0443 \u043e\u043d \u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u0438\u043c \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u043c.<\/p>\n<h4><a href=\"http:\/\/www.responsivegridsystem.com\/\">Responsive Grid System<\/a><\/h4>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/b7f\/6f9\/d12\/b7f6f9d12cc52f4fc927449217394e12.jpg\"\/><\/p>\n<p>  \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0443\u0442\u0432\u0435\u0440\u0436\u0434\u0430\u0435\u0442, \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u0438 \u043d\u0435 \u043d\u0430\u0431\u043e\u0440 \u0437\u0430\u0433\u043e\u0442\u043e\u0432\u043e\u043a, \u0438 \u0433\u043e\u0432\u043e\u0440\u0438\u0442, \u0447\u0442\u043e \u044d\u0442\u043e \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u0438 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0439 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442.<br \/>  \u041d\u0430 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u0430\u0439\u0442\u0435 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0434\u043e\u0441\u0442\u043e\u0438\u043d\u0441\u0442\u0432\u0430:  <\/p>\n<ul>\n<li>\u041c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u043b\u043e\u043d\u043e\u043a, \u043e\u0442 2 \u0434\u043e 12. \u041f\u0440\u0438\u043c\u0435\u0440 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u043a\u043e\u043b\u043e\u043d\u043e\u043a: .1of4, .2of7, \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435<\/li>\n<li>\u041b\u0435\u0433\u043a\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043a \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c\u0443 \u0441\u0430\u0439\u0442\u0443<\/li>\n<li>\u00ab\u0420\u0435\u0437\u0438\u043d\u043e\u0432\u044b\u0435\u00bb \u043a\u043e\u043b\u043e\u043d\u043a\u0438, \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043a \u043b\u044e\u0431\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u0435<\/li>\n<li>\u041d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u044b .last \u0438 .end<\/li>\n<li>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442, \u0437\u0430\u0442\u0435\u043c \u043f\u043e\u0434\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430<\/li>\n<li>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0431\u0440\u0435\u0439\u043a\u043f\u043e\u0438\u043d\u0442\u043e\u0432 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043d\u0430 480 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445)<\/li>\n<li>\u041c\u043e\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u043d\u0438\u0437\u043a\u043e\u043c \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0438 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u043d\u0435 \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u043b\u0438\u0441\u044c \u0432 \u0441\u0442\u043e\u043f\u043a\u0443 1 \u043a\u043e\u043b\u043e\u043d\u043a\u0430 \u043d\u0430 \u0441\u0442\u0440\u043e\u043a\u0443, \u0430 \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, 12 \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u043d\u0430 \u0442\u0440\u0438 \u0441\u0442\u0440\u043e\u043a\u0438 \u043f\u043e 4 \u043a\u043e\u043b\u043e\u043d\u043a\u0438<\/li>\n<li>\u041d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0433\u043b\u0443\u0431\u043e\u043a\u0438\u0445 \u0437\u043d\u0430\u043d\u0438\u0439 \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0438 (\u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u043c\u0435\u0442\u044c \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0434\u043e 12)<\/li>\n<\/ul>\n<p>  \u0420\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u043b\u0438\u0448\u043d\u0435\u0433\u043e.<\/p>\n<h4><a href=\"http:\/\/cssgrid.net\/\">1140 CSS Grid<\/a><\/h4>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/c0b\/572\/1b6\/c0b5721b66c84cb7d5ede93a2f9528f3.jpg\"\/><\/p>\n<p>  \u0420\u0430\u0437\u043c\u0435\u0442\u043a\u0430 1140px, \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u043d\u0430 \u043f\u043e\u0434 1280px-\u043c\u043e\u043d\u0438\u0442\u043e\u0440\u044b. \u041d\u0430 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0430\u0445 \u0441 \u043c\u0435\u043d\u044c\u0448\u0438\u043c \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u043e\u043d\u0430 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0440\u0435\u0437\u0438\u043d\u043e\u0432\u043e\u0439 \u0438 \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043f\u043e\u0434 \u0448\u0438\u0440\u0438\u043d\u0443 \u043e\u043a\u043d\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u041f\u043e\u0441\u043b\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u043e\u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u0432 \u0441\u0442\u043e\u043f\u043a\u0443, \u0442\u0430\u043a \u0447\u0442\u043e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0441\u0432\u043e\u0439 \u0441\u043c\u044b\u0441\u043b.  <\/p>\n<ul>\n<li>12-\u0442\u0438 \u043a\u043e\u043b\u043e\u043d\u043e\u0447\u043d\u0430\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430, \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u043a\u043e\u043b\u043e\u043d\u043e\u043a: .threecol, .fourcol, \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435<\/li>\n<li>\u041c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u0432\u0435\u0440\u0441\u0438\u0438, \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0442 \u0434\u043b\u044f \u043b\u044e\u0431\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0449\u0438\u0445 CSS \u0438\u043b\u0438 \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u044b, \u0441 \u0438\u0445 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c x2 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0434\u043b\u044f Retina-\u0434\u0438\u0441\u043f\u043b\u0435\u0435\u0432<\/li>\n<li>\u0414\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0448\u0430\u0431\u043b\u043e\u043d \u0434\u043b\u044f Photoshop<\/li>\n<li>\u0420\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 \u043d\u043e\u0432\u044b\u0445 \u0438 \u0441\u0442\u0430\u0440\u044b\u0445 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0430\u0445, \u043d\u043e\u0443\u0442\u0431\u0443\u043a\u0430\u0445, \u043d\u0435\u0442\u0431\u0443\u043a\u0430\u0445, \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u0430\u0445, \u0441\u043c\u0430\u0440\u0442\u0444\u043e\u043d\u0430\u0445, \u0438 \u0434\u0430\u0436\u0435 \u0441\u0442\u0430\u0440\u044b\u0445 Nokia<\/li>\n<li>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 Chrome, Safari, Firefox, IE 7, IE 8, \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 IE 6<\/li>\n<li>\u0414\u043e 40px \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043b\u043e\u043d\u043a\u0430\u043c\u0438<\/li>\n<li>\u041a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0441\u0436\u0438\u043c\u0430\u044e\u0442\u0441\u044f \u0434\u043e \u0448\u0438\u0440\u0438\u043d\u044b \u043a\u043e\u043b\u043e\u043d\u043a\u0438, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f, \u043d\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u0435 \u0448\u0438\u0440\u0438\u043d\u044b \u0438 \u0432\u044b\u0441\u043e\u0442\u044b \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438<\/li>\n<\/ul>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0435 \u0441\u0430\u0439\u0442\u044b \u0441 \u0448\u0438\u0440\u0438\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b 1140 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u044d\u0442\u043e \u0442\u043e, \u0447\u0442\u043e \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e.<\/p>\n<h4><a href=\"http:\/\/www.getskeleton.com\/\">Skeleton<\/a><\/h4>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/e1f\/5f3\/914\/e1f5f3914157566eb09c492302b44ac9.jpg\"\/><\/p>\n<p>  \u0422\u0430\u043a\u0436\u0435 \u0443\u0436\u0435 \u043d\u0435 \u0440\u0430\u0437 \u0437\u0434\u0435\u0441\u044c \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b\u0441\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u0440\u0430\u0437\u0443 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435:  <\/p>\n<ul>\n<li>12-\u0442\u0438 \u043a\u043e\u043b\u043e\u043d\u043e\u0447\u043d\u0430\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430, 960px \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c, \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u043a\u043e\u043b\u043e\u043d\u043e\u043a: .three columns alpha, .two columns omega<\/li>\n<li>\u0412\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0430 \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0430, \u043a\u043d\u043e\u043f\u043a\u0438 \u0438 \u0444\u043e\u0440\u043c\u044b<\/li>\n<li>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432<\/li>\n<li>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 Chrome, Safari, Firefox, IE 7 \u0438 \u0432\u044b\u0448\u0435, \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432<\/li>\n<li>\u0418\u043c\u0435\u044e\u0442\u0441\u044f \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0434\u043b\u044f WordPress, Drupal, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0433\u0435\u043c \u0434\u043b\u044f Rails<\/li>\n<\/ul>\n<h4><a href=\"http:\/\/semantic.gs\/\">The Semantic Grid<\/a><\/h4>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/8ea\/258\/b23\/8ea258b2379c3ca5a9ee5882662bbf98.jpg\"\/><\/p>\n<p>  \u041d\u0435 \u043d\u0430\u0448\u0435\u043b \u043d\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u044f \u043d\u0430 \u0445\u0430\u0431\u0440\u0435, \u0445\u043e\u0442\u044f \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0443 \u043c\u0435\u043d\u044f \u043f\u043e\u043b\u043e\u043c\u0430\u043b\u0441\u044f \u043f\u043e\u0438\u0441\u043a\u2026  <\/p>\n<ul>\n<li>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0448\u0438\u0440\u0438\u043d\u0443 \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u0438 \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432 \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438, \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u043b\u043e\u043d\u043e\u043a, \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u043c\u0438 \u0438 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0430\u043c\u0438<\/li>\n<li>\u041d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0438\u043a\u0430\u043a\u0438\u0445 .grid_x \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435<\/li>\n<li>\u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0439<\/li>\n<li>\u042f\u0437\u044b\u043a\u0438 LESS, SCSS, <a href=\"http:\/\/learnboost.github.com\/stylus\/\">Stylus<\/a><\/li>\n<li>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0442\u0435\u0433\u0438 article, header, aside<\/li>\n<li>\u0418\u043c\u0435\u0435\u0442\u0441\u044f \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0438 \u00ab\u0440\u0435\u0437\u0438\u043d\u043e\u0432\u0430\u044f\u00bb \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043e\u043a\u043d\u043e \u043d\u0430 \u0432\u0441\u044e \u0448\u0438\u0440\u0438\u043d\u0443, \u043c\u043d\u043e\u0433\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0435 \u043a\u043e\u043b\u043e\u043d\u043a\u0438<\/li>\n<\/ul>\n<h4><a href=\"http:\/\/framelessgrid.com\/\">Frameless Grid<\/a><\/h4>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/5f5\/fdb\/d78\/5f5fdbd781fab609511e68666ac27a44.jpg\"\/><\/p>\n<p>  \u0418\u0449\u0435\u0442\u0435 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d, \u043d\u043e \u043d\u0435\u043d\u0430\u0432\u0438\u0434\u0438\u0442\u0435 \u0440\u0435\u0437\u0438\u043d\u043e\u0432\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438? \u0414\u0443\u043c\u0430\u044e, \u044d\u0442\u043e \u0432\u0430\u043c \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442. \u0421\u0443\u0442\u044c \u0442\u0430\u043a\u043e\u0432\u0430: \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0435 \u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0445\u0441\u044f \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u0441 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u043e\u0439, \u0446\u0435\u043d\u0442\u0440\u0443\u0435\u0442\u0435 \u0438\u0445 \u043f\u043e \u043e\u043a\u043d\u0443, \u0438 \u0432\u0441\u0435! \u0410\u0434\u0430\u043f\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u0435 \u043f\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u043c, \u0430 \u043f\u043e \u043a\u043e\u043b\u043e\u043d\u043a\u0430\u043c. \u0422\u0435 \u043a\u043e\u043b\u043e\u043d\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b\u0445\u043e\u0434\u044f\u0442 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b \u0432\u0438\u0434\u0430, \u0441\u043a\u0440\u044b\u0432\u0430\u044e\u0442\u0441\u044f, \u0438 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u043f\u0435\u0440\u0435\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f. \u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0430\u0439\u0442 \u044d\u0442\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043f\u043e\u0434 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f 320, 480, 600, 900 \u0438 1900 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439. <br \/>  \u0418\u043c\u0435\u044e\u0442\u0441\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u043d\u0430 LESS, SCSS, \u0431\u0430\u0437\u0430 HTML, \u0448\u0430\u0431\u043b\u043e\u043d \u0434\u043b\u044f Photoshop.<br \/>  \u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430\u044f \u0438\u0434\u0435\u044f, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0445\u043e\u0442\u044f \u0431\u044b \u0437\u0430\u0439\u0442\u0438 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043a\u0430\u043a \u043e\u043d\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442.<\/p>\n<h4><a href=\"http:\/\/www.gumbyframework.com\/\">Gumby Framework<\/a><\/h4>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/6a5\/ed7\/199\/6a5ed719954b8fe4050c1326d1511b16.jpg\"\/><\/p>\n<p>  \u00ab\u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0432\u044b \u0443\u0436\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b\u00bb. \u041f\u043e \u043d\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044e \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442 Bootstrap.  <\/p>\n<ul>\n<li>960-\u043f\u0438\u043a\u0441\u0435\u043b\u044c\u043d\u0430\u044f \u00ab\u0433\u0438\u0431\u0440\u0438\u0434\u043d\u0430\u044f\u00bb \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430, 12 \u0438\u043b\u0438 16 \u043a\u043e\u043b\u043e\u043d\u043e\u043a, \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043a\u043b\u0430\u0441\u0441\u043e\u0432: .seven columns, .five columns<\/li>\n<li>\u0412\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b: \u0444\u043e\u0440\u043c\u044b, \u043a\u043d\u043e\u043f\u043a\u0438, \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0435 \u043c\u0435\u043d\u044e \u0438 \u0442\u0430\u0431\u044b<\/li>\n<li>Javascript toggles \u0438 drawers<\/li>\n<li>\u0414\u043e\u0441\u0442\u0443\u043f\u043d\u044b Photoshop-\u0448\u0430\u0431\u043b\u043e\u043d\u044b<\/li>\n<\/ul>\n<h4><a href=\"http:\/\/thatcoolguy.github.com\/gridless-boilerplate\/\">Gridless<\/a><\/h4>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/5be\/891\/75c\/5be89175c84e80826f960b74dfaa7a2d.jpg\"\/><\/p>\n<p>  HTML5 \u0438 CSS3 \u0448\u0430\u0431\u043b\u043e\u043d \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0445, \u043a\u0440\u043e\u0441\u0441\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0445 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u043e\u0442\u043b\u0438\u0447\u043d\u043e\u0439 \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0439.  <\/p>\n<ul>\n<li>DBY-\u043f\u043e\u0434\u0445\u043e\u0434 \u2014 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0443\u0431\u0438\u0440\u0430\u0435\u0442 \u0432\u0441\u0435 \u0441\u043a\u0443\u0447\u043d\u044b\u0435 \u0434\u0435\u0442\u0430\u043b\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u043e\u0432 \u0438 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439<\/li>\n<li>\u041f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u043e \u0432\u0441\u0435\u043c, \u0447\u0442\u043e \u0432\u0430\u043c \u0443\u0436\u0435 \u043d\u0430\u0434\u043e\u0435\u043b\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0412\u043a\u043b\u044e\u0447\u0430\u0435\u0442 CSS, \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0443, \u0445\u043e\u0440\u043e\u0448\u043e \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043f\u0430\u043f\u043e\u043a, \u0444\u0438\u043a\u0441\u044b \u0434\u043b\u044f IE \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0448\u0442\u0443\u043a\u0438<\/li>\n<li>Mobile-first \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0430\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430, \u043f\u043e\u0434\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044e\u0449\u0430\u044f\u0441\u044f \u043f\u043e\u0434 \u0448\u0438\u0440\u0438\u043d\u0443 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430<\/li>\n<li>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 IE 6\/7\/8 \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f Respond.js<\/li>\n<li>\u041e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0438 \u043f\u0440\u044f\u043c\u043e\u043b\u0438\u043d\u0435\u0439\u043d\u044b\u0439, \u043d\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u043f\u0440\u0435\u0434\u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0445 \u0441\u0438\u0441\u0442\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0438\u043b\u0438 \u043d\u0435-\u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432. \u042f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u043e\u0439, \u0435\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0438 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0443\u0434\u043e\u0432\u043b\u0435\u0442\u0432\u043e\u0440\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0438\u0445 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0439<\/li>\n<\/ul>\n<h4><a href=\"http:\/\/susy.oddbird.net\/\">\u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0434\u043b\u044f Compass (SUSY)<\/a><\/h4>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/559\/834\/fe1\/559834fe16a6f221339dd7bc5c6b2908.jpg\"\/><\/p>\n<p>  \u041f\u043e\u043b\u043d\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 Ruby on Rails, \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0433\u0435\u043c\u0430 \u00abcompass\u00bb. \u041e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438, \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u0430\u044f \u0448\u0438\u0440\u0438\u043d\u0430 \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u0438 \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432, \u043b\u044e\u0431\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u043b\u043e\u043d\u043e\u043a. \u0422\u0430\u043a\u0436\u0435 \u0435\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u043d\u0430 1140px \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443.<\/p>\n<h4><a href=\"http:\/\/goldilocksapproach.com\/\">The Goldilocks Approach<\/a><\/h4>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/abe\/f7e\/afb\/abef7eafbfa23c3fd4a76904e5654591.jpg\"\/><\/p>\n<p>  \u00ab\u0425\u043e\u0440\u043e\u0448\u0430\u044f \u043d\u0430\u0447\u0430\u043b\u043e \u0434\u043b\u044f \u0434\u0438\u0437\u0430\u0439\u043d\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u0443\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0438\u0437 \u0443\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f\u00bb.   <\/p>\n<ul>\n<li>\u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u044e Em-\u043e\u0432, max-width, \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0434\u0438\u0437\u0430\u0439\u043d \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u043c \u043e\u0442 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f<\/li>\n<li>\u0421\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0434\u0432\u0430 \u0445\u043e\u0440\u043e\u0448\u043e \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 CSS-\u0444\u0430\u0439\u043b\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442 \u0442\u0440\u0438 \u0440\u0430\u0437\u043d\u043e\u0432\u0438\u0434\u043d\u043e\u0441\u0442\u0438 \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432: \u043c\u0443\u043b\u044c\u0442\u0438\u043a\u043e\u043b\u043e\u043d\u043e\u0447\u043d\u0430\u044f, \u0441 \u0443\u0437\u043a\u0438\u043c\u0438 \u043a\u043e\u043b\u043e\u043d\u043a\u0430\u043c\u0438, \u0438 \u043e\u0434\u043d\u043e\u043a\u043e\u043b\u043e\u043d\u043e\u0447\u043d\u044b\u0435<\/li>\n<li>\u0412\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0442\u0430\u043a\u0436\u0435 \u0445\u043e\u0440\u043e\u0448\u0443\u044e \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0443 \u00ab\u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438\u00bb<\/li>\n<li>\u042f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u043f\u044b\u0442\u043a\u043e\u0439 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0442\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u0430 \u043e\u0442 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430<\/li>\n<\/ul>\n<p>  \u041d\u0430 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u0430\u0439\u0442\u0435 \u0435\u0441\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0432\u0441\u0435\u0445 \u0442\u0440\u0435\u0445 \u0442\u0438\u043f\u043e\u0432 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432.<\/p>\n<h4><a href=\"http:\/\/builtbyboon.com\/blog\/proportional-grids\">Proportional Grids<\/a><\/h4>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/115\/c18\/b98\/115c18b98178782871b2ec745ca001cc.jpg\"\/><\/p>\n<p>  \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u044d\u0442\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u043e\u0440\u043a\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b css-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e box-sizing, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0435\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043b\u043e\u043d\u043a\u0430\u043c\u0438 (em\/rem) \u0438 \u0440\u0435\u0437\u0438\u043d\u043e\u0432\u044b\u0435 \u043a\u043e\u043b\u043e\u043d\u043a\u0438. \u0420\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043b\u043e\u043d\u043a\u0430\u043c\u0438 \u0431\u0443\u0434\u0435\u0442 \u043e\u0441\u0442\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c \u043d\u0430 \u0432\u0441\u0435\u0445 \u0431\u0440\u0435\u0439\u043a\u043f\u043e\u0438\u043d\u0442\u0430\u0445, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u043e\u0435 \u0441 \u0431\u0430\u0437\u043e\u0432\u044b\u043c font-size.<br \/>  \u041a\u043e\u043b\u043e\u043d\u043a\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u044f\u043c\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u043e\u0434\u043d\u0430 \u0432\u0442\u043e\u0440\u0430\u044f, \u043e\u0434\u043d\u0430 \u0442\u0440\u0435\u0442\u044c\u044f, \u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0443\u0433\u043e\u0434\u043d\u043e \u0440\u0430\u0437, \u0434\u0430\u0436\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u0440\u0443\u0433\u043e\u0439 \u043a\u043e\u043b\u043e\u043d\u043a\u0438. \u0422\u0430\u043a\u0436\u0435 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 IE8, \u0438 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0434\u0440\u0443\u0433\u0430\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u0434\u043b\u044f IE7 \u0438 \u043d\u0438\u0436\u0435. \u041d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 SASS.<\/p>\n<h4><a href=\"http:\/\/foundation.zurb.com\/\">Foundation 3<\/a><\/h4>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/7ca\/704\/864\/7ca70486456669e243f8cc5f8585642e.jpg\"\/><\/p>\n<p>  \u0422\u0430\u043a\u0436\u0435 \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b\u0441\u044f \u043d\u0430 \u0445\u0430\u0431\u0440\u0435, \u0437\u0430\u044f\u0432\u043b\u044f\u0435\u0442 \u043e \u0441\u0435\u0431\u0435 \u043a\u0430\u043a \u043e \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u043e\u043c \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0435 \u0434\u043b\u044f \u0444\u0440\u043e\u043d\u0442-\u044d\u043d\u0434\u0430.   <\/p>\n<ul>\n<li>\u0413\u0438\u0431\u043a\u0430\u044f \u0432\u0435\u0440\u0441\u0442\u043a\u0430, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0430\u044f \u0431\u044b\u0441\u0442\u0440\u043e \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u0438 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e\u0449\u0430\u044f \u043c\u043d\u043e\u0433\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0435 \u043a\u043e\u043b\u043e\u043d\u043a\u0438, \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u043f\u043e\u0434 \u043b\u044e\u0431\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0440, \u043e\u0442 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u043e\u0432 \u0434\u043e \u044d\u043a\u0440\u0430\u043d\u043e\u0432 \u0442\u0435\u043b\u0435\u0432\u0438\u0437\u043e\u0440\u043e\u0432<\/li>\n<li>\u0411\u044b\u0441\u0442\u0440\u043e\u0435 \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0441\u0442\u0438\u043b\u0435\u0439 \u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0445 \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0445 \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043e\u0442\u043f\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0438 \u0441\u0440\u0430\u0437\u0443 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u044b \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u043d<\/li>\n<li>\u0412\u043a\u043b\u044e\u0447\u0435\u043d\u044b \u0444\u043e\u0440\u043c\u044b, \u043a\u043d\u043e\u043f\u043a\u0438, \u0442\u0430\u0431\u044b, \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435<\/li>\n<li>\u041d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u0435 \u044d\u043a\u0440\u0430\u043d\u0430 \u043f\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/li>\n<li>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d \u043d\u0430 SASS<\/li>\n<\/ul>\n<h4><a href=\"http:\/\/www.amazium.co.uk\/\">Amazium<\/a><\/h4>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/f72\/215\/4e7\/f722154e7345516d2203c25cea098663.jpg\"\/><\/p>\n<ul>\n<li>1200px-\u0432\u0435\u0440\u0441\u0442\u043a\u0430<\/li>\n<li>\u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0439 12-\u0442\u0438 \u043a\u043e\u043b\u043e\u043d\u043e\u0447\u043d\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d. \u041f\u0440\u0438\u043c\u0435\u0440 \u043a\u043b\u0430\u0441\u0441\u0430 \u2014 .grid_12, .grid_8<\/li>\n<li>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0430 \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0430<\/li>\n<li>\u0420\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0432\u0438\u0434\u044b \u043d\u0443\u043c\u0435\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0438 \u043d\u0435\u043d\u0443\u043c\u0435\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0441\u043f\u0438\u0441\u043a\u043e\u0432<\/li>\n<li>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u044f\u0442\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f\u0445<\/li>\n<li>\u041a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u0444\u043e\u0440\u043c\u044b \u0438 \u0442\u0430\u0431\u043b\u0438\u0446\u044b<\/li>\n<li>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432<\/li>\n<li>\u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0438 \u0432\u0438\u0434\u0435\u043e<\/li>\n<\/ul>\n<h4><a href=\"http:\/\/goldengridsystem.com\/\">Golden Grid System<\/a><\/h4>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/01f\/f27\/8bc\/01ff278bc196dc0db413f0bb1e0d6004.jpg\"\/><\/p>\n<p>  GGS \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0435\u0442 \u044d\u043a\u0440\u0430\u043d \u043d\u0430 18 \u0447\u0435\u0442\u043d\u044b\u0445 \u043a\u043e\u043b\u043e\u043d\u043e\u043a. \u041a\u0440\u0430\u0439\u043d\u0438\u0435 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0433\u0440\u0430\u043d\u044f\u043c\u0438, \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f 16 \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u0434\u043b\u044f \u0434\u0438\u0437\u0430\u0439\u043d\u0430. \u041a\u043e\u043b\u043e\u043d\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f, \u043e\u0431\u0440\u0430\u0437\u0443\u044f 8-\u043a\u043e\u043b\u043e\u043d\u043e\u0447\u043d\u0443\u044e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0434\u043b\u044f \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u043e\u0432, \u0438\u043b\u0438 4-\u043a\u043e\u043b\u043e\u043d\u043e\u0447\u043d\u0443\u044e \u0434\u043b\u044f \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u043e\u0432. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0442\u0430\u043a\u043e\u043c\u0443 \u0440\u0435\u0448\u0435\u043d\u0438\u044e, GGS \u043f\u043e\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043e\u0442 240px \u0434\u043e 2560px.  <\/p>\n<ul>\n<li>\u0420\u0435\u0437\u0438\u043d\u043e\u0432\u044b\u0435 \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043b\u043e\u043d\u043a\u0430\u043c\u0438<\/li>\n<li>\u0421\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442\u0441\u044f \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u0438 \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0448\u0440\u0438\u0444\u0442\u043e\u0432, \u0440\u0430\u043c\u043e\u043a, \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435<\/li>\n<li>Golden Gridlet \u2014 \u043a\u043d\u043e\u043f\u043a\u0430 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430, \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0430\u044f \u043a\u043e\u043b\u043e\u043d\u043a\u0438, \u0437\u0430\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0432 \u0440\u0430\u0441\u043a\u043b\u0430\u0434\u043a\u0435<\/li>\n<li>\u0414\u043e\u0441\u0442\u0443\u043f\u043d\u044b HTML-\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430, CSS, LESS, SCSS, JS<\/li>\n<\/ul>\n<h4><a href=\"http:\/\/www.initializr.com\/\">Initializr<\/a><\/h4>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/30e\/41f\/981\/30e41f981385ff611b4504d3bf214c58.jpg\"\/><\/p>\n<p>  \u042d\u0442\u043e \u0441\u043a\u043e\u0440\u0435\u0435 \u043d\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u0430 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0445 HTML5, CSS3 \u0438 jQuery.  <\/p>\n<ul>\n<li>\u041f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d\u044b, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043d\u0430 HTML5 Boilerplate, Bootstrap, \u0438\u043b\u0438 \u043d\u0430 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u043c \u0448\u0430\u0431\u043b\u043e\u043d\u0435<\/li>\n<li>\u0414\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043d\u0430 \u0440\u0443\u0441\u0441\u043a\u043e\u043c \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u044f\u0437\u044b\u043a\u0430\u0445<\/li>\n<\/ul>\n<h4><a href=\"http:\/\/simplegrid.info\/\">Simple Grid<\/a><\/h4>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/c47\/11b\/4a4\/c4711b4a40bcd5a74fa19491439ed9af.jpg\"\/><\/p>\n<p>  \u041f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 4 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u044d\u043a\u0440\u0430\u043d\u043e\u0432: \u0434\u043e 720, \u0431\u043e\u043b\u044c\u0448\u0435 720, \u0431\u043e\u043b\u044c\u0448\u0435 985, \u0438 \u0431\u043e\u043b\u044c\u0448\u0435 1235px<br \/>  \u041f\u043e\u0441\u0435\u0442\u0438\u0442\u0435\u043b\u044c \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0432\u0435\u0440\u0441\u0442\u043a\u0443, \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u0443\u044e \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u0434 \u0435\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440 \u044d\u043a\u0440\u0430\u043d\u0430<br \/>  \u041d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u044b .first \u0438 .last<br \/>  \u041f\u0440\u043e\u0441\u0442\u044b\u0435, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043a\u043b\u0430\u0441\u0441\u044b \u0438 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430<\/p>\n<h4><a href=\"http:\/\/www.stacklayout.com\/index.html\">Stack Layout<\/a><\/h4>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/fd0\/8f3\/f8d\/fd08f3f8d23311f723bf26583b4dafd4.jpg\"\/><\/p>\n<ul>\n<li>\u0412\u0441\u0435\u0433\u043e 12 \u043d\u0430\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u0439 \u043a\u043b\u0430\u0441\u0441\u043e\u0432<\/li>\n<li>\u041b\u0435\u0433\u043a\u0438\u0439 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043d\u0430 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043d\u0430\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u0432<\/li>\n<li>\u0413\u0438\u0431\u043a\u0430\u044f \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0442\u043a\u0430<\/li>\n<li>\u041b\u0435\u0433\u043a\u0430\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432 \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043b\u043e\u043d\u043a\u0430\u043c\u0438<\/li>\n<\/ul>\n<h4><a href=\"http:\/\/stuffandnonsense.co.uk\/projects\/320andup\/\">320 and Up<\/a><\/h4>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/641\/8cf\/33a\/6418cf33af33f227befb9f143775df17.jpg\"\/><\/p>\n<p>  \u0414\u043b\u044f \u0432\u043b\u0430\u0434\u0435\u043b\u044c\u0446\u0435\u0432 \u043d\u0435\u0442\u0431\u0443\u043a\u043e\u0432 \u2014 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u0437, \u044f \u0438 \u0441\u0430\u043c \u0441\u0440\u0430\u0437\u0443 \u043d\u0435 \u043f\u043e\u043d\u044f\u043b \u043a\u0443\u0434\u0430 \u043f\u043e\u043f\u0430\u043b.<br \/>  320 and Up \u2014 \u043b\u0435\u0433\u043a\u0438\u0439, \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u0434\u043b\u044f \u0432\u0435\u0431-\u0434\u0438\u0437\u0430\u0439\u043d\u0430. \u0421\u043c\u0435\u043d\u0438\u043b \u0441\u0432\u043e\u0439 \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u0441 \u00ab\u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u0438\u0437\u0430\u0439\u043d \u0434\u043b\u044f \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432\u00bb \u043d\u0430 \u00ab\u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442, \u043f\u043e\u0442\u043e\u043c \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430\u00bb.  <\/p>\n<ul>\n<li>\u041f\u044f\u0442\u044c CSS3 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043c\u0435\u0434\u0438\u0430-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432: 480, 600, 768, 992 \u0438 1382px<\/li>\n<li>\u00ab\u0410\u0442\u043c\u043e\u0441\u0444\u0435\u0440\u0430\u00bb \u0434\u0438\u0437\u0430\u0439\u043d\u0430 (\u0446\u0432\u0435\u0442\u0430, \u0442\u0435\u043a\u0441\u0442\u0443\u0440\u044b, \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0430) \u043e\u0442\u0434\u0435\u043b\u0435\u043d\u0430 \u043e\u0442 \u0432\u0435\u0440\u0441\u0442\u043a\u0438<\/li>\n<li>\u0421\u0442\u0438\u043b\u0438 Bootstrap \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043e\u043a, \u0444\u043e\u0440\u043c \u0438 \u0442\u0430\u0431\u043b\u0438\u0446<\/li>\n<li><a href=\"http:\/\/modernizr.com\/\">Modernizr<\/a>, <a href=\"http:\/\/selectivizr.com\/\">Selectivizr<\/a>, \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0439 \u0442\u0435\u0441\u0442\u0435\u0440 \u0442\u0438\u043f\u043e\u0432 \u0438 \u0442\u0435\u0441\u0442\u0435\u0440 \u0434\u0438\u0437\u0430\u0439\u043d\u043e\u0432<\/li>\n<li>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 LESS \u0438 SASS<\/li>\n<\/ul>\n<h4><a href=\"http:\/\/fluidbaselinegrid.com\/\">Fliud Baseline Grid<\/a><\/h4>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/03f\/954\/1ec\/03f9541ec62f3f7785b473abaf3298bb.jpg\"\/><\/p>\n<p>  HTML5 \u0438 CSS3 \u043d\u0430\u0431\u043e\u0440 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0444\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0431\u044b\u0441\u0442\u0440\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u0430. \u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0431\u044b\u043b \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d \u0441 \u0441\u043e\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u0435\u043c \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u0432, \u0438 \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u0443\u0435\u0442 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u044b \u0432\u0435\u0440\u0441\u0442\u043a\u0438 \u0440\u0435\u0437\u0438\u043d\u043e\u0432\u044b\u043c\u0438 \u043a\u043e\u043b\u043e\u043d\u043a\u0430\u043c\u0438, \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0442\u043a\u043e\u0439 \u0438 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u043c \u0434\u0438\u0437\u0430\u0439\u043d\u043e\u043c \u00ab\u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u00bb.  <\/p>\n<ul>\n<li>\u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u043b\u043e\u043d\u043e\u043a, \u0435\u0441\u0442\u044c \u043e\u043d\u043b\u0430\u0439\u043d-\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 CSS<\/li>\n<li>\u0412\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u0430\u044f \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0430<\/li>\n<li>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 IE 6 \u0438 \u0432\u044b\u0448\u0435<\/li>\n<li>\u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0431\u0440\u0435\u0439\u043a\u043f\u043e\u0438\u043d\u0442\u043e\u0432, \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043e\u0442 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0434\u043e \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043e\u0432<\/li>\n<\/ul>\n<h4><a href=\"http:\/\/www.columnal.com\/\">Colomnal<\/a><\/h4>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/b29\/3bf\/759\/b293bf75901ecc8d40b6efe4e4f6315d.jpg\"\/><\/p>\n<p>  Colomnal \u2014 \u044d\u0442\u043e \u00ab\u0440\u0435\u043c\u0438\u043a\u0441\u00bb \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0434\u0440\u0443\u0433\u0438\u0445 \u0440\u0430\u0437\u043c\u0435\u0442\u043e\u043a. \u0420\u0435\u0437\u0438\u043d\u043e\u0432\u0430\u044f \u043c\u0435\u0442\u043a\u0430 \u0432\u0437\u044f\u0442\u0430 \u043e\u0442 1140 CSS Grid, \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432\u0437\u044f\u0442\u044b \u0441 960 Grid System. \u0428\u0438\u0440\u0438\u043d\u0430 1140px, \u0440\u0435\u0437\u0438\u043d\u043e\u0432\u0430\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0448\u0438\u0440\u0438\u043d\u0435 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432.  <\/p>\n<ul>\n<li>\u0412\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 CSS-\u0434\u0435\u0431\u0430\u0433\u0433\u0435\u0440, \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043b\u044e\u0431\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432\u0435\u0440\u0441\u0442\u043a\u0438<\/li>\n<li>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u0432\u043d\u0443\u0442\u0440\u0438 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0439<\/li>\n<li>\u0418\u043c\u0435\u044e\u0442\u0441\u044f \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u044b \u0438 \u0441\u0443\u0444\u0444\u0438\u043a\u0441\u044b \u0434\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u043f\u0435\u0440\u0435\u0434 \u0438\u043b\u0438 \u043f\u043e\u0441\u043b\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c<\/li>\n<li>CSS \u043a\u043b\u0430\u0441\u0441\u044b \u0434\u043b\u044f \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432<\/li>\n<li>PDF \u0434\u043b\u044f \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u0441 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u043e\u0439<\/li>\n<li>\u0428\u0430\u0431\u043b\u043e\u043d\u044b<\/li>\n<\/ul>\n<h4><a href=\"http:\/\/piira.se\/projects\/ingrid\/\">Ingrid Framwork<\/a><\/h4>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/4ca\/0e3\/a8a\/4ca0e3a8afb0dd4e993971fc41ff54ca.jpg\"\/><\/p>\n<p>  Ingrid \u2014 \u044d\u0442\u043e \u043b\u0435\u0433\u043a\u0430\u044f \u0440\u0435\u0437\u0438\u043d\u043e\u0432\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 CSS-\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438, \u0446\u0435\u043b\u044c \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u2014 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0438\u043b\u0438 \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u0442\u0438\u043f\u043e\u0432. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u043c\u0443 \u043e\u043d\u0430 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043c\u0435\u043d\u0435\u0435 \u043d\u0430\u0432\u044f\u0437\u0447\u0438\u0432\u043e\u0439 \u0438 \u0435\u0435 \u043f\u0440\u043e\u0449\u0435 \u043f\u0435\u0440\u0435\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0442\u043a\u0438. \u0422\u0430\u043a\u0436\u0435 \u044d\u0442\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u043c\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043b\u0435\u0433\u043a\u043e \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u043f\u043e\u0434 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0446\u0435\u043b\u0438.<\/p>\n<p>  <a href=\"http:\/\/www.prowebdesign.ro\/yamb\/\">Yet Another Mobile Boilerplate<\/a><br \/>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/b4a\/c91\/d85\/b4ac91d8513f1fbfb8c0488738bd3c38.jpg\"\/><\/p>\n<p>  YAMB \u2014 \u044d\u0442\u043e \u043d\u0430\u0431\u043e\u0440 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u0432\u0435\u0431-\u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u043e\u0432, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u0441\u0442\u043e\u0438\u0442\u044c \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0435 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u044b \u0431\u044b\u0441\u0442\u0440\u0435\u0435. \u0412\u0435\u0431-\u0441\u0430\u0439\u0442\u044b \u043d\u0430 YAMB \u0431\u0443\u0434\u0443\u0442 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0434\u043b\u044f \u044d\u043a\u0440\u0430\u043d\u043e\u0432 \u0448\u0438\u0440\u0438\u043d\u043e\u0439 \u043e\u0442 320 \u0434\u043e \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0441\u0442\u0438.  <\/p>\n<ul>\n<li>\u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u0430\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430<\/li>\n<li>\u0412\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0435 \u043c\u0435\u043d\u044e \u0441 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u043d\u0435\u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u044b\u0445 \u043f\u043e\u0434-\u0443\u0440\u043e\u0432\u043d\u0435\u0439 \u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u0435\u0439<\/li>\n<li>\u0414\u043b\u044f \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432 \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0435 \u043c\u0435\u043d\u044e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0432 \u0441\u043f\u0438\u0441\u043a\u0438 \u0434\u043b\u044f \u0432\u044b\u0431\u043e\u0440\u0430<\/li>\n<li>\u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0435 \u0441\u043b\u0430\u0439\u0434\u0448\u043e\u0443 \u0441 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430\u043c\u0438, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438\u0445 \u0432 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u0430<\/li>\n<\/ul>\n<p>  <a href=\"http:\/\/lessframework.com\/\">Less Framework 4<\/a><br \/>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/ff9\/af9\/3d7\/ff9af93d7bf8172a099c4ffc458ef973.jpg\"\/><\/p>\n<p>  Less Framework 4 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 4 \u0432\u0435\u0440\u0441\u0442\u043a\u0438 \u0438 \u0442\u0440\u0438 \u043d\u0430\u0431\u043e\u0440\u0430 \u0442\u0438\u043f\u043e\u0433\u0440\u0430\u0444\u0438\u043a\u0438, \u0432\u0441\u0435 \u044d\u0442\u043e \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043e \u043d\u0430 \u043e\u0434\u043d\u043e\u0439 \u0441\u0435\u0442\u043a\u0435. <br \/>  \u0420\u0430\u0437\u043d\u043e\u0432\u0438\u0434\u043d\u043e\u0441\u0442\u0438 \u0432\u0435\u0440\u0441\u0442\u043e\u043a: \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f, \u0434\u043b\u044f \u043f\u043b\u0430\u043d\u0448\u0435\u0440\u043e\u0432, \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0438 \u0448\u0438\u0440\u043e\u043a\u0430\u044f \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432<br \/>  \u041a\u0430\u0436\u0434\u0430\u044f \u0432\u0435\u0440\u0441\u0442\u043a\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 \u043a\u043e\u043b\u043e\u043d\u043a\u0430\u0445 \u0448\u0438\u0440\u0438\u043d\u043e\u0439 68px \u0438 24px-\u043e\u0442\u0441\u0442\u0443\u043f\u0430\u0445. \u0418\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u043b\u043e\u043d\u043e\u043a \u0438 \u0448\u0438\u0440\u0438\u043d\u0430 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432.  <\/p>\n<ul>\n<li>\u041f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 CSS<\/li>\n<li>\u0415\u0441\u0442\u044c Rails \u0433\u0435\u043c, \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b, \u043f\u043b\u0430\u0433\u0438\u043d \u0434\u043b\u044f Compass, \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435<\/li>\n<\/ul>\n<h4><a href=\"http:\/\/960.gs\/\">960 Grid System<\/a><\/h4>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/196\/54c\/f83\/19654cf83c0e59f255ec83f973f93cd2.jpg\"\/><\/p>\n<p>  \u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0449\u0438\u0439 12-\u0442\u0438 \u0438 16-\u043a\u043e\u043b\u043e\u043d\u043e\u0447\u043d\u0443\u044e \u0441\u0435\u0442\u043a\u0443 \u0448\u0438\u0440\u0438\u043d\u043e\u0439 960px.  <\/p>\n<ul>\n<li>\u0415\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0441\u0430\u043c\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u0438 HTML<\/li>\n<li>\u0418\u043c\u0435\u0435\u0442\u0441\u044f \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u0441 24-\u043a\u043e\u043b\u043e\u043d\u043e\u0447\u043d\u043e\u0439 \u0441\u0435\u0442\u043a\u043e\u0439<\/li>\n<\/ul>\n<p>  PS. \u0415\u0441\u043b\u0438 \u043d\u0430\u0439\u0434\u0435\u0442\u0435 \u043e\u0448\u0438\u0431\u043a\u0438 \u0438\u043b\u0438 \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0442\u0435\u0440\u043c\u0438\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u2014 \u043f\u0438\u0448\u0438\u0442\u0435, \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0432 \u041b\u0421, \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u044e.    \t   \t<\/p>\n<div class=\"clear\"><\/div>\n<\/p><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"http:\/\/habrahabr.ru\/post\/156747\/\"> http:\/\/habrahabr.ru\/post\/156747\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"content html_format\">   \t\u0417\u0430\u043c\u0435\u0442\u0438\u043b, \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u043b\u044e\u0431\u043e\u0435 \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u0435 Twitter Bootstrap, \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u043e\u0434\u0438\u043d \u0447\u0435\u043b\u043e\u0432\u0435\u043a \u043e\u0442\u043c\u0435\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u00ab\u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u043d\u043e\u0433\u043e \u0435\u0433\u043e \u0441\u0442\u0430\u043b\u043e\u00bb. \u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0432\u0441\u0435 \u0443\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442, \u043d\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043e\u043d \u0443\u0436\u0435 \u043f\u0440\u0438\u0435\u043b\u0441\u044f \u0438 \u043e\u043d\u0438 \u0445\u043e\u0442\u044f\u0442 \u0447\u0435\u0433\u043e-\u0442\u043e \u043d\u043e\u0432\u043e\u0433\u043e. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0440\u0435\u0448\u0438\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u044e \u0441\u043e \u0441\u0431\u043e\u0440\u043d\u0438\u043a\u043e\u043c \u0438\u0437 24 css-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432, \u0434\u0443\u043c\u0430\u044e \u043a\u0430\u0436\u0434\u044b\u0439 \u0441\u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0439\u0442\u0438 \u0447\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0434\u043b\u044f \u0441\u0435\u0431\u044f. \u0417\u0430\u043e\u0434\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442 \u0440\u0430\u0437\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u0435\u0435.<\/p>\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-156747","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/156747","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=156747"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/156747\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=156747"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=156747"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=156747"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}