{"id":3239,"date":"2017-08-07T21:40:20","date_gmt":"2017-08-07T18:40:20","guid":{"rendered":"http:\/\/kamil-abzalov.com\/tutorials\/skeleton-css-framework\/"},"modified":"2020-04-08T21:36:09","modified_gmt":"2020-04-08T18:36:09","slug":"skeleton-css-framework","status":"publish","type":"post","link":"https:\/\/kamil-abzalov.com\/en\/tutorials\/html-css\/skeleton-css-framework\/","title":{"rendered":"Skeleton CSS framework"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; fullwidth=&#8221;on&#8221; _builder_version=&#8221;3.22&#8243;][et_pb_fullwidth_header title=&#8221;Skeleton CSS framework&#8221; content_max_width=&#8221;none&#8221; _builder_version=&#8221;3.16&#8243; button_one_letter_spacing_hover=&#8221;0&#8243; button_two_letter_spacing_hover=&#8221;0&#8243; button_one_text_size__hover_enabled=&#8221;off&#8221; button_two_text_size__hover_enabled=&#8221;off&#8221; button_one_text_color__hover_enabled=&#8221;off&#8221; button_two_text_color__hover_enabled=&#8221;off&#8221; button_one_border_width__hover_enabled=&#8221;off&#8221; button_two_border_width__hover_enabled=&#8221;off&#8221; button_one_border_color__hover_enabled=&#8221;off&#8221; button_two_border_color__hover_enabled=&#8221;off&#8221; button_one_border_radius__hover_enabled=&#8221;off&#8221; button_two_border_radius__hover_enabled=&#8221;off&#8221; button_one_letter_spacing__hover_enabled=&#8221;on&#8221; button_one_letter_spacing__hover=&#8221;0&#8243; button_two_letter_spacing__hover_enabled=&#8221;on&#8221; button_two_letter_spacing__hover=&#8221;0&#8243; button_one_bg_color__hover_enabled=&#8221;off&#8221; button_two_bg_color__hover_enabled=&#8221;off&#8221;][\/et_pb_fullwidth_header][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; admin_label=&#8221;section&#8221; _builder_version=&#8221;3.22&#8243;][et_pb_row admin_label=&#8221;row&#8221; _builder_version=&#8221;3.25&#8243; background_size=&#8221;initial&#8221; background_position=&#8221;top_left&#8221; background_repeat=&#8221;repeat&#8221; custom_padding=&#8221;0px|||&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;3.25&#8243; custom_padding=&#8221;|||&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_dcsbcm_divi_breadcrumbs_module homebreadcrumbtext=&#8221;Home&#8221; hide_currentbreadcrumb=&#8221;off&#8221; _builder_version=&#8221;4.4.2&#8243; custom_padding=&#8221;0px|||&#8221; hover_enabled=&#8221;0&#8243; fontsbreadcrumbs_font_size_tablet=&#8221;51&#8243; fontsbreadcrumbs_line_height_tablet=&#8221;2&#8243; fontsseperator_font_size_tablet=&#8221;51&#8243; fontsseperator_line_height_tablet=&#8221;2&#8243; fontsbreadcrumblinks_font_size_tablet=&#8221;51&#8243; fontsbreadcrumblinks_line_height_tablet=&#8221;2&#8243;][\/et_pb_dcsbcm_divi_breadcrumbs_module][et_pb_text _builder_version=&#8221;3.27.4&#8243; background_size=&#8221;initial&#8221; background_position=&#8221;top_left&#8221; background_repeat=&#8221;repeat&#8221; use_border_color=&#8221;off&#8221; border_color=&#8221;#ffffff&#8221; border_style=&#8221;solid&#8221;]In <a href=\"https:\/\/kamil-abzalov.com\/en\/tutorials\/responsive-design\/\">last lesson<\/a> we considered <strong>\u00a0responsive web design necessity<\/strong> and <strong>media queries<\/strong>. Media queries writing is very tedious and intensive action. Developers always seek to do make their work easier. Most of developers use frameworks.<!--more--><br \/>\n[\/et_pb_text][et_pb_video src=&#8221;https:\/\/www.youtube.com\/watch?v=0P1xCDj_3oA&#8221; _builder_version=&#8221;3.0.47&#8243;][\/et_pb_video][et_pb_text _builder_version=&#8221;3.27.4&#8243; background_size=&#8221;initial&#8221; background_position=&#8221;top_left&#8221; background_repeat=&#8221;repeat&#8221; use_border_color=&#8221;off&#8221; border_color=&#8221;#ffffff&#8221; border_style=&#8221;solid&#8221;]Framework in development is a ready-to-use  tools. In CSS framework is a ready-to-use classes. In this lesson we&#8217;ll consider <a href=\"http:\/\/getskeleton.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">skeleton css<\/a>. You can know more about it reading documentation. Also I told about font size &#8211; pixels and em\/%\/rem.<br \/>\n[\/et_pb_text][et_pb_dmb_code_snippet title=&#8221;Code lesson (HTML)&#8221; code=&#8221;PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KICA8bWV0YSBjaGFyc2V0PSJ1dGYtOCI+CiAgPG1ldGEgaHR0cC1lcXVpdj0iWC1VQS1Db21wYXRpYmxlIiBjb250ZW50PSJJRT1lZGdlIj4KICA8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNlLXdpZHRoLCBpbml0aWFsLXNjYWxlPTEuMCI+CiAgPHRpdGxlPjwvdGl0bGU+CiAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJjc3Mvbm9ybWFsaXplLmNzcyI+CiAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJjc3Mvc2tlbGV0b24uY3NzIj4KPC9oZWFkPgo8Ym9keT4KCgo8ZGl2IGNsYXNzPSJjb250YWluZXIiPgoKPGRpdiBjbGFzcz0icm93Ij4KCjxkaXYgY2xhc3M9ImZvdXIgY29sdW1ucyI+CiAgICAgICAgIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBFeHBlZGl0YSBjdXBpZGl0YXRlIHRlbmV0dXIgbmVtbyBlbGlnZW5kaSBzdW50LiBBIGlwc3VtIG5vbiBhcmNoaXRlY3RvIHZlcml0YXRpcyByZXBlbGxhdCBleHBsaWNhYm8sIHRvdGFtIGVhcnVtIGVvcywgYW1ldCwgc29sdXRhIGNvcnBvcmlzIGl1c3RvIGNvbnNlcXVhdHVyIG1pbnVzIQogICAgICAgPC9kaXY+CgoKPGRpdiBjbGFzcz0iZm91ciBjb2x1bW5zIj4KICAgICAgICAgTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIEV4cGVkaXRhIGN1cGlkaXRhdGUgdGVuZXR1ciBuZW1vIGVsaWdlbmRpIHN1bnQuIEEgaXBzdW0gbm9uIGFyY2hpdGVjdG8gdmVyaXRhdGlzIHJlcGVsbGF0IGV4cGxpY2FibywgdG90YW0gZWFydW0gZW9zLCBhbWV0LCBzb2x1dGEgY29ycG9yaXMgaXVzdG8gY29uc2VxdWF0dXIgbWludXMhCiAgICAgICA8L2Rpdj4KCgo8ZGl2IGNsYXNzPSJmb3VyIGNvbHVtbnMiPgogICAgICAgICBMb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCwgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gRXhwZWRpdGEgY3VwaWRpdGF0ZSB0ZW5ldHVyIG5lbW8gZWxpZ2VuZGkgc3VudC4gQSBpcHN1bSBub24gYXJjaGl0ZWN0byB2ZXJpdGF0aXMgcmVwZWxsYXQgZXhwbGljYWJvLCB0b3RhbSBlYXJ1bSBlb3MsIGFtZXQsIHNvbHV0YSBjb3Jwb3JpcyBpdXN0byBjb25zZXF1YXR1ciBtaW51cyEKICAgICAgIDwvZGl2PgoKICAgIDwvZGl2PgoKCgo8ZGl2IGNsYXNzPSJyb3ciPgoKPGgxPkhlYWRpbmc8L2gxPgoKCjxoMj5IZWFkaW5nPC9oMj4KCgo8aDM+SGVhZGluZzwvaDM+CgoKPGg0PkhlYWRpbmc8L2g0PgoKCjxoNT5IZWFkaW5nPC9oNT4KCgo8aDY+SGVhZGluZzwvaDY+CgogICAgPC9kaXY+CgoKCjxkaXYgY2xhc3M9InJvdyI+CgoKVGhlIGJhc2UgdHlwZSBpcyAxNXB4IG92ZXIgMS42IGxpbmUgaGVpZ2h0ICgyNHB4KQoKICAgICAgICA8c3Ryb25nPkJvbGRlZDwvc3Ryb25nPgogICAgICAgIDxlbT5JdGFsaWNpemVkPC9lbT4KICAgICAgICA8YT5Db2xvcmVkPC9hPgogICAgICAgIDx1PlVuZGVybGluZWQ8L3U+CiAgICA8L2Rpdj4KCgoKPGRpdiBjbGFzcz0icm93Ij4KICAgICAgPGEgY2xhc3M9ImJ1dHRvbiIgaHJlZj0iIyI+QW5jaG9yIGJ1dHRvbjwvYT4KICAgICAgPGJ1dHRvbj5CdXR0b24gZWxlbWVudDwvYnV0dG9uPgogICAgICA8aW5wdXQgdHlwZT0ic3VibWl0IiB2YWx1ZT0ic3VibWl0IGlucHV0Ij4KICAgICAgPGlucHV0IHR5cGU9ImJ1dHRvbiIgdmFsdWU9ImJ1dHRvbiBpbnB1dCI+CiAgICA8L2Rpdj4KCgoKPGRpdiBjbGFzcz0icm93Ij4KICAgICAgPGEgY2xhc3M9ImJ1dHRvbiBidXR0b24tcHJpbWFyeSIgaHJlZj0iIyI+QW5jaG9yIGJ1dHRvbjwvYT4KICAgICAgPGJ1dHRvbiBjbGFzcz0iYnV0dG9uLXByaW1hcnkiPkJ1dHRvbiBlbGVtZW50PC9idXR0b24+CiAgICAgIDxpbnB1dCBjbGFzcz0iYnV0dG9uLXByaW1hcnkiIHR5cGU9InN1Ym1pdCIgdmFsdWU9InN1Ym1pdCBpbnB1dCI+CiAgICAgIDxpbnB1dCBjbGFzcz0iYnV0dG9uLXByaW1hcnkiIHR5cGU9ImJ1dHRvbiIgdmFsdWU9ImJ1dHRvbiBpbnB1dCI+CiAgICA8L2Rpdj4KCgoKPGRpdiBjbGFzcz0icm93Ij4KCjxmb3JtPgoKPGRpdiBjbGFzcz0icm93Ij4KCjxkaXYgY2xhc3M9InNpeCBjb2x1bW5zIj4KICAgICAgPGxhYmVsIGZvcj0iZXhhbXBsZUVtYWlsSW5wdXQiPllvdXIgZW1haWw8L2xhYmVsPgogICAgICA8aW5wdXQgY2xhc3M9InUtZnVsbC13aWR0aCIgdHlwZT0iZW1haWwiIHBsYWNlaG9sZGVyPSJ0ZXN0QG1haWxib3guY29tIiBpZD0iZXhhbXBsZUVtYWlsSW5wdXQiPgogICAgPC9kaXY+CgoKPGRpdiBjbGFzcz0ic2l4IGNvbHVtbnMiPgogICAgICA8bGFiZWwgZm9yPSJleGFtcGxlUmVjaXBpZW50SW5wdXQiPlJlYXNvbiBmb3IgY29udGFjdGluZzwvbGFiZWw+CiAgICAgIDxzZWxlY3QgY2xhc3M9InUtZnVsbC13aWR0aCIgaWQ9ImV4YW1wbGVSZWNpcGllbnRJbnB1dCI+CjxvcHRpb24gdmFsdWU9Ik9wdGlvbiAxIj5RdWVzdGlvbnM8L29wdGlvbj4KPG9wdGlvbiB2YWx1ZT0iT3B0aW9uIDIiPkFkbWlyYXRpb248L29wdGlvbj4KPG9wdGlvbiB2YWx1ZT0iT3B0aW9uIDMiPkNhbiBJIGdldCB5b3VyIG51bWJlcj88L29wdGlvbj4KICAgICAgPC9zZWxlY3Q+CiAgICA8L2Rpdj4KCiAgPC9kaXY+CgogIDxsYWJlbCBmb3I9ImV4YW1wbGVNZXNzYWdlIj5NZXNzYWdlPC9sYWJlbD4KICA8dGV4dGFyZWEgY2xhc3M9InUtZnVsbC13aWR0aCIgcGxhY2Vob2xkZXI9IkhpIERhdmUg4oCmIiBpZD0iZXhhbXBsZU1lc3NhZ2UiPjwvdGV4dGFyZWE+CiAgPGxhYmVsIGNsYXNzPSJleGFtcGxlLXNlbmQteW91cnNlbGYtY29weSI+CiAgICA8aW5wdXQgdHlwZT0iY2hlY2tib3giPgogICAgPHNwYW4gY2xhc3M9ImxhYmVsLWJvZHkiPlNlbmQgYSBjb3B5IHRvIHlvdXJzZWxmPC9zcGFuPgogIDwvbGFiZWw+CiAgPGlucHV0IGNsYXNzPSJidXR0b24tcHJpbWFyeSIgdHlwZT0ic3VibWl0IiB2YWx1ZT0iU3VibWl0Ij4KPC9mb3JtPgoKICAgIDwvZGl2PgoKCgo8ZGl2IGNsYXNzPSJyb3ciPgoKPHVsPgoKPGxpPkl0ZW0gMTwvbGk+CgoKPGxpPgogICAgSXRlbSAyCgo8dWw+Cgo8bGk+SXRlbSAyLjE8L2xpPgoKCjxsaT5JdGVtIDIuMjwvbGk+CgogICAgPC91bD4KCiAgPC9saT4KCgo8bGk+SXRlbSAzPC9saT4KCjwvdWw+CgoKCjxvbD4KCjxsaT5JdGVtIDE8L2xpPgoKCjxsaT4KICAgIEl0ZW0gMgoKPHVsPgoKPGxpPkl0ZW0gMi4xPC9saT4KCgo8bGk+SXRlbSAyLjI8L2xpPgoKICAgIDwvdWw+CgogIDwvbGk+CgoKPGxpPkl0ZW0gMzwvbGk+Cgo8L29sPgoKICAgIDwvZGl2PgoKCgo8ZGl2IGNsYXNzPSJyb3ciPgogICAgICA8IS0tINCi0Y3QsyBwcmUg0YHQu9GD0LbQuNGCINC00LvRjyDQv9C+0LLRgtC+0YDQtdC90LjRjyDQv9C+0LvQvdC+0Lkg0LrQsNGA0YLQuNC90Ysg0YTQvtGA0LzQsNGC0LjRgNC+0LLQsNC90LjRjyDQuNC90YTQvtGA0LzQsNGG0LjQuC4g0KIu0LUg0LXRgdC70Lgg0YMg0LLQsNGBINC\/0L7RgdC70LUg0YHQu9C+0LLQsCDRgdGC0L7Rj9GCIDUg0L\/RgNC+0LHQtdC70L7Qsiwg0YLQviDQvtCx0LXRgNC90YPQsiDRgtC10LrRgdGCINCyINC00LDQvdC90YvQuSDRgtGN0LMsINCy0Ysg0YHQvNC+0LbQtdGC0LUg0LIg0YLQvtGH0L3QvtGB0YLQuCDQvdCw0L\/QuNGB0LDRgtGMINGC0LXQutGB0YIg0LIg0LbQtdC70LDQtdC80L7QvCDRhNC+0YDQvNCw0YLQtS4gLS0+Cgo8cHJlPjxjb2RlPi5zb21lLWNsYXNzIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiByZWQ7Cn08L2NvZGU+PC9wcmU+CjwvZGl2Pgo8ZGl2PgogICAgICA8IS0tINCh0LvRg9C20LXQsdC90YvQtSDQvdCw0LHQvtGA0Ysg0LrQvtC00L7QsiDQtNC70Y8g0LHQtdC30L7Qv9Cw0YHQvdC+0LPQviDQvdCw0L\/QuNGB0LDQvdC40Y8g0YHQuNC80LLQvtC70L7Qsiwg0Lgg0L3QtdGA0LDQt9GA0YvQstC90YvRhSDQv9GA0L7QsdC10LvQvtCyIC0tPgogICAgICA8ID4KCkxvcmVtIGlwc3VtYyAgZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIFZlbGl0IHBvc3NpbXVzLCBxdWFtIGFyY2hpdGVjdG8gaW5jaWR1bnQ\/IEFzc3VtZW5kYSB2ZW5pYW0sIGRvbG9yZW0gaGljISBTaW1pbGlxdWUgbmloaWwgZWFydW0sIHJlcHVkaWFuZGFlLCBzdW50IG9wdGlvIGVzc2UgcXVvIG1heGltZSwgcGVyZmVyZW5kaXMgbm9zdHJ1bSBkb2xvcmUgaWxsdW0\/CjwvZGl2Pgo8ZGl2IGNsYXNzPSJyb3ciPgo8dGFibGUgY2xhc3M9InUtZnVsbC13aWR0aCI+Cjx0aGVhZD4KPHRyPgo8dGg+TmFtZTwvdGg+Cjx0aD5BZ2U8L3RoPgo8dGg+U2V4PC90aD4KPHRoPkxvY2F0aW9uPC90aD4KPC90cj4KPC90aGVhZD4KPHRib2R5Pgo8dHI+Cjx0ZD5EYXZlIEdhbWFjaGU8L3RkPgo8dGQ+MjY8L3RkPgo8dGQ+TWFsZTwvdGQ+Cjx0ZD5TYW4gRnJhbmNpc2NvPC90ZD4KPC90cj4KPHRyPgo8dGQ+RHdheW5lIEpvaG5zb248L3RkPgo8dGQ+NDI8L3RkPgo8dGQ+TWFsZTwvdGQ+Cjx0ZD5IYXl3YXJkPC90ZD4KPC90cj4KPC90Ym9keT4KPC90YWJsZT4KPC9kaXY+CjwvZGl2PgoKPC9ib2R5Pgo8L2h0bWw+&#8221; admin_label=&#8221;\u041a\u043e\u0434 \u0443\u0440\u043e\u043a\u0430&#8221; style=&#8221;docco&#8221; linenums=&#8221;on&#8221; usetabwidth=&#8221;on&#8221; tabwidth=&#8221;4&#8243; _builder_version=&#8221;4.4.2&#8243; hover_enabled=&#8221;0&#8243;]PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KICA8bWV0YSBjaGFyc2V0PSJ1dGYtOCI+CiAgPG1ldGEgaHR0cC1lcXVpdj0iWC1VQS1Db21wYXRpYmxlIiBjb250ZW50PSJJRT1lZGdlIj4KICA8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNlLXdpZHRoLCBpbml0aWFsLXNjYWxlPTEuMCI+CiAgPHRpdGxlPjwvdGl0bGU+CiAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJjc3Mvbm9ybWFsaXplLmNzcyI+CiAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJjc3Mvc2tlbGV0b24uY3NzIj4KPC9oZWFkPgo8Ym9keT4KCgo8ZGl2IGNsYXNzPSJjb250YWluZXIiPgoKPGRpdiBjbGFzcz0icm93Ij4KCjxkaXYgY2xhc3M9ImZvdXIgY29sdW1ucyI+CiAgICAgICAgIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBFeHBlZGl0YSBjdXBpZGl0YXRlIHRlbmV0dXIgbmVtbyBlbGlnZW5kaSBzdW50LiBBIGlwc3VtIG5vbiBhcmNoaXRlY3RvIHZlcml0YXRpcyByZXBlbGxhdCBleHBsaWNhYm8sIHRvdGFtIGVhcnVtIGVvcywgYW1ldCwgc29sdXRhIGNvcnBvcmlzIGl1c3RvIGNvbnNlcXVhdHVyIG1pbnVzIQogICAgICAgPC9kaXY+CgoKPGRpdiBjbGFzcz0iZm91ciBjb2x1bW5zIj4KICAgICAgICAgTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIEV4cGVkaXRhIGN1cGlkaXRhdGUgdGVuZXR1ciBuZW1vIGVsaWdlbmRpIHN1bnQuIEEgaXBzdW0gbm9uIGFyY2hpdGVjdG8gdmVyaXRhdGlzIHJlcGVsbGF0IGV4cGxpY2FibywgdG90YW0gZWFydW0gZW9zLCBhbWV0LCBzb2x1dGEgY29ycG9yaXMgaXVzdG8gY29uc2VxdWF0dXIgbWludXMhCiAgICAgICA8L2Rpdj4KCgo8ZGl2IGNsYXNzPSJmb3VyIGNvbHVtbnMiPgogICAgICAgICBMb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCwgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gRXhwZWRpdGEgY3VwaWRpdGF0ZSB0ZW5ldHVyIG5lbW8gZWxpZ2VuZGkgc3VudC4gQSBpcHN1bSBub24gYXJjaGl0ZWN0byB2ZXJpdGF0aXMgcmVwZWxsYXQgZXhwbGljYWJvLCB0b3RhbSBlYXJ1bSBlb3MsIGFtZXQsIHNvbHV0YSBjb3Jwb3JpcyBpdXN0byBjb25zZXF1YXR1ciBtaW51cyEKICAgICAgIDwvZGl2PgoKICAgIDwvZGl2PgoKCgo8ZGl2IGNsYXNzPSJyb3ciPgoKPGgxPkhlYWRpbmc8L2gxPgoKCjxoMj5IZWFkaW5nPC9oMj4KCgo8aDM+SGVhZGluZzwvaDM+CgoKPGg0PkhlYWRpbmc8L2g0PgoKCjxoNT5IZWFkaW5nPC9oNT4KCgo8aDY+SGVhZGluZzwvaDY+CgogICAgPC9kaXY+CgoKCjxkaXYgY2xhc3M9InJvdyI+CgoKVGhlIGJhc2UgdHlwZSBpcyAxNXB4IG92ZXIgMS42IGxpbmUgaGVpZ2h0ICgyNHB4KQoKICAgICAgICA8c3Ryb25nPkJvbGRlZDwvc3Ryb25nPgogICAgICAgIDxlbT5JdGFsaWNpemVkPC9lbT4KICAgICAgICA8YT5Db2xvcmVkPC9hPgogICAgICAgIDx1PlVuZGVybGluZWQ8L3U+CiAgICA8L2Rpdj4KCgoKPGRpdiBjbGFzcz0icm93Ij4KICAgICAgPGEgY2xhc3M9ImJ1dHRvbiIgaHJlZj0iIyI+QW5jaG9yIGJ1dHRvbjwvYT4KICAgICAgPGJ1dHRvbj5CdXR0b24gZWxlbWVudDwvYnV0dG9uPgogICAgICA8aW5wdXQgdHlwZT0ic3VibWl0IiB2YWx1ZT0ic3VibWl0IGlucHV0Ij4KICAgICAgPGlucHV0IHR5cGU9ImJ1dHRvbiIgdmFsdWU9ImJ1dHRvbiBpbnB1dCI+CiAgICA8L2Rpdj4KCgoKPGRpdiBjbGFzcz0icm93Ij4KICAgICAgPGEgY2xhc3M9ImJ1dHRvbiBidXR0b24tcHJpbWFyeSIgaHJlZj0iIyI+QW5jaG9yIGJ1dHRvbjwvYT4KICAgICAgPGJ1dHRvbiBjbGFzcz0iYnV0dG9uLXByaW1hcnkiPkJ1dHRvbiBlbGVtZW50PC9idXR0b24+CiAgICAgIDxpbnB1dCBjbGFzcz0iYnV0dG9uLXByaW1hcnkiIHR5cGU9InN1Ym1pdCIgdmFsdWU9InN1Ym1pdCBpbnB1dCI+CiAgICAgIDxpbnB1dCBjbGFzcz0iYnV0dG9uLXByaW1hcnkiIHR5cGU9ImJ1dHRvbiIgdmFsdWU9ImJ1dHRvbiBpbnB1dCI+CiAgICA8L2Rpdj4KCgoKPGRpdiBjbGFzcz0icm93Ij4KCjxmb3JtPgoKPGRpdiBjbGFzcz0icm93Ij4KCjxkaXYgY2xhc3M9InNpeCBjb2x1bW5zIj4KICAgICAgPGxhYmVsIGZvcj0iZXhhbXBsZUVtYWlsSW5wdXQiPllvdXIgZW1haWw8L2xhYmVsPgogICAgICA8aW5wdXQgY2xhc3M9InUtZnVsbC13aWR0aCIgdHlwZT0iZW1haWwiIHBsYWNlaG9sZGVyPSJ0ZXN0QG1haWxib3guY29tIiBpZD0iZXhhbXBsZUVtYWlsSW5wdXQiPgogICAgPC9kaXY+CgoKPGRpdiBjbGFzcz0ic2l4IGNvbHVtbnMiPgogICAgICA8bGFiZWwgZm9yPSJleGFtcGxlUmVjaXBpZW50SW5wdXQiPlJlYXNvbiBmb3IgY29udGFjdGluZzwvbGFiZWw+CiAgICAgIDxzZWxlY3QgY2xhc3M9InUtZnVsbC13aWR0aCIgaWQ9ImV4YW1wbGVSZWNpcGllbnRJbnB1dCI+CjxvcHRpb24gdmFsdWU9Ik9wdGlvbiAxIj5RdWVzdGlvbnM8L29wdGlvbj4KPG9wdGlvbiB2YWx1ZT0iT3B0aW9uIDIiPkFkbWlyYXRpb248L29wdGlvbj4KPG9wdGlvbiB2YWx1ZT0iT3B0aW9uIDMiPkNhbiBJIGdldCB5b3VyIG51bWJlcj88L29wdGlvbj4KICAgICAgPC9zZWxlY3Q+CiAgICA8L2Rpdj4KCiAgPC9kaXY+CgogIDxsYWJlbCBmb3I9ImV4YW1wbGVNZXNzYWdlIj5NZXNzYWdlPC9sYWJlbD4KICA8dGV4dGFyZWEgY2xhc3M9InUtZnVsbC13aWR0aCIgcGxhY2Vob2xkZXI9IkhpIERhdmUg4oCmIiBpZD0iZXhhbXBsZU1lc3NhZ2UiPjwvdGV4dGFyZWE+CiAgPGxhYmVsIGNsYXNzPSJleGFtcGxlLXNlbmQteW91cnNlbGYtY29weSI+CiAgICA8aW5wdXQgdHlwZT0iY2hlY2tib3giPgogICAgPHNwYW4gY2xhc3M9ImxhYmVsLWJvZHkiPlNlbmQgYSBjb3B5IHRvIHlvdXJzZWxmPC9zcGFuPgogIDwvbGFiZWw+CiAgPGlucHV0IGNsYXNzPSJidXR0b24tcHJpbWFyeSIgdHlwZT0ic3VibWl0IiB2YWx1ZT0iU3VibWl0Ij4KPC9mb3JtPgoKICAgIDwvZGl2PgoKCgo8ZGl2IGNsYXNzPSJyb3ciPgoKPHVsPgoKPGxpPkl0ZW0gMTwvbGk+CgoKPGxpPgogICAgSXRlbSAyCgo8dWw+Cgo8bGk+SXRlbSAyLjE8L2xpPgoKCjxsaT5JdGVtIDIuMjwvbGk+CgogICAgPC91bD4KCiAgPC9saT4KCgo8bGk+SXRlbSAzPC9saT4KCjwvdWw+CgoKCjxvbD4KCjxsaT5JdGVtIDE8L2xpPgoKCjxsaT4KICAgIEl0ZW0gMgoKPHVsPgoKPGxpPkl0ZW0gMi4xPC9saT4KCgo8bGk+SXRlbSAyLjI8L2xpPgoKICAgIDwvdWw+CgogIDwvbGk+CgoKPGxpPkl0ZW0gMzwvbGk+Cgo8L29sPgoKICAgIDwvZGl2PgoKCgo8ZGl2IGNsYXNzPSJyb3ciPgogICAgICA8IS0tINCi0Y3QsyBwcmUg0YHQu9GD0LbQuNGCINC00LvRjyDQv9C+0LLRgtC+0YDQtdC90LjRjyDQv9C+0LvQvdC+0Lkg0LrQsNGA0YLQuNC90Ysg0YTQvtGA0LzQsNGC0LjRgNC+0LLQsNC90LjRjyDQuNC90YTQvtGA0LzQsNGG0LjQuC4g0KIu0LUg0LXRgdC70Lgg0YMg0LLQsNGBINC\/0L7RgdC70LUg0YHQu9C+0LLQsCDRgdGC0L7Rj9GCIDUg0L\/RgNC+0LHQtdC70L7Qsiwg0YLQviDQvtCx0LXRgNC90YPQsiDRgtC10LrRgdGCINCyINC00LDQvdC90YvQuSDRgtGN0LMsINCy0Ysg0YHQvNC+0LbQtdGC0LUg0LIg0YLQvtGH0L3QvtGB0YLQuCDQvdCw0L\/QuNGB0LDRgtGMINGC0LXQutGB0YIg0LIg0LbQtdC70LDQtdC80L7QvCDRhNC+0YDQvNCw0YLQtS4gLS0+Cgo8cHJlPjxjb2RlPi5zb21lLWNsYXNzIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiByZWQ7Cn08L2NvZGU+PC9wcmU+CjwvZGl2Pgo8ZGl2PgogICAgICA8IS0tINCh0LvRg9C20LXQsdC90YvQtSDQvdCw0LHQvtGA0Ysg0LrQvtC00L7QsiDQtNC70Y8g0LHQtdC30L7Qv9Cw0YHQvdC+0LPQviDQvdCw0L\/QuNGB0LDQvdC40Y8g0YHQuNC80LLQvtC70L7Qsiwg0Lgg0L3QtdGA0LDQt9GA0YvQstC90YvRhSDQv9GA0L7QsdC10LvQvtCyIC0tPgogICAgICA8ID4KCkxvcmVtIGlwc3VtYyAgZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIFZlbGl0IHBvc3NpbXVzLCBxdWFtIGFyY2hpdGVjdG8gaW5jaWR1bnQ\/IEFzc3VtZW5kYSB2ZW5pYW0sIGRvbG9yZW0gaGljISBTaW1pbGlxdWUgbmloaWwgZWFydW0sIHJlcHVkaWFuZGFlLCBzdW50IG9wdGlvIGVzc2UgcXVvIG1heGltZSwgcGVyZmVyZW5kaXMgbm9zdHJ1bSBkb2xvcmUgaWxsdW0\/CjwvZGl2Pgo8ZGl2IGNsYXNzPSJyb3ciPgo8dGFibGUgY2xhc3M9InUtZnVsbC13aWR0aCI+Cjx0aGVhZD4KPHRyPgo8dGg+TmFtZTwvdGg+Cjx0aD5BZ2U8L3RoPgo8dGg+U2V4PC90aD4KPHRoPkxvY2F0aW9uPC90aD4KPC90cj4KPC90aGVhZD4KPHRib2R5Pgo8dHI+Cjx0ZD5EYXZlIEdhbWFjaGU8L3RkPgo8dGQ+MjY8L3RkPgo8dGQ+TWFsZTwvdGQ+Cjx0ZD5TYW4gRnJhbmNpc2NvPC90ZD4KPC90cj4KPHRyPgo8dGQ+RHdheW5lIEpvaG5zb248L3RkPgo8dGQ+NDI8L3RkPgo8dGQ+TWFsZTwvdGQ+Cjx0ZD5IYXl3YXJkPC90ZD4KPC90cj4KPC90Ym9keT4KPC90YWJsZT4KPC9kaXY+CjwvZGl2PgoKPC9ib2R5Pgo8L2h0bWw+[\/et_pb_dmb_code_snippet][et_pb_comments _builder_version=&#8221;4.4.2&#8243; custom_margin=&#8221;30px||||false|false&#8221; hover_enabled=&#8221;0&#8243;][\/et_pb_comments][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In last lesson we considered \u00a0responsive web design necessity and media queries. Media queries writing is very tedious and intensive action. Developers always seek to do make their work easier. Most of developers use frameworks. Framework in development is a ready-to-use tools. In CSS framework is a ready-to-use classes. In this lesson we&#8217;ll consider skeleton [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"\u041d\u0430 <a href=\"http:\/\/kamil-abzalov.com\/responsive-design\/\">\u043f\u0440\u043e\u0448\u043b\u043e\u043c \u0443\u0440\u043e\u043a\u0435<\/a>\u00a0\u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 <strong>\u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0442\u043a\u0438 (responsive design)\u00a0<\/strong>\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 <strong>\u043c\u0435\u0434\u0438\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 (media queries).\u00a0<\/strong> \u041d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0442\u0430\u043a\u0438\u0445 \u043c\u0435\u0434\u0438\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 - \u0437\u0430\u043d\u044f\u0442\u0438\u0435 \u0432\u0435\u0441\u044c\u043c\u0430 \u043d\u0443\u0434\u043d\u043e\u0435 (\u0445\u043e\u0442\u044f \u0438 \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0435). \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \u0441\u0442\u0440\u0435\u043c\u0438\u043b\u0438\u0441\u044c \u043e\u0431\u043b\u0435\u0433\u0447\u0438\u0442\u044c \u0441\u0432\u043e\u0439 \u0442\u0440\u0443\u0434. \u042d\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0432 \u043b\u044e\u0431\u043e\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438, \u043d\u0430 \u043b\u044e\u0431\u043e\u043c \u044f\u0437\u044b\u043a\u0435. Web \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043e\u0434\u043d\u043e \u0438\u0437 \u043b\u0438\u0434\u0438\u0440\u0443\u044e\u0449\u0438\u0445 \u043f\u043e\u0437\u0438\u0446\u0438\u0439 \u0432 \u044d\u0442\u043e\u043c \u043c\u043e\u043c\u0435\u043d\u0442\u0435. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u0447\u0442\u0438 \u0432\u0441\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438.<!--more-->\r\n\r\nhttps:\/\/www.youtube.com\/watch?v=0P1xCDj_3oA\r\n\r\n\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 <strong>\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a (framework)<\/strong>? \u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0441 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u0441\u043a\u043e\u0433\u043e - \"\u043a\u0430\u0440\u043a\u0430\u0441\". \u0412 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043f\u043e\u0434 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u0431\u043e\u0440 \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0438 \u043d\u0430\u0437\u043d\u0430\u0447\u0438\u0442\u044c \u043a\u0430\u043a\u043e\u043c\u0443-\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 (\u0432 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 css) \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0432\u043f\u043e\u043b\u043d\u0435 \u043f\u0440\u0438\u0435\u043c\u043b\u0435\u043c\u044b\u0439, \u0430 \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u0438 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442. \u0412 \u044d\u0442\u043e\u043c \u0443\u0440\u043e\u043a\u0435 \u0440\u0435\u0447\u044c \u043f\u043e\u0439\u0434\u0435\u0442 \u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0435 <a href=\"http:\/\/getskeleton.com\/\" target=\"_blank\">skeleton css<\/a>. \u0414\u0443\u043c\u0430\u044e, \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0447\u0442\u043e \u0438\u0437 \u0441\u0435\u0431\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442. \u0412\u0441\u0435 \u043e \u043d\u0435\u043c \u043c\u043e\u0436\u043d\u043e \u0443\u0437\u043d\u0430\u0442\u044c \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0438 \u0432 \u043c\u043e\u0435\u043c \u0432\u0438\u0434\u0435\u043e \u0443\u0440\u043e\u043a\u0435.\r\n\u0422\u0430\u043a\u0436\u0435 \u0432 \u044d\u0442\u043e\u043c \u0443\u0440\u043e\u043a\u0435 \u044f \u0437\u0430\u0442\u0440\u043e\u043d\u0443\u043b \u0442\u0435\u043c\u0443 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e\u0433\u043e (\u043f\u0438\u043a\u0441\u0435\u043b\u0438) \u0438 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e (em, %, rem) \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0448\u0440\u0438\u0444\u0442\u0430.\r\n\r\n\u041a\u043e\u0434 \u0443\u0440\u043e\u043a\u0430\r\n\r\n<pre><code><!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <meta charset=\"utf-8\">\r\n  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  <title><\/title>\r\n  <link rel=\"stylesheet\" href=\"css\/normalize.css\">\r\n  <link rel=\"stylesheet\" href=\"css\/skeleton.css\">\r\n<\/head>\r\n<body>\r\n\r\n\r\n<div class=\"container\">\r\n\r\n<div class=\"row\">\r\n\r\n<div class=\"four columns\">\r\n         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita cupiditate tenetur nemo eligendi sunt. A ipsum non architecto veritatis repellat explicabo, totam earum eos, amet, soluta corporis iusto consequatur minus!\r\n       <\/div>\r\n\r\n\r\n<div class=\"four columns\">\r\n         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita cupiditate tenetur nemo eligendi sunt. A ipsum non architecto veritatis repellat explicabo, totam earum eos, amet, soluta corporis iusto consequatur minus!\r\n       <\/div>\r\n\r\n\r\n<div class=\"four columns\">\r\n         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita cupiditate tenetur nemo eligendi sunt. A ipsum non architecto veritatis repellat explicabo, totam earum eos, amet, soluta corporis iusto consequatur minus!\r\n       <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n<div class=\"row\">\r\n\r\n<h1>Heading<\/h1>\r\n\r\n\r\n<h2>Heading<\/h2>\r\n\r\n\r\n<h3>Heading<\/h3>\r\n\r\n\r\n<h4>Heading<\/h4>\r\n\r\n\r\n<h5>Heading<\/h5>\r\n\r\n\r\n<h6>Heading<\/h6>\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n<div class=\"row\">\r\n\r\n\r\nThe base type is 15px over 1.6 line height (24px)\r\n\r\n        <strong>Bolded<\/strong>\r\n        <em>Italicized<\/em>\r\n        <a>Colored<\/a>\r\n        <u>Underlined<\/u>\r\n    <\/div>\r\n\r\n\r\n\r\n<div class=\"row\">\r\n      <a class=\"button\" href=\"#\">Anchor button<\/a>\r\n      <button>Button element<\/button>\r\n      <input type=\"submit\" value=\"submit input\">\r\n      <input type=\"button\" value=\"button input\">\r\n    <\/div>\r\n\r\n\r\n\r\n<div class=\"row\">\r\n      <a class=\"button button-primary\" href=\"#\">Anchor button<\/a>\r\n      <button class=\"button-primary\">Button element<\/button>\r\n      <input class=\"button-primary\" type=\"submit\" value=\"submit input\">\r\n      <input class=\"button-primary\" type=\"button\" value=\"button input\">\r\n    <\/div>\r\n\r\n\r\n\r\n<div class=\"row\">\r\n\r\n<form>\r\n\r\n<div class=\"row\">\r\n\r\n<div class=\"six columns\">\r\n      <label for=\"exampleEmailInput\">Your email<\/label>\r\n      <input class=\"u-full-width\" type=\"email\" placeholder=\"test@mailbox.com\" id=\"exampleEmailInput\">\r\n    <\/div>\r\n\r\n\r\n<div class=\"six columns\">\r\n      <label for=\"exampleRecipientInput\">Reason for contacting<\/label>\r\n      <select class=\"u-full-width\" id=\"exampleRecipientInput\">\r\n<option value=\"Option 1\">Questions<\/option>\r\n<option value=\"Option 2\">Admiration<\/option>\r\n<option value=\"Option 3\">Can I get your number?<\/option>\r\n      <\/select>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <label for=\"exampleMessage\">Message<\/label>\r\n  <textarea class=\"u-full-width\" placeholder=\"Hi Dave \u2026\" id=\"exampleMessage\"><\/textarea>\r\n  <label class=\"example-send-yourself-copy\">\r\n    <input type=\"checkbox\">\r\n    <span class=\"label-body\">Send a copy to yourself<\/span>\r\n  <\/label>\r\n  <input class=\"button-primary\" type=\"submit\" value=\"Submit\">\r\n<\/form>\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n<div class=\"row\">\r\n\r\n<ul>\r\n\r\n<li>Item 1<\/li>\r\n\r\n\r\n<li>\r\n    Item 2\r\n\r\n<ul>\r\n\r\n<li>Item 2.1<\/li>\r\n\r\n\r\n<li>Item 2.2<\/li>\r\n\r\n    <\/ul>\r\n\r\n  <\/li>\r\n\r\n\r\n<li>Item 3<\/li>\r\n\r\n<\/ul>\r\n\r\n\r\n\r\n<ol>\r\n\r\n<li>Item 1<\/li>\r\n\r\n\r\n<li>\r\n    Item 2\r\n\r\n<ul>\r\n\r\n<li>Item 2.1<\/li>\r\n\r\n\r\n<li>Item 2.2<\/li>\r\n\r\n    <\/ul>\r\n\r\n  <\/li>\r\n\r\n\r\n<li>Item 3<\/li>\r\n\r\n<\/ol>\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n<div class=\"row\">\r\n      <!-- \u0422\u044d\u0433 pre \u0441\u043b\u0443\u0436\u0438\u0442 \u0434\u043b\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u043d\u043e\u0439 \u043a\u0430\u0440\u0442\u0438\u043d\u044b \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438. \u0422.\u0435 \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u043f\u043e\u0441\u043b\u0435 \u0441\u043b\u043e\u0432\u0430 \u0441\u0442\u043e\u044f\u0442 5 \u043f\u0440\u043e\u0431\u0435\u043b\u043e\u0432, \u0442\u043e \u043e\u0431\u0435\u0440\u043d\u0443\u0432 \u0442\u0435\u043a\u0441\u0442 \u0432 \u0434\u0430\u043d\u043d\u044b\u0439 \u0442\u044d\u0433, \u0432\u044b \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u0432 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u0432 \u0436\u0435\u043b\u0430\u0435\u043c\u043e\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0435. -->\r\n\r\n<pre><code>.some-class {\r\n  background-color: red;\r\n}<\/code><\/pre>\r\n<\/div>\r\n<div>\r\n      <!-- \u0421\u043b\u0443\u0436\u0435\u0431\u043d\u044b\u0435 \u043d\u0430\u0431\u043e\u0440\u044b \u043a\u043e\u0434\u043e\u0432 \u0434\u043b\u044f \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0433\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432, \u0438 \u043d\u0435\u0440\u0430\u0437\u0440\u044b\u0432\u043d\u044b\u0445 \u043f\u0440\u043e\u0431\u0435\u043b\u043e\u0432 -->\r\n      < >\r\n\r\nLorem ipsumc\u00a0\u00a0\u00a0\u00a0 dolor sit amet, consectetur adipisicing elit. Velit possimus, quam architecto incidunt? Assumenda veniam, dolorem hic! Similique nihil earum, repudiandae, sunt optio esse quo maxime, perferendis nostrum dolore illum?\r\n<\/div>\r\n<div class=\"row\">\r\n<table class=\"u-full-width\">\r\n<thead>\r\n<tr>\r\n<th>Name<\/th>\r\n<th>Age<\/th>\r\n<th>Sex<\/th>\r\n<th>Location<\/th>\r\n<\/tr>\r\n<\/thead>\r\n<tbody>\r\n<tr>\r\n<td>Dave Gamache<\/td>\r\n<td>26<\/td>\r\n<td>Male<\/td>\r\n<td>San Francisco<\/td>\r\n<\/tr>\r\n<tr>\r\n<td>Dwayne Johnson<\/td>\r\n<td>42<\/td>\r\n<td>Male<\/td>\r\n<td>Hayward<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<\/div>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/code><\/pre>","_et_gb_content_width":"","footnotes":""},"categories":[257,219],"tags":[259,265,299],"class_list":["post-3239","post","type-post","status-publish","format-standard","hentry","category-html-css","category-tutorials","tag-css-en","tag-framework-en","tag--en"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Skeleton CSS framework - Kamil Abzalov&#039;s blog<\/title>\n<meta name=\"description\" content=\"In this lesson we&#039;ll discuss skeleton. Skeleton CSS sis ready-to-use css classes for fast responsive design creating.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/skeleton-css-framework\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Skeleton CSS framework - Kamil Abzalov&#039;s blog\" \/>\n<meta property=\"og:description\" content=\"In this lesson we&#039;ll discuss skeleton. Skeleton CSS sis ready-to-use css classes for fast responsive design creating.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/skeleton-css-framework\/\" \/>\n<meta property=\"og:site_name\" content=\"\u0441\u0430\u0439\u0442 \u041a\u0430\u043c\u0438\u043b\u044f \u0410\u0431\u0437\u0430\u043b\u043e\u0432\u0430\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/kamabzalov\" \/>\n<meta property=\"article:published_time\" content=\"2017-08-07T18:40:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-04-08T18:36:09+00:00\" \/>\n<meta name=\"author\" content=\"Kamil&#039; Abzalov\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Skeleton CSS framework\" \/>\n<meta name=\"twitter:description\" content=\"In this lesson we&#039;ll discuss skeleton. Skeleton CSS sis ready-to-use css classes for fast responsive design creating.\" \/>\n<meta name=\"twitter:creator\" content=\"@kamabzalov\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kamil&#039; Abzalov\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/skeleton-css-framework\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/skeleton-css-framework\\\/\"},\"author\":{\"name\":\"Kamil' Abzalov\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#\\\/schema\\\/person\\\/9c53360f21b83306ba40c2231573c600\"},\"headline\":\"Skeleton CSS framework\",\"datePublished\":\"2017-08-07T18:40:20+00:00\",\"dateModified\":\"2020-04-08T18:36:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/skeleton-css-framework\\\/\"},\"wordCount\":2025,\"commentCount\":0,\"keywords\":[\"css\",\"framework\",\"\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\"],\"articleSection\":[\"HTML and CSS\",\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/skeleton-css-framework\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/skeleton-css-framework\\\/\",\"url\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/skeleton-css-framework\\\/\",\"name\":\"Skeleton CSS framework - Kamil Abzalov's blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#website\"},\"datePublished\":\"2017-08-07T18:40:20+00:00\",\"dateModified\":\"2020-04-08T18:36:09+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#\\\/schema\\\/person\\\/9c53360f21b83306ba40c2231573c600\"},\"description\":\"In this lesson we'll discuss skeleton. Skeleton CSS sis ready-to-use css classes for fast responsive design creating.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/skeleton-css-framework\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/skeleton-css-framework\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/videouroki\\\/html-css\\\/skeleton-css-framework\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\",\"item\":\"https:\\\/\\\/kamil-abzalov.com\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Skeleton CSS framework\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#website\",\"url\":\"https:\\\/\\\/kamil-abzalov.com\\\/\",\"name\":\"\u0441\u0430\u0439\u0442 \u041a\u0430\u043c\u0438\u043b\u044f \u0410\u0431\u0437\u0430\u043b\u043e\u0432\u0430\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/kamil-abzalov.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/kamil-abzalov.com\\\/#\\\/schema\\\/person\\\/9c53360f21b83306ba40c2231573c600\",\"name\":\"Kamil' Abzalov\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g\",\"caption\":\"Kamil' Abzalov\"},\"sameAs\":[\"https:\\\/\\\/kamil-abzalov.com\\\/\",\"https:\\\/\\\/www.facebook.com\\\/kamabzalov\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/kamabzalov\",\"https:\\\/\\\/x.com\\\/kamabzalov\",\"https:\\\/\\\/www.youtube.com\\\/user\\\/kamabzalov\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Skeleton CSS framework - Kamil Abzalov's blog","description":"In this lesson we'll discuss skeleton. Skeleton CSS sis ready-to-use css classes for fast responsive design creating.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/skeleton-css-framework\/","og_locale":"en_US","og_type":"article","og_title":"Skeleton CSS framework - Kamil Abzalov's blog","og_description":"In this lesson we'll discuss skeleton. Skeleton CSS sis ready-to-use css classes for fast responsive design creating.","og_url":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/skeleton-css-framework\/","og_site_name":"\u0441\u0430\u0439\u0442 \u041a\u0430\u043c\u0438\u043b\u044f \u0410\u0431\u0437\u0430\u043b\u043e\u0432\u0430","article_author":"https:\/\/www.facebook.com\/kamabzalov","article_published_time":"2017-08-07T18:40:20+00:00","article_modified_time":"2020-04-08T18:36:09+00:00","author":"Kamil' Abzalov","twitter_card":"summary_large_image","twitter_title":"Skeleton CSS framework","twitter_description":"In this lesson we'll discuss skeleton. Skeleton CSS sis ready-to-use css classes for fast responsive design creating.","twitter_creator":"@kamabzalov","twitter_misc":{"Written by":"Kamil' Abzalov","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/skeleton-css-framework\/#article","isPartOf":{"@id":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/skeleton-css-framework\/"},"author":{"name":"Kamil' Abzalov","@id":"https:\/\/kamil-abzalov.com\/#\/schema\/person\/9c53360f21b83306ba40c2231573c600"},"headline":"Skeleton CSS framework","datePublished":"2017-08-07T18:40:20+00:00","dateModified":"2020-04-08T18:36:09+00:00","mainEntityOfPage":{"@id":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/skeleton-css-framework\/"},"wordCount":2025,"commentCount":0,"keywords":["css","framework","\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a"],"articleSection":["HTML and CSS","Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kamil-abzalov.com\/videouroki\/html-css\/skeleton-css-framework\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/skeleton-css-framework\/","url":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/skeleton-css-framework\/","name":"Skeleton CSS framework - Kamil Abzalov's blog","isPartOf":{"@id":"https:\/\/kamil-abzalov.com\/#website"},"datePublished":"2017-08-07T18:40:20+00:00","dateModified":"2020-04-08T18:36:09+00:00","author":{"@id":"https:\/\/kamil-abzalov.com\/#\/schema\/person\/9c53360f21b83306ba40c2231573c600"},"description":"In this lesson we'll discuss skeleton. Skeleton CSS sis ready-to-use css classes for fast responsive design creating.","breadcrumb":{"@id":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/skeleton-css-framework\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kamil-abzalov.com\/videouroki\/html-css\/skeleton-css-framework\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kamil-abzalov.com\/videouroki\/html-css\/skeleton-css-framework\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430","item":"https:\/\/kamil-abzalov.com\/en\/"},{"@type":"ListItem","position":2,"name":"Skeleton CSS framework"}]},{"@type":"WebSite","@id":"https:\/\/kamil-abzalov.com\/#website","url":"https:\/\/kamil-abzalov.com\/","name":"\u0441\u0430\u0439\u0442 \u041a\u0430\u043c\u0438\u043b\u044f \u0410\u0431\u0437\u0430\u043b\u043e\u0432\u0430","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kamil-abzalov.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/kamil-abzalov.com\/#\/schema\/person\/9c53360f21b83306ba40c2231573c600","name":"Kamil' Abzalov","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3ad2daebcb3a4d03f8573b49054a003cd26a151ecc58ccfccc75b823131d1ead?s=96&d=mm&r=g","caption":"Kamil' Abzalov"},"sameAs":["https:\/\/kamil-abzalov.com\/","https:\/\/www.facebook.com\/kamabzalov","https:\/\/www.linkedin.com\/in\/kamabzalov","https:\/\/x.com\/kamabzalov","https:\/\/www.youtube.com\/user\/kamabzalov"]}]}},"_links":{"self":[{"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/posts\/3239","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/comments?post=3239"}],"version-history":[{"count":8,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/posts\/3239\/revisions"}],"predecessor-version":[{"id":31784,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/posts\/3239\/revisions\/31784"}],"wp:attachment":[{"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/media?parent=3239"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/categories?post=3239"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kamil-abzalov.com\/en\/wp-json\/wp\/v2\/tags?post=3239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}