Блоги

Блоги сайта

  1. Блог HTMLforum.io

    • 3
      записи
    • 0
      комментариев
    • 955
      просмотров

    Последние записи

    klierik
    Последняя запись

    ga_6-11-2018.png

    HTMLforum.io — крупнейшее сообщество по HTML вёрстке в СНГ.

    Целевая аудитория

    Front-end специалисты, возраст 18-34 лет из России, Украины, Республики Беларусь и стран СНГ.

    Почему с нами выгодно

    Идеальное место для Вашей рекламной кампании по обучению (онлайн-курсов, мастер-класов, семинаров, тренингов), предоставлению услуг (дизайн, хостинг, создание и продвижение сайтов) и поиску персонала.

    Наши посетители — уникальная аудитория front-end разработчиков, которые намерены рости профессионально.

    Обход блокировок

    Размещённые на HTMLforum.io рекламные баннера не блокируются такими известными расширениями, как AdBlock, uBlock и прочее.

    Виды рекламы

    Баннерная реклама

    Размещение баннеров (показы или клики) на страницах сообщества:

    • в шапке
    • в правой колонке сайта
    • после первого сообщения в каждой теме

    Примеры размещения

    Скрытый текст

    header_50k_desktop_995x125.png
    в шапке

    sidebar_50k_desktop_295x295.png
    в правой колонке сайта

    topic_50k_desktop_995x125.png
    после первого сообщения в каждой теме

     

    Размерная сетка.

    В шапке и теме:

    • desktop: 995x125px
    • tablet: 738x125px
    • mobile: 716x95px

    В сайдбаре

    • desktop: 295x295px
    • tablet: 738x125px
    • mobile: 716x95px

    Примеры

    Скрытый текст

    Desktop:
    50k_desktop_995x125.png

    Tablet:
    50k_tablet_738x125.png

    Mobile:
    50k_mobile_716x95.png

    Desktop sidebar:
    50k_sidebar_295x295_desktop.png

    Форматы изображения: jpeg, jpe, jpg, png, gif

    Разместить рекламный баннер

    Реклама событий

    Размещение в календаре "События партнёров" и отображение анонса в правой части сайта.

    Скрытый текст

    calendar_events.png

    calendar-events_sidebar.png

    Разместить событие в календаре

    Публикация услуг и сервисов, мастер-классов, курсов, уроков, вебинаров

    Публикация тем в разделе "Коммерческие услуги"

    Скрытый текст

    commercial-services.png

    Разместить тему

  2. ℹ️ Статья не завершена, дополняется по мере реализации проекта.

    0. Предисловие

    И так, когда у нас готова основа проекта (сборщик и организована структура) можно приступать к вёрстке.

    ℹ️ Вообще, как правило, и сборщик и структура проекта организовываются во время его разработки. Особенно это касается тех ситуаций, когда разработчику впервые ставят задачу на реализацию большого кол-ва вёрстки (от 100 и более часов на вёрстку макетов). Тогда и появляется надобность в использовании инструментом по сборке проекта. А количество стилей настолько велико, что хранить в одном файле крайне затруднительно.
    В статье расказывается как структурировать эти данные таким образом, что бы и разработчик, и другие участники команды, могли с лёгкостью читать, поддерживать и развивать изначально написанный "костяк". Спустя несколько лет грамотно организованная структура под конкретную задачу сильно упрощает поддержку кода и минимизирет затраты на рефакторинг кода (тем самым понижает стоимость разработки).

    Рабочая ветка:

    $ git checkout 2.0-html-assets

    Макет: Assets/Atoms.png

    Скрытый текст

    Atoms.png

    Как правило, такой макет создаётся на протяжении создания дизайна дизайнером. Этот макет содержит как простые так и сложные элементы. Когда я выполнял работу по данному проекту этого макета ещё не было, — он появился лишь к концу выполнения

    Ну что же — ближе к делу!

    1. Создание Assets

    И так, на "первых порах" мы начнём разработку с создания вайла с типовыми элементами. Но, мы не будем создавать сразу все, а лишь только основные простые (текст, кнопки, прочее). И по мере разработки данный файл будет дополнятся недостающими элементами проекта.

    В конце концов этот шаблон будет содержать приблизительно то же самое что и макет.

    1.1 Создание файлов

    Создаём html файл

    templates/assets.html

    и SCSS файл, который будет отвечать этому блоку

    assets/scss/_assets.scss

    с исходным содержимым

    .assets {
    	//
    }

    и не забудем импортировать этот файл стилей в общие стили в "styles.scss"

    @import "assets";

    1.2 Написание HTML

    Следующим шагом давайте наполним наш html-файл основным форматированием и простыми элементами, которые присутствуют в Assets.

    ℹ️ Непосредственно сам HTML код я не буду сюда выкладыввать, так как особого смысла в этом нет. Весь код доступен в репозитории.

    1.3 Написание стилей

    1.3.1 Подключение кастомных шрифтов

    В качестве основного шрифта дизайнер использовал Rubik из Google Fonts. Через конфигуратор я выставил значения жирности 400, 400i, 500, 500i и добавил Кирилицу:

    <link href="https://fonts.googleapis.com/css?family=Rubik:400,400i,500,500i&amp;subset=cyrillic" rel="stylesheet">

    ℹ️ Данный подход подключения шрифта не является оптимизированным, но, пока что, нет задачи оптимизировать загрузку шрифтов. Потому будем его подключать "как есть".

    Далее следует указать использоавние данного шрифта в проекте. Для этого в файле конфигуратора (assets/scss/config/variables.scss) добавил следующие строки:

    // Fonts
    $theme-font-family-base:			'Rubik' !default;

    А теперь надо применить эту настройку в Bootstrap. Для этого откроем файл переменных Bootstrap (assets/scss/vendor/bootstrap/_variables.scss) и добавим следующее:

    // Fonts
    $font-family-base:            $theme-font-family-base, $font-family-sans-serif;

    Пересобираем стили и смотрим удачное применение кастомного шрифта в проекте.

    1.3.2 Типография

    Есть ряд элементов которые имеют стандартные стили во всём проекте. Но, так как нами изначально был подключен Bootstrap то сейчас стилизация этих элементов не соответствует макету. Это поправимое дело и его легко исправить.

    Для начала внесём изменения для заголовов H1-H6, добавив соответствующие значения перенменных для них в файл "bootstrap/_variables.scss". Выглядит это так:

    $h1-font-size:                $font-size-base * 3.5;
    $h2-font-size:                $font-size-base * 1.75;
    $h3-font-size:                $font-size-base * 1.625;
    $h4-font-size:                $font-size-base * 1.5;
    $h5-font-size:                $font-size-base * 1.125;
    $h6-font-size:                $font-size-base;

    Но, мы так же обратим внимание на то что каждый загловок, согласно макета, имеет свой "line-height". А H4 — "font-weight: 400;". Что бы внести эти изменения в проект мы создим файл "bootstrap/_type.scss" и внесём изменения:

    Скрытый текст
    
    //
    // Headings
    //
    
    h1,
    .h1 {
    	line-height: 1.14;
    }
    
    h2,
    .h2 {
    	line-height: 1.29;
    }
    
    h3,
    .h3 {
    	font-weight: 400;
    	line-height: 1.38;
    }
    
    h4,
    .h4 {
    	line-height: 1.17;
    }
    
    h5,
    .h5 {
    	line-height: 1.56;
    }
    
    h6,
    .h6 {
    	line-height: 1.5;
    }

     

    А так же импортируем эти стили в файле "bootstrap/bootstrap.scss" следующими строками в самом конце файла:

    // Custom Updates
    //
    @import "type";

    1.3.3 Цвета

    Цвета — это не отъемлемая часть дизайна, которая всегда присутвует в вёрстке. Их множество может быть, условно, безконечным.
    Под разные проекты конфигурировать палитру цветом предстоит индивидуально, так как задачи разные. У Вас может быть как не большая конфигурация цветов, из 10-15 штук, так и более сложный варинат — полноценная политра для мультитем, со своим индивидуальным набором цветов.

    В рамках данного обучения нет задачи создавать гибкую настройку по цветам, так как не предполагается их часто и\или кардинально менять.

    Палитру цветов для всего проекта мы опишем в файле "assets/scss/config/variables.scss" в разделе "// Colors". Цвета, для начала, возьмём из "Assets/Assets.png". Выглядеть это будет приблизительно вот так:

    Скрытый текст
    
    // Colors
    $color-primary: 					#00C9C9 !default;
    $color-secondary: 					#32343d !default;
    
    $color-black:						#000 !default;
    $color-orange:						#F3AE00 !default;
    $color-pink-red:					#FF5E5B !default;
    $color-green:						#66BB6A !default;
    $color-blue:						#39579B !default;
    
    $color-grey:						#7E858D !default;
    $color-grey2:						#7C7C7C !default;
    $color-grey3:						#B1B1B1 !default;
    $color-grey4:						#D4D4D4 !default;
    $color-grey5:						#F7F9FA !default;
    $color-grey-dark:					#33343D !default;
    
    $color-gradient-start:				$color-primary !default;
    $color-gradient-end:				#00B5D5 !default;
    
    $color-btn-primary-start:			$color-gradient-start !default;
    $color-btn-primary-end:				$color-gradient-end !default;
    $color-btn-primary_hover:			#00a6c4 !default;
    
    $color-turquoise-blue:				#00c9c9 !default;
    $color-turquoise-blue-two:			#00b5d5 !default;
    $color-charcoal-grey:				#32343d !default;
    $color-steel-grey:					#7e858d !default;
    $color-white:						#fff !default;

     

    ℹ️ Несколько раз я пытался как-то каталогизировать  по смыслу цветовую палитру, но универсального варианта найти мне не удалось. В тех или иных случаях целесообразнее тот или иной вариант. Однажды я разрабатывал проэкт, который предполагал наличие разных тем со своей палитрой. Конфиг цветов был следующим:

    Скрытый текст
    
    // Global Colors
    $theme-color-1:			#292929 !default;
    $theme-color-2:			#8a0913 !default;
    $theme-color-3:			#e4dfcc !default;
    $theme-color-4:			#fafafa !default;
    $theme-color-5:			#eee !default;
    $theme-color-6:			#959494 !default;
    $theme-color-7:			$white !default;
    $theme-color-8:			#f5f5f5 !default;
    $theme-color-9:			#a9222d !default;
    $theme-color-10:		$theme-success !default;
    $theme-color-11:		#8c8c8c !default;
    $theme-color-12:		#d8d8d8 !default;
    $theme-color-13:		#191919 !default;
    $theme-color-14:		#b01934 !default;
    $theme-color-15:		#9c9991 !default;
    $theme-color-16:		#ededed !default;
    $theme-color-17:		#bf5a44 !default;
    $theme-color-18:		#faf9f3 !default;
    $theme-color-19:		#e2e2e2 !default;
    $theme-color-20:		#d8d5c8 !default;
    $theme-color-21:		#8c8b8b !default;
    $theme-color-22:		#f9f7f0 !default;
    $theme-color-23:		#262624 !default;
    $theme-color-24:		#ddf4ca !default;
    $theme-color-25:		$theme-primary !default;
    
    ...

    Это не лучший вариант, который я создавал, так как я не приветствую индексированное именование. Но, этот подход явно проще поддерживать при большом количестве цветов (в этом проекте их было около 100)

    И так, мы начали создавать палитру цветов в конфигураторе. Теперь на примере Bootstrap давайте применим эту палитру к фреймворку.

    Для этого внесём изменения в файл "assets/scss/vendor/bootstrap/_variables.scss"

    //
    // Color system
    //
    
    $primary:			$color-primary;
    $secondary:			$color-secondary;
    $warning:			$color-warning;
    
    $theme-colors: ();
    $theme-colors: map-merge((
    	"primary":    $primary,
    	"secondary":  $secondary,
    	"success":    $success,
    	"info":       $info,
    	"warning":    $warning,
    	"danger":     $danger,
    	"light":      $light,
    	"dark":       $dark
    ), $theme-colors);

    Этими стилями мы переопределили основные цветы темы. Остальные цвета сохранили свои значения, которые идут изначально во фреймворке.

    ℹ️ Хочу обратить Ваше внимание на то что я не рекомендую добавлять в файл ("assets/scss/vendor/bootstrap/_variables.scss"), который отвечает за переопределение переменных Bootstrap, кастомные переменные. В этом файле я храню только изменения основных переменных. А вот в основном конфиге все другие переменные, которые используются в проекте.

    Таким образом в шаблоне "templates/assets.html" в тот же момент перекрасились кнопки

    Скрытый текст

    Assets 🔊 2018-06-15 17-22-32.png

    Как можно заметить "Primary Button" имеет однотонный фоновый цвет, в отличии от того что в дизайне — градиент. Всё потому что конфигурация фреймворка предполагает использовать общую конфигурацию Bootstrap для всех элементов. Плохого в этом ничего нет, конечно же, но нам, в рамках разработки, это не подходит. Давайте перекрасим кнопку градиентом.

    1.3.4 Стилизация элементов Bootstrap (на примере кнопок)

    Следующей задачей мы перерисуем кнопки фреймворка и сделаем их такими, какие они представленны в макете.

    Создадим файлы:

    • "assets/scss/vendor/bootstrap/_buttons.scss"
    • "assets/scss/vendor/bootstrap/_mixins.scss"
    • "assets/scss/vendor/bootstrap/mixins/_buttons.scss"

    Далее импортируем их в "assets/scss/vendor/bootstrap/bootstrap.scss"

    // Custom Updates
    //
    @import "mixins";
    @import "type";
    @import "buttons";

    А так же давайте импортируем файл с миксином в "assets/scss/vendor/bootstrap/_mixins.scss"

    @import "mixins/buttons";

    ℹ️ Так как часть кнопок имеет border, а часть нет (что в свою очередь влияет на размер кнопки), мы напишем небольшой миксин, который будет выравнивать высоту для обоих случаев.

    Давайте добавим в файл "assets/scss/vendor/bootstrap/mixins/_buttons.scss" следующий миксин:

    Скрытый текст
    
    @mixin button-no-border() {
    	padding-top: ($btn-padding-y + 1);
    	padding-bottom: ($btn-padding-y + 1);
    
    	border: 0;
    
    	&.btn-lg {
    		padding-top: ($btn-padding-y-lg + 1);
    		padding-bottom: ($btn-padding-y-lg + 1);
    	}
    
    	&.btn-sm {
    		padding-top: ($btn-padding-y-sm + 1);
    		padding-bottom: ($btn-padding-y-sm + 1);
    	}
    }

     

    Далее в "_buttons.scss" давайте добавим стили, которые изменят вид кнопок под требуемый нам (так же учтём и ":hover", ":focus" состояния)

    Скрытый текст
    
    //
    // Base styles
    //
    .btn {
    	@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size-base, $btn-line-height, $btn-border-radius);
    }
    
    //
    // Alternate buttons
    //
    .btn-primary {
    	@include gradient-x($btn-primary-bg-start, $btn-primary-bg-end);
    	@include button-no-border();
    
    	@include hover-focus {
    		@include gradient-x($btn-primary-bg-end, $btn-primary-bg-end);
    	}
    }
    
    .btn-secondary {
    	@include button-variant($btn-secondary-bg, $btn-secondary-border);
    
    	@include hover-focus {
    		background: $btn-secondary-bg_hover;
    	}
    }
    
    .btn-info {
    	@include button-variant($btn-info-bg, #fff);
    	@include button-no-border();
    
    	@include hover-focus {
    		background: $btn-info-bg_hover;
    	}
    }
    
    .btn-warning {
    	@include button-no-border();
    	box-shadow: $btn-warning-shadow;
    
    
    	@include hover-focus {
    		background: $btn-warning-bg_hover;
    	}
    }
    
    //
    // Button Sizes
    //
    
    .btn-lg {
    	@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
    }
    
    .btn-sm {
    	@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
    }

     

    ℹ️ В данном решении используются не только переменные Bootstrap, но так же и кастомные, которые описанны в файле "assets/scss/config/variables.scss".

    Что же касается миксинов, которые используются в данном файле, то они были взяты непосредственно из кодовой базы Bootstrap — "node_modules/bootstrap/scss/mixins/"

    Теперь можно посмотреть что у нас в итоге получилось после наших модификаций

    Рабочая ветка:

    $ git checkout tags/2.0-html-assets-v1.0 -b 2.0-html-assets-v1.0
    Скрытый текст

    screencapture-localhost-3000-templates-assets-html-2018-06-18-18_24_31.png

    Добра и удачи 🙏

  3. Привет, друзья.

    Заметка может быть интересна front-end разработчикам, которые начинают изучение Magento 2 CMS (одной из самых популярных систем управления интернет-магазинами). Предполагается что разработка ведётся в рамках кастомной темы под M2.

    Если говорить о самой задаче то, конечно же, спрятать уведомление после указанного времени особого труда не составит. Вопрос скорее в другом — как это реализовать в рамках Magento2, где властвует requirejs и несколько иная, по сравнению с Magento1, иерархия директорий?

    Для выполнения поставленной задачи давай воспользуемся html-файлом, который размещается по пути:

    magento/vendor/magento/module-theme/view/frontend/templates/messages.phtml

    с содержимым:

    Скрытый текст
    
    <?php
    /**
     * Copyright © 2016 Magento. All rights reserved.
     * See COPYING.txt for license details.
     */
    ?>
    <div data-bind="scope: 'messages'">
        <div data-bind="foreach: { data: cookieMessages, as: 'message' }" class="messages">
            <div data-bind="attr: {
                class: 'message-' + message.type + ' ' + message.type + ' message',
                'data-ui-id': 'message-' + message.type
            }">
                <div data-bind="html: message.text"></div>
            </div>
        </div>
        <div data-bind="foreach: { data: messages().messages, as: 'message' }" class="messages">
            <div data-bind="attr: {
                class: 'message-' + message.type + ' ' + message.type + ' message',
                'data-ui-id': 'message-' + message.type
            }">
                <div data-bind="html: message.text"></div>
            </div>
        </div>
    </div>
    <script type="text/x-magento-init">
        {
            "*": {
                "Magento_Ui/js/core/app": {
                    "components": {
                            "messages": {
                                "component": "Magento_Theme/js/view/messages"
                            }
                        }
                    }
                }
        }
    </script>

     

    Давай скопируем его в кастомную тему по адресу:

    magento/app/design/frontend/HTMLForum/default/Magento_Theme/templates/messages.phtml

    где "HTMLForum/default" — это "Vendor/theme"

    В рамках задачи нам требуется спрятать системное уведомление через заданное кол-во времени. Для этого можно воспользоваться колбеком knockoutjs.com — afterRender().

    Мне кажется правильнее было бы выполнить Messages.extend({}) в новом компоненте, но мои попытке не увенчались успехом на момент написания статьи. Я внесу обновления в текущую заметку когда буду знать более корректный путь для реализации поставленной задачи.

    В M2 существуют 2 варианта вывода уведомлений:

    • В результате перезагрузки страницы (на пример, добавление продукта на странице продукта)
    • В результате ajax-запроса (на пример, добавление продукта на странице каталога)

    В вышеуказанном шаблоне содержатся оба варианта. Пример ф-ии которая будет вызвана после рендеринга уведомления:

    afterRender: function(e){
        setTimeout(function () {
            jQuery(e).fadeOut()
        }, 5000);
    }

    где "5000" — это время ожидания в мс.

    Её мы используем для обоих вариантов следующим образом:

    <?php
    /**
     * Copyright © 2016 Magento. All rights reserved.
     * See COPYING.txt for license details.
     */
    ?>
    <div data-bind="scope: 'messages'">
        <div data-bind="foreach: { data: cookieMessages, as: 'message' }" class="messages">
            <div data-bind="attr: {
                class: 'message-' + message.type + ' ' + message.type + ' message',
                'data-ui-id': 'message-' + message.type
            },
            afterRender: function(e){
                setTimeout(function () {
                    jQuery(e).fadeOut()
                }, 5000);
            }">
                <div data-bind="html: message.text"></div>
            </div>
        </div>
        <div data-bind="foreach: { data: messages().messages, as: 'message' }" class="messages">
            <div data-bind="attr: {
                class: 'message-' + message.type + ' ' + message.type + ' message',
                'data-ui-id': 'message-' + message.type
            },
            afterRender: function(e){
                setTimeout(function () {
                    jQuery(e).fadeOut()
                }, 5000);
            }
            ">
                <div data-bind="html: message.text"></div>
            </div>
        </div>
    </div>
    <script type="text/x-magento-init">
        {
            "*": {
                "Magento_Ui/js/core/app": {
                    "components": {
                            "messages": {
                                "component": "Magento_Theme/js/view/messages"
                            }
                        }
                    }
                }
        }
    </script>

    Вот, собственно, и всё.

    Почисти кеш, запусти деплой (или пересоздай симлинки + билд стилей темы через Grunt) и обнови страницу.