@vrazrabotchik

Поможете с реализацией своего css фреймворка?

Здравствуйте, решил начать учиться понимать как реализуется фреймворки на подобии bootstrapa, вроде сетку создал и она работает на ура, проблема в сетках малого экрана, как в bootstrape col-xs ,когда уменьшаешь экран то блоки начинают равняться при уменьшении экрана, блок поподает вниз, собственно выложу внизу код css, попрощу его допольнить или что я сделал не так. Блогодарен за ответы.
*{margin: 0; padding: 0; box-sizing: border-box; box-sizing: -webkit-border-box; list-style: none;}
body{font: 100%/1.5em Arial,Helvetica,sans-serif;color: #000; }
.container{width: 990px; max-width: 100%; margin: 0 auto;}
.container .cols{float: left; margin: 0 0 1em; text-align: center;}
.row

.container .cols.col-1{width: 8.333333333333333%}
.container .cols.col-2{width: 16.66666666666667%}	
.container .cols.col-3{width: 25%}
.container .cols.col-4{width: 33.33333333333333%}
.container .cols.col-5{width: 41.66666666666667%}
.container .cols.col-6{width: 50%}
.container .cols.col-7{width: 58.33333333333333%}
.container .cols.col-8{width: 66.66666666666667%}
.container .cols.col-9{width: 75%}
.container .cols.col-10{width: 83.33333333333333%}
.container .cols.col-11{width: 91.66666666666667%}
.container .cols.col-12{width: 100%}


@media (min-width: 700px) {
	.cols.col-xs-1, .cols.col-xs-2, .cols.col-xs-3, .cols.col-xs-4, .cols.col-xs-5, .cols.col-xs-6, .cols.col-xs-7, .cols.col-xs-8, .cols.col-xs-9, .cols.col-xs-10, .cols.col-xs-11, .cols.col-xs-12{
		float: left;text-align: center;
	}
	.container .cols.col-xs-1{width: 8.333333333333333%}
	.container .cols.col-xs-2{width: 16.66666666666667%}	
	.container .cols.col-xs-3{width: 25%}
	.container .cols.col-xs-4{width: 33.33333333333333%}
	.container .cols.col-xs-5{width: 41.66666666666667%}
	.container .cols.col-xs-6{width: 50%}
	.container .cols.col-xs-4{width: 58.33333333333333%}
	.container .cols.col-xs-8{width: 66.66666666666667%}
	.container .cols.col-xs-9{width: 75%}
	.container .cols.col-xs-10{width: 83.33333333333333%}
	.container .cols.col-xs-11{width: 91.66666666666667%}
	.container .cols.col-xs-12{width: 100%}
}
.container:before,
.container.after,
.row:after,
.row:before,
.clear:before,
.clear:after{
	content: " ";
	display: table;
}

.container:after,
.row:after,
.clear:after{
	clear: both;
}
  • Вопрос задан
  • 587 просмотров
Решения вопроса 2
sfi0zy
@sfi0zy Куратор тега CSS
UI developer. Верстаю неверстаемое.
Тоже делал свой "фреймворк" (кстати очень полезное занятие, столько всего узнал пока делал...), там тоже есть сетка, можете познакомиться с тем, что я там натворил. Но хочу предупредить: поскольку этот проект делался в основном ради процесса, а не ради результата, там есть некоторые эксперименты и странности, но может быть примером чего-то такого.
Ответ написан
ShadowOfCasper
@ShadowOfCasper
Middle User Interface Web Developer
Чувак, сетки прошлый век. Юзай flexbox. А если и делать каркасы, то grid-layout всё на том же flexbox
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы