OptimizedHTML 4: Стартовый шаблон для верстки сайтов с Bootstrap 4 на борту


https://i.ytimg.com/vi/lOXz0ZYuTqI/hqdefault.jpg



Полезно? Подпишись на канал: https://goo.gl/o1TVqF
Всем привет, друзья! Сегодня мы познакомимся с новой версией стартового шаблона для верстки сайтов OptimizedHTML 4 с Bootstrap 4 на борту. Для тех, кто не знает, OptimizedHTML – это стартер, который подойдет для верстки практически любого проекта, значительно экономит ваше время в начале верстки и содержит набор базовых модулей. OptimizedHTML основан на использовании Gulp и его полезных модулей, таких, как BrowserSync (компонент для создания локального сервера и автоматического обновления страницы в процессе работы), Sass для быстрой и комфортной работы с CSS кодом, Uglify, CleanCSS и Autoprefixer для постобработки и Rsync для деплоя.

Страница урока: https://webdesign-master.ru/blog/tools/2018-03-02-optimizedhtml-4.html

Создание контентного сайта от А до Я: https://goo.gl/ankxq9
Создание интернет-магазина от А до Я: https://goo.gl/7mDqYD
Фриланс для начинающих: https://goo.gl/xOPRQ0

Все курсы: https://webdesign-master.ru/_lp/

Группа Вконтакте: https://vk.com/agragregra
Twitter: https://twitter.com/agragregra

Original source

29 thoughts on “OptimizedHTML 4: Стартовый шаблон для верстки сайтов с Bootstrap 4 на борту

  • April 3, 2020 at 18:05
    Permalink

    как ипртировать все компоненты бутстрапа? @import "../libs/bootstrap/**/*";? – на это галп ругается

  • April 3, 2020 at 18:05
    Permalink

    Алексей, если не секрет, вы используете уже flex-сетку в коммерческих проектах или ограничиваетесь отдельными ее возможностями и верстаете на float? (надеюсь понятно выразился)

  • April 3, 2020 at 18:05
    Permalink

    Здравствуйте Алексей , если не хочется использовать bootstrap и sass , какие файлы надо удалить из OptimizedHTML 4 , и что нужно поменять в gulp.js ?

  • April 3, 2020 at 18:05
    Permalink

    Здравствуйте,
    огромное спасибо вам и вашему каналу, очень помог мне в развитии. Очень удобно и быстро работать. Но есть вопрос, я не могу заставить работать OptimizedHTML с GitHub (GitHub, GitHub Desktop, Vs итд.) Может будет у вас когда нибудь урок по подключению этого добра к GitHub. Было бы здорово ). Я сам не давно узнал об этом не особо разбираюсь. Удачи в развитии канала и в работе.
    Спасибо !

  • April 3, 2020 at 18:05
    Permalink

    Спасибо за информацию. Давно уже смотрю твои уроки. Правда не все получается сразу.
    Вот команда ncu не проходит:
    PS D:MySitemaster01_reader_html> ncu

    ncu : Имя "ncu" не распознано как имя командлета, функции, файла сценария или выполняемой программы. Проверьте правильн

    ость написания имени, а также наличие и правильность пути, после чего повторите попытку.

    строка:1 знак:1

    + ncu

    + ~~~

    + CategoryInfo : ObjectNotFound: (ncu:String) [], CommandNotFoundException

    + FullyQualifiedErrorId : CommandNotFoundException
    Как ее применить?

  • April 3, 2020 at 18:05
    Permalink

    Отзовись пожааалуйста.
    Я вот только не понимаю.Если мне нужна папка dist ?
    Он ее не компилит же.Тут через rsync,как я понял.Но что делать,если мне нужно,как было в других шаблонах,таких как из урока "Gulp для самых маленьких"

  • April 3, 2020 at 18:05
    Permalink

    Спасибо за твою работу. Так радует когда смотришь твои видео, сделано с душой и заботой. Еще раз спасибо

  • April 3, 2020 at 18:05
    Permalink

    Здравствуйте вот решил добавить в вашу сборку Sourcemaps подскажите как это сделать ?

  • April 3, 2020 at 18:05
    Permalink

    Алексей, использую вашу gulp сборку. Возник вопрос, как подключить в неё js от бутстрапа, не подскажите? Подключаю css бутстрапа в файле libs, а js бутстрапа в файле gulpfile (таким методом у вас все менюшки, слайдеры, карусели и т.д. подключены). Но бутстрап не хочет работать, точнее стили то работают его, а вот js нет. Работает только когда я в html, botstrap.js подключу. Может я что то не правильно делаю или js от бутстрапа можно подключить только в html и больше ни как? Подскажите пожалуйста как правильней это сделать?

  • April 3, 2020 at 18:05
    Permalink

    Здравствуйте, совершенно не понимаю что за ошибки при npm i, может кто-то подсказать ?
    Вроде всё обновлено, ncu показывает последние версии и node 10.0.8.0 ( и да npm audit fix результата не даёт никакого)

    C:UserselmatDownloadsOptimizedHTML-4-master>ncu
    Using C:UserselmatDownloadsOptimizedHTML-4-masterpackage.json
    [………………] – :
    All dependencies match the latest package versions 🙂

    C:UserselmatDownloadsOptimizedHTML-4-master>npm i
    npm WARN deprecated gulp-util@3.0.8: gulp-util is deprecated – replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
    npm WARN deprecated graceful-fs@3.0.11: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
    npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
    npm WARN deprecated lodash.createcallback@2.4.4: This package is discontinued. Use lodash.iteratee@^4.0.0.
    npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
    npm WARN deprecated graceful-fs@1.2.3: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js

    > node-sass@4.9.3 install C:UserselmatDownloadsOptimizedHTML-4-masternode_modulesnode-sass
    > node scripts/install.js

    Cached binary found at C:UserselmatAppDataRoamingnpm-cachenode-sass4.9.3win32-x64-64_binding.node

    > node-sass@4.9.3 postinstall C:UserselmatDownloadsOptimizedHTML-4-masternode_modulesnode-sass
    > node scripts/build.js

    Binary found at C:UserselmatDownloadsOptimizedHTML-4-masternode_modulesnode-sassvendorwin32-x64-64binding.node
    Testing binary
    Binary is fine
    npm notice created a lockfile as package-lock.json. You should commit this file.
    npm WARN optimizedhtml@4.0.0 No repository field.
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modulesfsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

    added 675 packages from 549 contributors and audited 2782 packages in 26.998s
    found 7 vulnerabilities (3 low, 4 high)
    run `npm audit fix` to fix them, or `npm audit` for details

  • April 3, 2020 at 18:05
    Permalink

    ERROR!!!ERROR!! Добрый день! Пользуюсь вашим шаблоном, все работает отлично, НО когда я пытаюсь jquery-ть саблайм3 выдает ошибку при сохранении,
    $(function() {
    ^

    ReferenceError: $ is not defined (и там дальше куча текста), в чем может быть проблема?

  • April 3, 2020 at 18:05
    Permalink

    а как этот шаблон потом внедрять во вреймворк, чет я сообразить не могу, то же Yii2?

  • April 3, 2020 at 18:05
    Permalink

    Алексей, спасибо за урок! Меня запутало только, что в текущем шаблоне в gulpfile вместо таска sass используется таск styles. Поясните ключевые моменты этого таска, плиз.

    спасибо

  • April 3, 2020 at 18:05
    Permalink

    всем привет, а есть видео, где автор советуют chrome расширения для веб-разработки или рассказывает какими сам пользуется?

  • April 3, 2020 at 18:05
    Permalink

    Здравствуйте, прописываю "npm i" и выдает ошибку

    npm WARN optimizedhtml@4.1.0 No repository field.

    npm ERR! code EBADPLATFORM

    npm ERR! notsup Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

    npm ERR! notsup Valid OS: darwin

    npm ERR! notsup Valid Arch: any

    npm ERR! notsup Actual OS: win32

    npm ERR! notsup Actual Arch: x64

    npm ERR! A complete log of this run can be found in:

    npm ERR! C:UsersЮрийAppDataRoamingnpm-cache_logs2018-06-10T13_38_13_906Z-debug.log

    Помогите исправить что я не так делаю??? Заранее спасибо!

  • April 3, 2020 at 18:05
    Permalink

    Привет , всем! Подскажите пожалуйста начинающему, когда прописываю медиа запросы для меньших экранов – например делаю меньший шрифт для (xs)- то эти стили применяются и sm i lg … Как ограничить стили только на конкретном экране?

Leave a Reply