Если вы, как и я, решили освоить git, то скорее всего у вас возникнет желание разместить свой проект на GitHub.com для публичного доступа.
Как новичку мне было сложно понять, каким образом создать связь между репозиториями. То есть локально у нас есть набор файлов проекта. Нужно каким-то образом выложить их на гитхаб. По сути это обычное копирование, но в git это работает не так очевидно. Пробившись несколько дней, я написал свою пошаговую инструкцию для новичков.
Классы UniCSS состоят из простых css-правил. Этот фреймворк не задает UI сайта. Его задача — перенести верстку с уровня css-файла в html-код.
Смотрите. Обычно мы делаем так (простой пример):
<div class="my-top">
...
</div>
.my-top {
margin-top: 20px;
padding: 10px;
color: #FFF;
background-color: #888;
}C помощью UniCSS будет уже так:
<div class="mar20-t pad10 t-white bg-gray500"> ... </div>
То есть мы написали тот же самый код, только в HTML в виде самостоятельных классов. Если проанализировать работу верстальщика, то это постоянное переключение между css и html файлами. Здесь же мы работаем только с html. Вы удивитесь, сколько это экономит времени и насколько упрощает работу!
В данном примере .my-topкакой-то «технический» класс, не содержащий уникальных стилей. Отступы, фон, текст, ширина и прочие примитивы. При использовании UniCSS уже не требуется создавать отдельный класс блока. CSS-код будет гораздо (многократно!) меньше.
В процессе работы с Landing Page Framework постоянно возникало желание как-то унифицировать используемые css-классы. Проблема именования классов до боли знакома каждому верстальщику. Любой, даже самый примитивный, чисто «технический» блок, потребует своего уникального класса, чтобы указать стили, даже если это всего одна строчка кода.
Избыток классов порождает проблему идентификации: чем top-headerотличается от top-head2? Это знает только верстальщик.
Чтобы навести хоть какой-то порядок, стали придумывать различные методики: самая известная (хотя и очень спорная) BEM. Такой подход решает исключительно одну проблему — имя класса получает хоть какую-то осмысленность и вносит ясность для другого верстальщика, которому придется разбираться в коде в будущем.
Хотя возраст не ощущается, за это время столько воды утекло, что обращаясь к старым записям, порой не верится, что они мои. Давно задумываюсь о том, как бы переделать сайт и начать если и не с чистого листа, а хотя бы с четким разделением на «старое, уже не считается» и «новое, вот это и нужно читать». Формат блога мне не нравится. Думаю, что он уже изжил себя. И дело даже не многочисленных соцсетях (это тоже тупиковая ветка), а в том, чтобы подавать информацию в таком виде, чтобы она могла быть самодостаточной и, как следствие, легко создаваемая, легко поддерживаемая и легко обновляемая до актуального состояния.
Как книги. Взял какая понравилась, почитал, отложил. Да, в ней разделы, главы, но это всё равно отдельная цельная сущность. Если проводить аналогию, то сайт — это и есть одна книга. Например книга «Блог» для тех, кому интересны мысли автора. Книга «MaxSite CMS для чайников» будет иметь своего читателя, даже если там появится глава «Как установить телескоп на борту МКС».
Есть такое понятие «Live Reload» — это автоматическое обновление страницы в браузере, когда изменился составляющий её css-файл (html, js и т.д.). На практике это выглядит так: вебмастер внес изменения в css-файле, сохранил, браузер автоматом обновил страницу. То есть если по простому, то не нужно каждый раз нажимать кнопку «Обновить страницу» в браузере.
Чтобы реализовать Live Reload для своих задач потребуется совсем немного.
Адаптивность на сайтах на сегодняшний момент, как правило, решается единственным способом:
Посмотрите на демо-примере, где используется именно такой подход. Изменяя ширину браузера можно увидеть как меняются ячейки.
Способ достаточно простой, поэтому получил широкое распространение. Вместе с тем, очевидно, что в нем существуют большие ограничения, связанные с тем, что модель поведения блоков сетки фиксирована и не предполагает более сложной организации, например для средних экранов сделать не только резиновую ширину, но и расположить ячейки попарно «1-2» и «3-4».
Не так давно возникла задача сделать простую Landing Page (целевая страница сайта). На такой странице, как правило располагается вся необходимая информация о товаре/услуге.
Технически она создается в виде отдельного html-файла. Проблема тут только в том, что работать с «голым» HTML не очень удобно, ну и страшно не хотелось отказываться от возможностей LESS для создания css-стилей.
Ставить отдельную копию MaxSite CMS тоже не совсем разумно: ради пары страниц это явный перебор. Таким образом родился небольшой PHP-фреймворк «Landing Page Framework» специально «заточенный» для создания одиночных страниц.
Его смысл в том, чтобы выделить верстку каждой страницы в отдельный php-файл, и при этом обеспечить вебмастера привычными «плюшками».
В частности LPF может выполнять автоматическую компиляцию LESS в CSS, выполнять авторасстановку тэгов (вручную расставлять P — бр-р-р-р...), поддерживать привычный BBCode. Помимо этого будет работать ЧПУ, а также поддержка любого CSS-,JS-фреймворка. Плюс высочайшая скорость работы (при минимальной нагрузке на сервер) и не требуется база данных.
| Результаты |
Идет загрузка…