Skip to content

Vallefor/23g

Repository files navigation

Сетка 23g

Установка через composer

И сетка и набор микро-классов не включены в список composer репозиториев, по этому придется их подключить вручную:

{
	"repositories": [
		{
			"type": "git",
			"url": "https://github.com/Vallefor/23g.git"
		},
		{
			"type": "git",
			"url": "https://github.com/Vallefor/css-framework.git"
		}

	],
    "require": {
		"upriver/23g":				"2.0.*",
		"upriver/css-framework":	"1.0.*"
    }
}

Подключение CSS для EVA CMS:

	<link type="text/css" href="<?=evaLink::getEva()->addModTimeToPath("/vendor/upriver/23g/center/grid.css")?>" rel="stylesheet" />

    <link type="text/css" href="<?=evaLink::getEva()->addModTimeToPath("/vendor/upriver/23g/center/s-grid-center.css")?>" rel="stylesheet" />
    <link type="text/css" media="screen and (min-width: 768px)" href="<?=evaLink::getEva()->addModTimeToPath("/vendor/upriver/23g/center/m-grid-center.css")?>"  rel="stylesheet" />
    <link type="text/css" media="screen and (min-width: 1024px)" href="<?=evaLink::getEva()->addModTimeToPath("/vendor/upriver/23g/center/h-grid-center.css")?>"  rel="stylesheet" />
    
    <link type="text/css" href="<?=evaLink::getEva()->addModTimeToPath("/vendor/upriver/23g/general/s-add.css")?>" rel="stylesheet" />
    <link type="text/css" media="screen and (min-width: 768px)" href="<?=evaLink::getEva()->addModTimeToPath("/vendor/upriver/23g/general/m-add.css")?>"  rel="stylesheet" />
    <link type="text/css" media="screen and (min-width: 1024px)" href="<?=evaLink::getEva()->addModTimeToPath("/vendor/upriver/23g/general/h-add.css")?>"  rel="stylesheet" />
    
    <link type="text/css" media="screen and (max-width: 767px)" href="<?=evaLink::getEva()->addModTimeToPath("/vendor/upriver/23g/general/invert-s-grid-center.css")?>"  rel="stylesheet" />
    <link type="text/css" media="screen and (max-width: 1023px) and (min-width: 768px)" href="<?=evaLink::getEva()->addModTimeToPath("/vendor/upriver/23g/general/invert-m-grid-center.css")?>"  rel="stylesheet" />
    <link type="text/css" media="screen and (min-width: 1024px)" href="<?=evaLink::getEva()->addModTimeToPath("/vendor/upriver/23g/general/invert-h-grid-center.css")?>"  rel="stylesheet" />

или

	<link type="text/css" href="<?=evaLink::getEva()->addModTimeToPath("/vendor/upriver/23g/23g-center.css");?>" rel="stylesheet" />

Подключение CSS в обычном режиме

    <link type="text/css" href="/vendor/upriver/23g/center/s-grid-center.css" rel="stylesheet" />
    <link type="text/css" media="screen and (min-width: 768px)" href="/vendor/upriver/23g/center/m-grid-center.css"  rel="stylesheet" />
    <link type="text/css" media="screen and (min-width: 1024px)" href="/vendor/upriver/23g/center/h-grid-center.css"  rel="stylesheet" />
    
    <link type="text/css" href="/vendor/upriver/23g/general/s-add.css" rel="stylesheet" />
    <link type="text/css" media="screen and (min-width: 768px)" href="/vendor/upriver/23g/general/m-add.css"  rel="stylesheet" />
    <link type="text/css" media="screen and (min-width: 1024px)" href="/vendor/upriver/23g/general/h-add.css"  rel="stylesheet" />
    
    <link type="text/css" media="screen and (max-width: 767px)" href="/vendor/upriver/23g/general/invert-s-grid-center.css"  rel="stylesheet" />
    <link type="text/css" media="screen and (max-width: 1023px) and (min-width: 768px)" href="/vendor/upriver/23g/general/invert-m-grid-center.css"  rel="stylesheet" />
    <link type="text/css" media="screen and (min-width: 1024px)" href="/vendor/upriver/23g/general/invert-h-grid-center.css"  rel="stylesheet" />

или

	<link type="text/css" href="/vendor/upriver/23g/23g-center.css" rel="stylesheet" />

Инициализация

Необходимо открыть 3 дива:

<div class="first">
    <div class="second">
        <div class="third">
            <!-- место для колонок -->
            <div class="cb"></div>
        </div>
    </div>
</div>

Внутри можно использовать колонки. У каждой колонки должен быть класс column

    <div class="column"></div>

Перед закрывающимся .third обязательно нужно исполькловать clear:both; Это связано с тем, что все колонки имеют свойство float: left;

Список микро-классов можно посмотреть тут: https://github.com/Vallefor/css-framework/blob/master/css/framework.css

Префиксы

s - small - маленький экран (смартфоны, ширина < 768 пикселей)

m - medium - средний экран (портретный режим планшета, ширина: 768-1023)

h - high - большой экран (экран десктоп компьютера или ландшафтный режим планшета, ширина >= 1024)

    <div class="column s-width-23 m-width-11 h-width-7"></div>

В данном примере, колонка будет иметь ширину 23 колонки на смартфоне, 11 колонок на портретном режиме планшета и 7 колонок, на мониторе компьютера.

Нужно иметь ввиду, что классы с префиксами загружаются по очереди. То есть на самом большом экране, по очереди сработают все префиксы и останется активным последний. Если колонка должна быть шириной в 23 колонки на всех экранах, достаточно использовать только самый первый префикс:

    <div class="column s-width-23"></div>

Запрещается давать колонке дополнительные паддинги или марджины любыми средствами - это собьет сетку, если нужны дополнительные отступы - используйте внутренний div:

    <div class="column s-width-23">
        <div style="margin:20px;"></div>
    </div>

Сдвиг колонок

Для сдвига колонок используеются классы вида [prefix]-push-[num], например m-push-12 - сдвиг колорннки, на 12 колонок при размере экрана medium.

Для того, чтоб отобразить на экране 2 одинаковых колонки, вторую колонку нужно сдвинуть на 11 колонок + 1 колонка на отступ. Получаем:

<div class="first">
    <div class="second">
        <div class="third">
            <div class="column s-width-11 s-push-0"></div>
            <div class="column s-width-11 s-push-12"></div>
            <div class="cb"></div>
        </div>
    </div>
</div>

invert префиксы

invert префиксы, в отличае от обычных, сработают только на определенном размере монитора. Например:

    <div class="invert-m-cb"></div>

clear:both; - сработает только при разрешении экрана - medium.

invert-префиксы можно комбинировать

    <div class="invert-m-cb invert-s-cb"></div>

clear:both; - сработает только при разрешении экрана - medium и small.

Набор готовых решений

6 одинаковых колонок

<div class="first">
    <div class="second">
        <div class="third">
            <div class="column s-width-11 s-push-0 m-width-7 h-width-3"> 1 </div>
            <div class="column s-width-11 s-push-12 m-width-7 m-push-8 h-width-3 h-push-4"> 2 </div>
            <div class="invert-s-cb"></div>
            <div class="column s-width-11 s-push-0 m-width-7 m-push-16 h-push-3 h-push-8"> 3 </div>
            <div class="invert-s-cb invert-m-cb"></div>
            <div class="column s-width-11 s-push-12 m-width-7 h-width-3 h-push-12"> 4 </div>
            <div class="invert-s-cb"></div>
            <div class="column s-width-11 s-push-0 m-width-7 m-push-8 h-width-3 h-push-16"> 5 </div>
            <div class="column s-width-11 s-push-12 m-width-7 m-push-16 h-width-3 h-push-20"> 6 </div>
            <div class="cb"></div>
        </div>
    </div>
</div>

4 одинаковых колонки

<div class="first">
    <div class="second">
        <div class="third">
            <div class="column s-width-23 s-push-0 m-width-11 h-width-5"></div>
            <div class="invert-s-cb"></div>
            <div class="column s-width-23 s-push-0 m-width-11 m-push-12 h-width-5 h-push-6"></div>
            <div class="invert-s-cb invert-m-cb"></div>
            <div class="column s-width-23 s-push-0 m-width-11 h-width-5 h-push-12"></div>
            <div class="invert-s-cb invert-m-cb"></div>
            <div class="column s-width-23 s-push-0 m-width-11 m-push-12 h-width-5 h-push-18"></div>
            <div class="cb"></div>
        </div>
    </div>
</div>

3 одинаковых колонки

<div class="first">
    <div class="second">
        <div class="third">
            <div class="column s-width-23 s-push-0 m-width-11 h-width-7"></div>
            <div class="invert-s-cb"></div>
            <div class="column s-width-23 s-push-0 m-width-11 m-push-12 h-width-7 h-push-8"></div>
            <div class="invert-s-cb invert-m-cb"></div>
            <div class="column s-width-23 s-push-0 m-width-11 m-push-6 h-width-7 h-push-16"></div>
            <div class="cb"></div>
        </div>
    </div>
</div>
<div class="first">
    <div class="second">
        <div class="third h-3-in-row m-2-in-row s-1-in-row">
            <div class="column"></div>
            <div class="column"></div>
            <div class="column"></div>
            <div class="column"></div>
			<div class="column"></div>
			<div class="column"></div>
            <div class="cb"></div>
        </div>
    </div>
</div>

Фон на несколько колонок

<div class="first">
    <div class="second">
        <div class="third">
            <div class="pa h100 column s-width-11" style="background: #afafaf;"></div>
            <div class="column s-width-5 pr">
                text
            </div>
            <div class="column s-width-5 s-push-11 pr">
                text
            </div>
            <div class="cb"></div>
        </div>
    </div>
</div>

Колонки встык

Для этого нужно добавить любому родительскому элементу класс [s,m,h]-grid-to-[2-5], например

  • s-grid-to-2 - сделает 2 одинаковые колоки, шириной по 50% (начиная с размера s)
  • m-grid-to-4 - сделает 4 одинаковые колоки, шириной по 25% (начиная с размера m)
<div class="first">
    <div class="second">
        <div class="third s-grid-to-2 m-grid-to-4">
            <div class="column"></div>
            <div class="column"></div>
            <div class="column"></div>
        </div>
    </div>
</div>

Так же, допустимо делать такие колонки, без инициализации сетки, но в этом случае, класс column, нужно заменить на fullColumn

<div class="s-grid-to-2 m-grid-to-4">
    <div class="fullColumn"></div>
    <div class="fullColumn"></div>
    <div class="fullColumn"></div>
</div>

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages