create-html-boilerplate

授权协议 MIT License
开发语言 JavaScript
所属分类 Web应用开发、 常用JavaScript包
软件类型 开源软件
地区 不详
投 递 者 陈兴朝
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

Create HTML boilerplate

Привет! Спасибо за то что используете наш Create HTML boilerplate.

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

  • HTML
  • SCSS
  • JS
  • Шрифты
  • Картинки и т.д.

Файловая структура

myApp
├── .github
│   ├── bug_report.md                - шаблон для создания issue
│   └── feature_request.md           - шаблон для создания запроса на улучшение
│
├── source                           - все основные файлы, которые вам нужны
│   ├── fonts                        - папка с подключаемыми шрифтами
│   │   ├── Roboto-Regular.woff      – шрифт старого формата
│   │   └── Roboto-Regular.woff2     – шрифт более современного формата
│   │
│   ├── html                         – HTML компоненты сайта
│   │   ├── includes/                – блоки
│   │   │   ├── common               - папка с переиспользуемыми блоками
│   │   │   │   ├── footer.html      - футер сайта
│   │   │   │   └── header.html      - хедер сайта
│   │   │   │
│   │   │   └── index                - папка блоков для страницы views/index.html
│   │   │       ├── hero.html        - секция hero
│   │   │       └── structure.html   - секция structure
│   │   │
│   │   └── views/                   – страницы
│   │       └── index.html           - главная (корневая) страница сайта
│   │
│   ├── img                          - графика
│   │   └── logo.svg                 - лого проекта
│   │
│   ├── js                           - скрипты сайта
│   │   ├── index.js                 - точка входа для скриптов
│   │   └── script.js                - пример импортируемого модуля
│   │
│   ├── root                         - файлы, которые будут лежать в корне проекта
│   │   └── manifest.json            - базовая информация о сайте для браузера
│   │
│   ├── scss                         - стили проекта
│   │   ├── blocks                   - примеры стилей вынесенных в блоки
│   │   │   ├── container.scss       - стили для .container
│   │   │   ├── header.scss          - стили для .header
│   │   │   ├── logo.scss            - стили для .logo
│   │   │   ├── nav.scss             - стили для .nav
│   │   │   └── visually-hidden.scss - этот блок используется для того, чтобы доступно прятать контент на странице.
│   │   │
│   │   ├── font-face.scss           - подключение шрифтов
│   │   ├── global.scss              - глобальные стили
│   │   ├── style.scss               – точка входа для стилей проекта
│   │   └── variables.scss           - переменные (цвета, размеры, шрифты и т.п.)
│   │
│   └── vendors                      - папка для внешних скриптов и библиотек
│       └── normalize-css/           - нормализация стилей по умолчанию (https://necolas.github.io/normalize.css/)
│           └── normalize.min.css    - минифицированный файл
│
├── webpack                          - папка для конфигураций webpack
│   ├── helpers                      - папка с вспомоготельными функциями  
│   │   └── generateHtmlPlugins.js   - генерация настроек для шаблонов 
│   └── webpack.config.js            - конфиг для webpack
│
├── .editorconfig                    - настройки для редактора кода
├── .eslintrc.js                     - настройки для линтера JS (ESLint)
├── .gitattributes                   - технический файл для Git
├── .gitignore                       - файлы/папки игнорируемые Git
├── .prettierrc                      - настройки форматирования кода (Prettier)
├── .stylelintrc.js                  - настройки для линтера SCSS (Stylelint)
├── LICENSE                          - лицензия проекта (MIT)
├── package.json                     - зависимости, скрипты и базовая информация
└── README.md                        - описание проекта

* Обратите внимание! Мы не добавляли в проект файлы package-lock.json и yarn.lock, 
так как они будут сгенерированы автоматически во время установки проекта.

Зависимости

  • node ^10

Что под капотом

  • Webpack
  • SCSS
  • JS с Babel
  • Stylelint, Eslint
  • Prettier – для автоформатирования

Установка

npm i

Запуск

npm start

Авторы

�� Webtime.Studio

Show your support

Поставьте нам звёздочку ⭐️ если этот проект помог вам!

  • HTML5 Boilerplate是什么?解决了什么问题? 对于第一次听说这个人,肯定都有这个疑问把!在网上看了看,发现很多人都认为这个是和Bootstrap一样的东西,这真是大错特错了。实际上,HTML5 Boilerplate只是一个单纯的HTML模版。 什么?HTML模版?干嘛用? 这里不得不提所有前端开发都会遇到的问题,每次要重新弄一个页面的时候,你们都是怎么做的呢?那个doctype、h

 相关资料
  • 描述 (Description) 它在集合中创建模型的新实例。 语法 (Syntax) collection.create(attributes,options) 参数 (Parameters) attributes - 它们表示已定义模型的属性。 options - 它使用id,name等参数来创建集合实例。 例子 (Example) <!DOCTYPE html> <html> <he

  • create 通过一个构建函数完整的创建一个 Observable create 操作符将创建一个 Observable,你需要提供一个构建函数,在构建函数里面描述事件(next,error,completed)的产生过程。 通常情况下一个有限的序列,只会调用一次观察者的 onCompleted 或者 onError 方法。并且在调用它们后,不会再去调用观察者的其他方法。 演示 创建一个 [0,

  • create 函数签名: create(subscribe: function) 使用给定的订阅函数来创建 observable 。 示例 示例 1: 发出多个值的 observable ( StackBlitz | jsBin | jsFiddle ) // RxJS v6+ import { Observable } from 'rxjs'; /* 创建在订阅函数中发出 'Hello' 和

  • 我正在尝试在反应加载之前添加一个闪屏。 因为我使用的是react脚本/react-app,所以我的index.tsx只有以下部分: 我试着在同一个页面上添加我自己的div,但它没有显示出来。 我想显示一个简单的空白屏幕与我的飞溅图像在1秒定时器之前的反应加载,以避免/隐藏渲染元素的移动。 **如果我确实在app.tsx中添加了屏幕,则在屏幕加载之前会发生移动 更新 正如Rishabh在下面指出的,

  • Creates new projects from any create-* starter kits. yarn create <starter-kit-package> [<args>] This command is a shorthand that helps you do two things at once: Install create-<starter-kit-package> g

  • 要使用iBATIS执行任何创建,读取,更新和删除(CRUD)操作,您需要创建与该表对应的普通旧Java对象(PO​​JO)类。 此类描述将“建模”数据库表行的对象。 POJO类将具有执行所需操作所需的所有方法的实现。 我们假设我们在MySQL中有以下EMPLOYEE表 - CREATE TABLE EMPLOYEE ( id INT NOT NULL auto_increment, f