Skip to content

Vallefor/23g

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 

Сетка 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