Leaderboard


Popular Content

Showing content with the highest reputation since 05/27/2018 in all areas

  1. 6 points
    Делаю аудит вашей работы: указываю на ошибки, даю практический рекомендации и делюсь решениями проверенные опытом. Обращаю Ваше внимание на неочевидные потенциальные проблемы, делюсь своим многолетним опытом, раскладываю по полочкам как работает вёрстка и как её грамотно писать. Как добавить вёрстку для оценки? Для того что бы иметь возможность оценить проделанную Вами работы, мне понадобится: Исходный код, выложенный на github, butbucket или любой другой вариант (если выкладываете в архиве то используйте zip) Предоставьте доступ к итоговому результату. Для этого идеально подойдёт pages.github.com или любой общедоступный сайт. Отпишитесь в комментарии к данной статьи и предоставьте вышеуказанные данные Что будет в итоге? Вы получите анализ по следующим критериям: вёрстка: какие ошибки допущены, каким блокам не достаточно универсальности, какие проблемы могут возникнуть в будущем, как оптимизировать структуру и поднять гибкость разметки стили: буду обращать внимание на пользование пре-процессорами, предлагать решения которые помогут поддерживать код годами структура проекта: дам рекомендации по организации файловой системы и кода в целом, буду обращать внимание на пользование современными инструментами разработчика В итоге Вы получите анализ по своей работы с точки зрения построения долгосрочных проектов, которые поддерживаются годами, поделюсь своим видением какие изменения требуется изменить что бы код не превратился в боль разработчика. ℹ️ Советую заглянуть в блог Руководство верстальщика и прочитать тему Типичные ошибки начинающего верстальщика перед публикацией работы. Решения для большинства ошибок уже изложены. Когда и где будет обзор? Обзоры выкладываться на YouTube-канале HTMLforum_io, каждый вторник. Хронометраж — ~15 минут. Стоимость участия Плановый аудит работ проводится бесплатно. Раз в неделю я выбираю интересную работу и делаю по ней обзор. Индивидуальный аудит Вы можете заказать индивидуальный аудит работы. В таком случае Вы получите полный обзор работы без ограничения по хронометражу. Я пошагово расскажу допущенные ошибки, причины их возникновения и объясню как их решить. Дам рекомендации по усовершенствованию кода и повышению его качества. Аудит будет доступен на YouTube-канале HTMLforum_io. Стоимость зависит от объёма работ. Рейт: $30/час. В стоимость входит: изучение работы и её аудит видео-запись и монтаж индивидуальная онлайн консультация со мной в формате "Вопрос. Ответ." продолжительностью 1 час. Минимальная стоимость: $60. Срок выполнения: 7 дней. Возврат средств. Если Вам не понравиться моя работа — я верну 50% стоимости аудита (в моей практике недовольных не было). Частная консультация У Вас есть возможность задать вопросы по работе и получить рекомендации, наставления, пути развития для квалифицированного роста и достижения успеха. Онлайн консультация в формате тет-а-тет. Вместе с Вами анализируем код, обсуждаем качество его исполнения, выявляем ошибки, обсуждаем пути их возникновения/решения/предупреждения. Обсудим повышения сложности работ, решение сверх-задач, создание кода для огромных проектов. Порядок действий: я предварительно изучаю Ваш код и говорю ориентировочную длительность консультации, стоимость которой оплачивается предварительно. В случае если консультация заняла меньше времени — возврат части средств. Если больше — обсуждаем индивидуально. Стоимость зависит от длительности консультации. Рейт: $50/час. Минимальная длительность: 1 час. Партнёрство Предложение отрыто для всех. Если Вы считаете себя достаточно опытным что бы уметь анализировать работу других разработчиков и давать рекомендации, — напишите мне в личку. Знаний, успехов и позитива Вам. С уважением, @klierik
  2. 2 points
    1.1 Основные требования к сборщику Сборщик проекта — это система, которая выполняет типовые задания автоматически, тем самым экономит время разработки проекта. Написанный нами сборщик (или билдер от англ. builder) должен стабильно работать в рамках проекта на протяжении всего его существования. Определимся со списком задач, которыми должден владеть сборщик: Иметь единый конфигурационный файл, в котором описываются настройки проекта и пакетов, которые участвуют в обработке ресурсов проекта Обрабатывать ресурсы проекта "на лету", после внесения в них изменений Генерировать стили проекта Генерировать prod-версию (максимальное сжатие и оптимизация) и dev-версию (без сжатия) Поддерживать Sourcemaps — для отладки стилей Поддерживать AutoPrefixer — для автоматического генерирования стилей под старые версии браузеров Поддерживать cssBase64 — для встраивания маленьких картинок (иконок размером, обычно, до 2КБ) непосредственно в CSS Поддерживать CSSO — структурная оптимизация стилей Генерировать criticalCSS (про это можно ознакомится в статье Разбираемся с критичным CSS) Автоматически организовать стили проекта. При помощи csscomb.com приводить все стили к единому стандрату форматирования, что очень удобно для ситуаций, когда над проектом работает больше одного разработчика Собирать и генерировать скрипты проекта Генерировать prod-версию (максимальное сжатие и оптимизация) и dev-версию (без сжатия) Проверять код при помощи eslint — это инструмент проверки качества написанного программного кода на JavaScript Делать конкатенацию js-фалов (собирать все файлы в один) Оптимизировать изображения, которые используются в проекте Хочу обратить внимание на то, что требования составлены из целей создавать оптимизированный код и иметь гибкий инструмент для этого. В большинстве случаев бОльшую часть из этого списка Заказчик не требует (так как это повышает стоимость проекта). Но, так как автор последние пол десятилетия работает с высоконагруженными системами, где высокие требования к клиентской оптимизации идут "из коробки", то было решено использовать именно такой подход в данном обучении. Более простую версию билдера, имея эти знания, Вы сможете создать когда угодно. А за более сложную — Вы честно потребуете больший оклад, и будуте правы :) Но, так же обращаю внимание что нет пределу совершенству в оптимизации. В рамках обучения мы будем собирать все ресурсы (JS/CSS) в один файл. Но есть методы которые позволяют асинхронно подгружать как CSS (редкий случай), так и JS (обычное явление). Если Вам интересно углубится в мир клиентской оптимизации я советую начать с просмотра лекции Виталий Фридман: Responsive Web-дизайн. Трюки и уловки (всего 1ч 40 мин но море полезной информации). 1.2 Инициализация Этот этап разработки крайне прост. Да бы не повторятся в том о чём уже было сказано в Интернетах множество раз я предлагаю посмотреть видео, в котором рассказываются шаги, которые будут проделаны на данном этапе: 1.3 Установка NPM пакетов Пакеты, которые мы будем в разработке условно поделим на 2 типа: ресурсы проекта (такие как jQuery, bootstrap, прочее) пакеты сборщика (ПО которое будет использоваться для обработки ресурсов для оптимизации, проверки кода, прочее) 1.3.1 Установка пакетов проекта Первым шагом установим пакеты, которые будут использоваться непосредственно в вёрстке: $ npm install -D jquery popper.js bootstrap 1.3.2 Установка пакетов сборщика Следующей командой установим пакеты которые будут использоваться для сборки ресурсов проекта $ npm i -D gulp-autoprefixer gulp-concat gulp-css-base64 gulp-csscomb gulp-debug gulp-if gulp-imagemin gulp-load-plugins gulp-sass gulp-sourcemaps gulp-uglify require-dir gulp-newer browser-sync gulp-notify gulp-notify through2 stream-combiner2 gulp-eslint penthouse gulp-csso gulp-babel babel-preset-latest babel-core Краткое описание предназначения устанавливаемых пакетов: 1.4 Сборщик проекта Ветка сборщика: $ git checkout 1.4-gulp-builder 1.4.1 Структура Файлы и директории которые отвечают за сборку проекта: . ├── gulp/ │ ├── .csscomb.json - файл настроек cssComb │ ├── .eslintrc - файл настроек eslint https://goo.gl/4K6TyF │ ├── config.js - файл настроек задач и пакетов Gulp │ └── tasks/ - задачи Gulp │ ├── scripts.js │ ├── server.js │ └── styles.js └── gulpfile.js - основной файл конфигурации Gulp Далее пройдём по всем файлам и обсудим что каждый делает. 1.4.2 Основной файл конфигурации Gulp Содержимое файла gulpfile.js 'use strict'; require('require-dir')('./gulp/tasks/'); const gulp = require('gulp'); // Default tasks gulp.task('default', gulp.series('styles', 'scripts')); gulp.task('dev', gulp.series('default', gulp.parallel('styles:watch', 'scripts:watch', 'server'))); Это основной файл конфигурации сборщика. Он легковеснее того, который Вы видели в Скринкасте по Gulp и вот почему... require('require-dir')('./gulp/tasks/'); Эта строка загрузки всех задачи, которые размещаются в директории "./gulp/tasks". После её выполнения будут загружены написанные нами задачи автоматически. const gulp = require('gulp'); Следующим шагом мы загружаем Gulp, так как ниже мы используем его для объявления задач // Default tasks gulp.task('default', gulp.series('styles', 'scripts')); gulp.task('dev', gulp.series('default', gulp.parallel('styles:watch', 'scripts:watch', 'server'))); А эти строки объявляют задачи, которые мы будем запускать для выполнения тех или иных операций. Первая задача "default" — это задача, которая запускается по умолчанию при запуске Gulp (если задачи для выполнения не указаны явным образом). На пример команда: $ gulp запустит те же задачи, которые будут запущенны если мы выполним: $ gulp default Значит при выполнении этой команды будут запущены задачи "styles" и "scripts", а чём нас проинформирует терминал: $ gulp [16:48:19] Using gulpfile ~/http/htdocs/aworker/aworker-education/gulpfile.js [16:48:19] Starting 'default'... [16:48:19] Starting 'styles'... [16:48:20] Finished 'styles' after 1.36 s [16:48:20] Starting 'scripts'... [16:48:21] Finished 'scripts' after 250 ms [16:48:21] Finished 'default' after 1.61 s Вторая задача "dev" будет выполнять другой набор. Для начала будут веполненны задачи, описанный в "default". Потом параллельно запустяться задачи: "styles:watch" — мотиторинг фалов стилей в ожидании изменений "scripts:watch" — мониторинг файлов скриптов в ожидании изменений "server" — запустится локально статичный веб-сервер, который будет доступен оп адресу http://localhost:3000/. А так же автоматически откроется окно с этим путём в браузере Google Chrome. Вот как это выглядит в терминале: Что бы посмотреть весь список задач которые доступны для запуска выполните команду: 1.4.3 Режим отладки Сборщик позволяет выполнять задачи как для продакшена (минимизация стилей, скриптов, картинок, прочее) так и версию для разработки. По умолчанию задачи выполняются для продакшена. Что бы запустить сборщик в режиме отладки, требуется выполнить следующую команду $ NODE_ENV=develop gulp Если требуется запустить мониторинг файлов и сервер то выполните следующее NODE_ENV=develop gulp dev 1.4.4 Файл конфигурации проекта Почти все настройки, которые мы будем использовать в задачах Gulp, для большего удобства, были вынесены в индивидуальный файл. Это позволяет использовать в задачах только переменные, значения которых определены в одном месте. Такой подход упрощает процесс конфигурации сборщика проекта. Файл размещается по адресу — "gulp/config.js". Полную версию файла Вы можете увидеть в репозитории, я лишь приведу наглядный пример как он оформлен: 1.4.5 Настройки eslint Для проверки JavaScript кода используется gulp-eslint пакет. Он требует присутствия файла настроек, согласно которых будет проверятся код. Файл размещается по адресу "gulp/.eslintrc" и содержит настройки, которые так же можно сгенерировать самостоятельно в онлайн генераторе 1.4.6 Настройки форматирования стилей CssComb Файл "gulp/.csscomb.json" отвечает за то, как будут автоматически форматироваться исходные стили проекта, приводя их к единому формату. Файл достаточно большой, выкладывать его здесь будет избыточно. Посмотрите на его содержимое в репо. Свой файл настроек CssComb можно создать в онлайн генераторе 1.4.7 Настройки Autoprefixer Согласно официальной документации gulp-autoprefixer, указать в директиве "browsers" для каких браузеров следует применять вендорные префиксы можно непосредственно в конфигурации: const gulp = require('gulp'); const autoprefixer = require('gulp-autoprefixer'); gulp.task('default', () => gulp.src('src/app.css') .pipe(autoprefixer({ browsers: ['last 2 versions'], cascade: false })) .pipe(gulp.dest('dist')) ); Но, в официальной документации Autoprefixer сказано несколько иначе: Они рекомендуют использовать или файл ".browserslistrc" (который должен лежать в корне проекта) или директиву в файле "package.json". Требуется это для того, что бы другие плагины (такие как: Babel, postcss-preset-env, eslint-plugin-compat, stylelint-no-unsupported-browser-features, postcss-normalize) так же пользовались этими настройками. Об этом рассказано на странице плагина Browserslist. По этому мы добавим эти настройки в файл package.json "browserslist": ["last 2 version", "> 5%", "iOS >= 7"] 1.4.8 Задачи Gulp Теперь давайте перейдём обсуждению непосредственно задач, которые присутствуют в сборщике проекта. ℹ️ Обращаю внимание читателя на то, что описанные ниже задачи могут быть не полностью описаны (или не все). Только те задачи и в том виде, когда автор писал эти строки. Но, скорее всего, у Вас не будет проблем в понимании как они работают и для чего созданы. В случае если что-то будет не понятно — задавайте вопросы ? 1.4.8.1 Сборка стилей Файл задачи сборки стилей расположен по адресу "gulp/tasks/styles.js". Полную версию файла Вы можете найти в репо, а тут давайте обсудим что он делает. Задача "styles" выполняет сборку стилей SCSS -> CSS. Настройки, которые используются в задачах предварительно описаны в файле "gulp/config.js" 1.4.8.2 Форматирование стилей Ещё одной важной для нас задачей будет форматирование стилей. Эта задача приведёт в порядок все стили Поясню почему "*variables*" вынесены из обработки под катом. 1.4.8.3 Создание criticalCss В нашей разработке мы так же будем генерировать criticalCss. В одной из следующих статья мы поговорим как эти стили должны использоваться а пока обсудим как их создавать. Сама задача, которая генерирует criticalCss-файл имеет мало кода: Для выполнения задачи в файле "gulp/config.js" есть список параметров, приблизительно такой: Все настройки описанны в на офф. странице в соответствующем разделе Options. Я лишь обращаю Ваше внимание одни из наиболее важных параметров: forceInclude — принимает массив, согласно которого будут добавлены стили, которые не были добавлены в criticalCss автоматически propertiesToRemove — принимает массив, согласно которого будут удалены стили из criticalCss Что же делает penthouse? Пакет создаёт виртуальное окно браузера (для этого используется puppeteer), размер которого указан в настройках (в выше приведённом примере это 1200x960). Далее penthouse проверяет какие из стилей присутствуют в этой области документа (в частности проверяет какие элементы присутствуют в области) и сохраняет их в указанном файле. Остальные стили, которые не попадают в область видимости (находятся за экраном) — не учитываются. ℹ️ Обращаю Ваше внимание на то, что зачастую в criticalCss так же не попадают стили элементов (или не полностью), которые по тем или иным причинам не отображались в момент их генерирования. Но разработчик может добавить их самостоятельно, указав в настройках. На пример: forceInclude: [ /^\.dialog/, // Будут добавленны все стили классов, которые начинаются с ".dialog" '.configurator' // Будут добавленны стили, которые применены к классу ".configurator" ], Режим отладки penthouse В случае если возникнут какие либо проблемы в создании "critical.css" следующей командой можно запустить задачу с выводом в терминал служебной информации: $ env DEBUG="penthouse,penthouse:*" gulp styles:critical ℹ️ В случае если Вам требуется создать criticalCss сразу для нескольких URL обратите внимание на официальный пример 1.4.8.4 Сборки скриптов Одной из не мало важных задач так же является сборка и минимизация скриптов. Задача расположена в файле по адресу "gulp/tasks/scripts.js". 1.4.8.5 Линтер скриптов Как работает данная задача шикарно изложено в скринкасте Ильи Кантора — Более сложный поток: eslint, gulp-if, stream-combiner2 Особо тут добавить нечего, потому выложу только сам код, который используется в рамках нашего обучения Итоги подведём Подводя черту под вышесказанным хочу сказать, что мы рассмотрели более-менее универсальный вариант сборщика, под нашу задачу. От проекта к проекту на Вашем пути в разработке будут попадаться разные задачи, которые можно будет реализовать разными способами. Выбирайте тот который проще для понимания и поддержки другими разработчиками на сколько это возможно. Не создавайте слишком сложные файлы конфигурации, но и не дробите их на множества файлов — это излишне. Соблюдайте баланс между гибкостью в коде и сложности его исполнения. Эти простые рекомендации позволят Вашему коду годами выполнять свою задачу, поддерживаться и изменятся без особых трудозатрат. Добра и удачи 🙂
  3. 2 points
    Решил поиграться с тегом details и вот что получилось: See the Pen KxaPyX by Alexandr (@AlexZaw) on CodePen. Для поддержки EDGE и IE9-11 пришлось дублировать код, так как они не поддерживают тег details, так что, при использовании чекбоксов код получится короче, но тем не менее вдруг кому пригодится способ стилизации details. (если нужно зафиксировать меню - меняем позиционирование у details и .mmenu ) <details> <summary tabindex='1'> <span class="top"></span> <span class="center"></span> <span class="bottom"></span> </summary> <ul class="mmenu"> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">item 3</a></li> <li><a href="#">item 4</a></li> <li><a href="#">item 5</a></li> </ul> </details> Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt itaque eum minima exercitationem enim incidunt, eveniet ipsa officia quasi aut eaque quas vel vero atque a perspiciatis tempora! In, eligendi. details { /*position: fixed;*/ position: relative; } ::-webkit-details-marker { display: none; } ::-moz-list-bullet { list-style-type: none; } summary { position: relative; width: 30px; height: 20px; outline: none; } summary span { position: absolute; left: 0; width: 100%; height: 3px; background: #000; border-radius: 3px; transition: all .5s; } .top { top: 0; } .center { top: 50%; transform: translateY(-50%); } .bottom { bottom: 0; } .mmenu { /*position: relative;*/ position: absolute; padding: 0; list-style: none; overflow: hidden; background: #ccc; border-radius: 10px; box-shadow: 0 0 5px #000, inset 0 0 5px #fff } .mmenu a { text-decoration: none; font-size: 18px; color: midnightblue; position: relative; overflow: hidden; } .mmenu a:before { content: ''; display: block; position: absolute; height: 10px; width: 3px; transform: rotate(45deg); background: #fff; right: 100%; top: 6px; opacity: 0; } .mmenu a:hover:before { animation: move .2s linear; animation-fill-mode: forwards } details[open] .top { top: 50%; transform: translateY(-50%) rotate(45deg); box-shadow: 0 0 5px #000, inset 0 0 5px #fff } details[open] .bottom { top: 50%; transform: translateY(-50%) rotate(-45deg); box-shadow: 0 0 5px #000, inset 0 0 5px #fff } details[open] .center { opacity: 0; } details[open] .mmenu { animation: showMenu .5s linear; animation-fill-mode: forwards; } @keyframes showMenu { 0% { padding: 0; opacity: 0; } 100% { opacity: 1; padding: 20px 40px; } } @keyframes move { 0% { right: 100%; opacity: 0; } 50% { right: 50%; opacity: 1; } 100% { right: 0; opacity: 0; } } /*EDGE support*/ @supports (-ms-ime-align:auto) { details, summary { display: block; } summary~.mmenu { opacity: 0; } summary:focus~.mmenu { animation: showMenu .5s linear; animation-fill-mode: forwards; } summary:focus .top { top: 50%; transform: translateY(-50%) rotate(45deg); box-shadow: 0 0 5px #000, inset 0 0 5px #fff } summary:focus .bottom.bottom { top: 50%; transform: translateY(-50%) rotate(-45deg); box-shadow: 0 0 5px #000, inset 0 0 5px #fff } summary:focus .center { opacity: 0; } .mmenu a:hover:before { animation: move .2s linear; animation-fill-mode: forwards } } /*IE9-11 support*/ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { details, summary { display: block; } summary~.mmenu { visibility: hidden; } summary:focus~.mmenu { animation: showMenu .5s linear; animation-fill-mode: forwards; visibility: visible; } summary:focus .top { top: 50%; transform: translateY(-50%) rotate(45deg); box-shadow: 0 0 5px #000, inset 0 0 5px #fff } summary:focus .bottom.bottom { top: 50%; transform: translateY(-50%) rotate(-45deg); box-shadow: 0 0 5px #000, inset 0 0 5px #fff } summary:focus .center { opacity: 0; } }
  4. 2 points
    @LUC Большинству реально такой стиль удобнее и читабельней. Разве что многие могут поспорить на тему табы vs пробелы, 2 или 4 пробела, и т.п. мелочи. Теперь далее про Code Style. Он нужен в первую очередь для коммандной работы, чтобы код писался в едином стиле удобном большинству. Кроме того, единый стиль написания, а особенно написание каждого свойства на новой строке, при коммите и дифе не покажет лишних строчек. В вашем же случае, при изменении одного параметра, будет отмечена вся строка. Что тоже не доставляет удобства при работе. А так ваш код вполне может быть вашим личным Code Style, если вы работаете один и он вас устраивает. Чисто правила типографики и восприятия. Как при обычном письме Уменьшает вероятность ошибок при добавлении нового правила, когда точку с запятой могут просто пролюбить.
  5. 1 point
    можно повозиться и сделать направление идеи http://jsfiddle.net/05qdhg84/
  6. 1 point
    положить ваше меню под шапку, а не в неё, как это сделано у вас
  7. 1 point
    Плагин обновлен до версии 2.0 (для браузеров Chrome, Opera, FireFox, EDGE, для Safari будет позже), в котором добавлена вторая кнопка. Для желающих оставлена версия 1.1 с одной кнопкой. Скачать можно по старому адресу: https://github.com/AlexZaw/SelectCode Версия для FireFox так же доступна в магазине расширений по адресу: https://addons.mozilla.org/ru/firefox/addon/selectcode-for-htmlforum-io/
  8. 1 point
    Вы добавляли метатег? <meta name="viewport" content="width=device-width, initial-scale=1"> в head?
  9. 1 point
    ℹ️ Статья не завершена, дополняется по мере реализации проекта. 0. Предисловие И так, когда у нас готова основа проекта (сборщик и организована структура) можно приступать к вёрстке. ℹ️ Вообще, как правило, и сборщик и структура проекта организовываются во время его разработки. Особенно это касается тех ситуаций, когда разработчику впервые ставят задачу на реализацию большого кол-ва вёрстки (от 100 и более часов на вёрстку макетов). Тогда и появляется надобность в использовании инструментом по сборке проекта. А количество стилей настолько велико, что хранить в одном файле крайне затруднительно. В статье расказывается как структурировать эти данные таким образом, что бы и разработчик, и другие участники команды, могли с лёгкостью читать, поддерживать и развивать изначально написанный "костяк". Спустя несколько лет грамотно организованная структура под конкретную задачу сильно упрощает поддержку кода и минимизирет затраты на рефакторинг кода (тем самым понижает стоимость разработки). Рабочая ветка: $ git checkout 2.0-html-assets Макет: Assets/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" и внесём изменения: А так же импортируем эти стили в файле "bootstrap/bootstrap.scss" следующими строками в самом конце файла: // Custom Updates // @import "type"; 1.3.3 Цвета Цвета — это не отъемлемая часть дизайна, которая всегда присутвует в вёрстке. Их множество может быть, условно, безконечным. Под разные проекты конфигурировать палитру цветом предстоит индивидуально, так как задачи разные. У Вас может быть как не большая конфигурация цветов, из 10-15 штук, так и более сложный варинат — полноценная политра для мультитем, со своим индивидуальным набором цветов. В рамках данного обучения нет задачи создавать гибкую настройку по цветам, так как не предполагается их часто и\или кардинально менять. Палитру цветов для всего проекта мы опишем в файле "assets/scss/config/variables.scss" в разделе "// Colors". Цвета, для начала, возьмём из "Assets/Assets.png". Выглядеть это будет приблизительно вот так: ℹ️ Несколько раз я пытался как-то каталогизировать по смыслу цветовую палитру, но универсального варианта найти мне не удалось. В тех или иных случаях целесообразнее тот или иной вариант. Однажды я разрабатывал проэкт, который предполагал наличие разных тем со своей палитрой. Конфиг цветов был следующим: И так, мы начали создавать палитру цветов в конфигураторе. Теперь на примере 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" в тот же момент перекрасились кнопки Как можно заметить "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" следующий миксин: Далее в "_buttons.scss" давайте добавим стили, которые изменят вид кнопок под требуемый нам (так же учтём и ":hover", ":focus" состояния) ℹ️ В данном решении используются не только переменные 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 Добра и удачи ?
  10. 1 point
    Верстай полностью отдельные страницы, PHP это не работа верстальщика.
  11. 1 point
    Вобщем написал плагинчик который это делает. Т.е. если человек выкладывает в теме свой код который оформлен соответствующим образом (с помощью кнопочки "Код" в верхней панели) т.е. вот так Плагин автоматом добавляет сверху кнопку которая, при нажатии, выделяет весь код чтобы его можно было скопировать в буфер обмена. Плагин сделан для того, что-бы не копировать длинные куски кода в ручную, так как это не всегда удобно. Поддержка браузеров Chrome, Opera, Firefox, Edge. На остальных не тестировался за неимением таковых. Скачать плагин можно по адресу https://github.com/AlexZaw/SelectCode Надеюсь кому-нибудь пригодится.
  12. 1 point
    Можно так: <div></div> div{ margin: 50px; height: 100px; width: 150px; background: #333; border-radius: 20px; position: relative; } div:after, div:before{ content: ''; display: block; position: absolute; height: 100px; width: 150px; border-radius: 20px; background: #333; } div:after{ transform: rotate(60deg); } div:before{ transform: rotate(-60deg); }
  13. 1 point
    Да везде говорится что верстка pixel perfect это максимальное приближение к макету. Если вы хотите найти какие-то стандарты где расписано что это делается вот так, а это вот так, то такого просто не существует. Все руководствуются здравым смыслом и возможностями самих браузеров. Тут либо пробовать объяснить заказчику что это выглядит криво и не симметрично, и такая верстка займет больше времени и будет больше занимать объема, а следовательно медленнее грузится сайт, что скажется на его рейтинге (а это уже весомый аргумент ? ), либо, если заказчик упертый, смириться. Если заказчик человек адекватный он поймет что вся эта кривизна в дизайне не от большого ума дизайнера, а как раз наоборот ?
  14. 1 point
    Если разница в отступах не заметна на глаз или не сильно заметно, то пинайте за это дизайнера, если дизайнер левый или нет возможности связаться с ним - попробуйте поговорить с заказчиком и объяснить ему что это увеличивает время верстки, размер кода. Если разница заметна на глаз то, опять же укажите на это заказчику, возможно он этого не видел. Если же заказчика все устраивает то попробуйте выбить из него побольше денег ссылаясь на то что одинаковые блоки и должны выглядеть одинаково, а pixel perfect подразумевает собой общее расположение блоков, а не небрежность/криворукость дизайнера при дизайне отдельных элементов ? Если заказчик далек от темы веба то такой вариант может прокатить ? Вообще, на мой взгляд, это не совсем правильно, если конечно это не фишка дизайна которая согласована, а именно небрежность которая не придает дизайну шарма а режет глаз. Да, и еще, для Pixel Perfect макет должен быть подготовлен идеально (каждый отступ и размер шрифта логически обоснован) Вот это тоже стоит объяснить заказчику, если будут расхождения в верстке из-за шрифтов
  15. 1 point
    Есть два варианта Копировать напрямую нужный символы из таблицы символов, находится она тут: Пуск - Все программы - Стандартные - Служебные - Таблица символов. Либо использовать мнемоники http://htmlbook.ru/samhtml/tekst/spetssimvoly С последней ссылки можно и сами символы копировать.
  16. 1 point
    Тут проблема в том, что собирается HTML-строка, а в HTML нет экранирования спецсимволов слешем. Для HTML кавычки надо экранировать как &quot;, т.е. str = "Описание: &quot;машина&quot;"; // строка для дальнейшего вывода в HTML А еще лучше в выводе использовать типографские кавычки («ёлочки» или “лапки”), которые и выглядят приятнее, и со спецсимволами ни в одном известном мне компьютерном языке не конфликтуют ?
  17. 1 point
  18. 1 point
    выкладывайте в http://jsfiddle.net/ что у вас не получается
  19. 1 point
  20. 1 point
    что-то вроде http://jsfiddle.net/rbgve5p6/
  21. 1 point
    https://transfonter.org/ Тут заливаете ваш шрифт, он вернет вам архив в котором будет css, и шрифты других форматах типа woff, svg и т.д. Переносите сгенерированные шрифты в папку с проектом, а css вставляете в верху своего, и главное правильно пропишите пути к файлам шрифтов.
  22. 1 point
    Начнем с того что заголовок это блочный элемент и по умолчанию занимает 100% ширины. Далее, у строчных элементов выравнивание по вертикали по умолчанию стоит baseline, что и происходит у вас во втором случае. Заголовок занял 100% ширины, синие блоки без текста выровнялись нижним краем по базовой линии текста, тем самым отодвинув строку вниз (т.е. по сути они просто большие буквы). Желтый блок с текстом так же выровнялся относительно baseline. Задайте для .block2 и .inner-block vertical-align:top;
  23. 1 point
    Обсуждаемый нами сайт написан на WordPress. Блоки, о которых Вы говорите, — вставлены виджетами: http://take.ms/MMIcN Предложенное мной решение не идеальное, но в Вашем случае оно будет работать: @media screen and (max-width: 767px) { .widget-area #text-3, .widget-area #text-4 { display: none; } } Было бы лучше если бы каждый из этих блоков имел свой уникальный класс, который бы использовался для решения данной зхадачи.
  24. 1 point
    Я бы так сделал. Ну а картинку блоком так и ставите: <div> <div class="about_txt"> // <— тут 35% <h3 class="left">July 2010 <span>Our humble beginnings</span></h3> <p class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente molestiae dolore sit sunt aspernatur quae.</p> </div> <div class="image-block"> <— тут 30% <img src="img/about1.jpg" alt=""> </div> <div class="class"></div> <— тут 35% </div> ps: проценты сами подберете...
  25. 1 point
    https://codepen.io/corvus-007/pen/KZZPoZ?editors=0110
This leaderboard is set to Kiev/GMT+03:00