Оцените верстку / Kappe

[progressive]

Репозиторий на GitHub

Сборка

 

Коллеги, доброго времени суток! Оцените качество верстки, очень интересна критика, так как это моя первая публичная демонстрация.

Верстка бесплатного макета под WordPress.

 

[SelenIT]

Первое, за что зацепился взгляд — при высоте экрана меньше 900px (т.е. на подавляющем большинстве ноутбуков) совсем не видны нижние ссылки левого меню. Нужно как-то сделать его адаптивным по высоте, что ли.

[li4e]

На мониторе(1024х768) режется контент по горизонтали.
http://joxi.ru/Y2Lq4gyCLJp5A6.jpg

[progressive]

Первое, за что зацепился взгляд — при высоте экрана меньше 900px (т.е. на подавляющем большинстве ноутбуков) совсем не видны нижние ссылки левого меню. Нужно как-то сделать его адаптивным по высоте, что ли.

 

На мониторе(1024х768) режется контент по горизонтали.

http://joxi.ru/Y2Lq4gyCLJp5A6.jpg

 

Исправил

[vladmih]

http://take.ms/xlBNj

Как по мне, то более логичнее было бы вставить внутрь блок которым можно было бы управлять на js через width, а не бэкграундом...

[progressive]

А чем мой вариант плох? 

 

У меня примесь

.progress-bar(@percent) {	background: #e2e2e2;	background: -moz-linear-gradient(left,  #e2e2e2 0%, #e2e2e2 @percent, #ffffff @percent, #ffffff 100%);	background: -webkit-linear-gradient(left,  #e2e2e2 0%,#e2e2e2 @percent,#ffffff @percent,#ffffff 100%);	background: linear-gradient(to right,  #e2e2e2 0%,#e2e2e2 @percent,#ffffff @percent,#ffffff 100%);	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#ffffff',GradientType=1 );}

И в нужном месте я вызываю ее при при помощи 

.skill {	&-design       {.progress-bar(89%);}	&-development  {.progress-bar(97%);}	&-plugins      {.progress-bar(85%);}	&-frontend     {.progress-bar(75%);}}

[vladmih]

Хотя бы в том что, скомпилирует он в это:
.skill-design {

градиент

}
.skill-development {

градиент

}
и т.д.
А это лишние строки кода в конечной таблице стилей.

А терь допустим нужно запилить прогресс в реальном времени на js:

$('что-то').css({и тут лента стилей с градиентом где будет какая-то переменная которая подставит процент})

или же

<div>
     <div id=inner></div>
</div>
$('#inner').width(процент)
где inner это есть блок, который меняет свою ширину, а в него хоть цвет хоть градент, хоть что.

В профите у нас экономия строчек в css и js, и более понятное строение прогресс бара


http://take.ms/wVN8dэто вообще такой костылище который был актуальный лет 6 назад...
Полоску можно было бы сделать через псевдо, сделать две колонки через table-cell, flex в конце концов...

Есть много способов вытянуть колонки, но не так же...

 

Edited December 21, 2015 by vladmih