Starter, a Bolt Theme

Installation | Getting Started | Configuration | Folder Structure | Recommendations | Fundamentals | References

---

Installation

There are two options to get this theme:

• Install this theme via the Bolt backend at /bolt/extensions.
• Do a composer require xiaohutai/bolt-theme-starter in your Bolt's extensions folder.

For making pull requests, navigate to your Bolt's themes folder and clone this repo:

git clone git@github.com:xiaohutai/bolt-theme-starter.git

Getting Started

# Install dependencies
npm install

# For development: Serve the website with hot reload for css and js files.
npm start

# For production: Build and minify all assets.
npm run build

Command	Description	Minification?
npm run sass	Compile SASS to CSS
npm run postcss	PostCSS (polyfill, autoprefixer)
npm run styles	Build styles (sass + postcss)
npm run scripts	Compile JS
npm run build	Build everything (styles + scripts)
npm run lint	Lint styles
npm run eslint	Lint scripts

Configuration

Name	File	Github	More info
Babel	.babelrc		.babelrc, babel-preset-env
ESLint	.eslintrc.js		Configuring, ESLint rules
PostCSS	.postcssrc
cssnano	cssnano.config.js
Browserlist	.browserslistrc		browserl.ist

Check the browserslist with

npx browserslist

Folder Structure

Folder structure

.
├── dist
│   ├── scripts
│   ├── styles
│   └── ...
├── config
│   ├── config.yml
│   ├── contenttypes.yml
│   ├── routing.yml
│   ├── extensions/boltforms.bolt.yml
│   ├── extensions/seo.bobdenotter.yml
│   └── ...
├── source
│   ├── scripts
│   ├── styles
│   └── ...
├── templates
│   ├── components
│   ├── layouts
│   ├── partials
│   └── ...
├── .babelrc
├── .browserslistrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── .postcssrc
├── browserconfig.yml
├── CHANGELOG.md
├── composer.json
├── cssnano.config.js
├── LICENSE
├── package.json
├── package-lock.json
├── README.md
├── site.webmanifest
├── theme.yml
└── ...

Recommendations

Extensions

By default, this extension automatically installs the following extensions:

• bacboslab/menueditor
• bobdenotter/seo
• bolt/boltforms
• bolt/sitemap
• twokings/bolt-searchable-content-extension
• twokings/hierarchical-routes

These extensions will be uninstalled if you uninstall this theme. You can install them separately in order to keep them:

composer require bacboslab/menueditor
composer require bobdenotter/seo
composer require bolt/boltforms
composer require bolt/sitemap
composer require twokings/bolt-searchable-content-extension
composer require twokings/hierarchical-routes

Suggested Extensions

• animal/translate
• bolt/basewidget
• bolt/disqus
• bolt/jsonapi
• bolt/labels

composer require animal/translate
composer require bolt/basewidget
composer require bolt/disqus
composer require bolt/jsonapi
composer require bolt/labels

Bolt Configuration

The config directory has some yml files with useful blocks that you can copy and paste.

• config.yml
• contenttypes.yml
• routing.yml

Blocks

Snippets

Components

Fundamentals

Grid

Color

Typography

Accessibility

• Inclusive Components by Heydon Pickering

Web App Manifest

Generate favicon.ico, site.webmanifest, and browserconfig.xml at Favicon Generator.

• The Web App Manifest on Google Web Fundamentals

References