Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/flyntwp/flynt-starter-theme
The starter theme for building Flynt projects.
https://github.com/flyntwp/flynt-starter-theme
acf composer flynt-framework gulp jeet stylus timber twig webpack wordpress wordpress-boilerplate wordpress-developer-theme wordpress-development wordpress-framework wordpress-starter-theme wordpress-theme yarn
Last synced: 3 days ago
JSON representation
The starter theme for building Flynt projects.
- Host: GitHub
- URL: https://github.com/flyntwp/flynt-starter-theme
- Owner: flyntwp
- License: mit
- Archived: true
- Created: 2016-11-09T13:54:01.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2019-03-15T12:59:20.000Z (almost 6 years ago)
- Last Synced: 2024-09-26T14:40:52.913Z (4 months ago)
- Topics: acf, composer, flynt-framework, gulp, jeet, stylus, timber, twig, webpack, wordpress, wordpress-boilerplate, wordpress-developer-theme, wordpress-development, wordpress-framework, wordpress-starter-theme, wordpress-theme, yarn
- Language: PHP
- Homepage:
- Size: 14.9 MB
- Stars: 69
- Watchers: 10
- Forks: 4
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# flynt-starter-theme
[](https://github.com/RichardLitt/standard-readme)
[](https://travis-ci.org/flyntwp/flynt-starter-theme)
[](https://scrutinizer-ci.com/g/flyntwp/flynt-starter-theme/?branch=master)
The starter theme for building [Flynt](https://flyntwp.com/) projects.
**:warning: DEPRECATED. This repository is no longer in active development. For the latest version of Flynt please use the [new Flynt repository](https://github.com/flyntwp/flynt). :warning:**
## Table of Contents
- [Background](#background)
- [Install](#install)
- [Usage](#usage)
- [Configuring Page Templates](#configuring-page-templates)
- [Components](#components)
- [Areas](#areas)
- [Features](#features)
- [Theme Structure](#theme-structure)
- [Maintainers](#maintainers)
- [Contribute](#contribute)
- [License](#license)
## Background
Flynt is a sustainable approach to website development and content management with a component-based philosophy.
Flynt Theme is a ready-to-go WordPress theme that implements all of Flynt's best practices.
## Install
1. Install [Node](https://nodejs.org/en/).
2. Install [Yarn](https://yarnpkg.com/lang/en/docs/install/).
3. Create a new project folder and setup a new [WordPress](https://wordpress.org/download/) installation.
4. Install and activate the following plugins:
- [Flynt Core](https://github.com/flyntwp/flynt-core)
- [Advanced Custom Fields Pro](https://www.advancedcustomfields.com/pro/)
- [ACF Field Group Composer](https://github.com/flyntwp/acf-field-group-composer)
- [Timber](https://wordpress.org/plugins/timber-library/)
5. Clone the flynt-starter-theme repo to `/wp-content/themes`.
6. Change the host variable in `flynt-starter-theme/gulpfile.js/config.js` to match your host URL.
```js
const host = 'your-host-url.test'
```
7. In your terminal, navigate to `/wp-content/themes/flynt-starter-theme`. Run `yarn` and then `yarn build`.
8. Go to the administrator back-end of your WordPress site and activate the `flynt-starter-theme` theme.
## Usage
In your terminal, navigate to `/wp-content/themes/flynt-starter-theme` and run `yarn start`. This will start a local server at `localhost:3000`.
Changes to files made in `Components` and `Features` will now be watched for changes and compiled to the `dist` folder.
### Configuring Page Templates
All template files can be found under the theme root, in the `templates` directory.
The structure of each page within the theme is created using a nested JSON object. Each PHP template within the `templates` directory takes a simple JSON configuration file, and using the Flynt Core plugin, parses and renders this into HTML.
For example, take `templates/page.php`:
```php
{{ area('layout') }}
{{ wp_footer }}
```
### Components
A component is a self-contained building-block. As such, each component is kept within its own folder which contains everything it requires; the layout, the ACF field setup, all necessary WordPress filter and hook logic, scripting, styles, and images.
```
ExampleComponent/
├── assets/
| ├── exampleImage.jpg
| └── exampleIcon.svg
├── fields.json
├── functions.php
├── index.twig
├── README.md
├── script.js
├── style.styl
```
Building components is a sustainable process, meaning every component you develop can be reused within a project, or in another; increasing your head-start with every new Flynt project.
### Areas
Since components are self-contained, areas provide a way to stack our building-blocks together. An area is simply a location within a component where it is possible to add other components.
### Features
With WordPress, it is easy to create one large `functions.php` file, crammed full of all the custom logic your theme may need. This can get messy. In Flynt, we split each piece of functionality into smaller, self-contained **feature** bundles.
In most cases, features add global hooks and filters that affect the project on a global level. With this in mind, each feature is built with reusability in mind.
Flynt comes with a core set of ready to go features, each with its own readme. To learn more, look through the [Features](https://github.com/flyntwp/flynt-starter-theme/tree/master/Features) directory.
### Theme Structure
```
flynt-starter-theme/ # → Root of the theme
├── Components/ # → All base components
├── config/ # → WP/ACF Configuration
│ ├── customPostTypes/ # → Configure custom post types
│ ├── fieldGroups/ # → Configure ACF field groups
│ ├── templates/ # → Page templates (JSON)
├── dist/ # → Built theme files (never edit)
├── Features/ # → All features
├── gulpfile.js/ # → Gulp tasks and setup
│ ├── tasks/ # → Individual gulp-tasks, e.g. webpack, stylus
│ ├── config.js # → Gulp config
│ ├── index.js # → Load gulp tasks with config
│ ├── webpack.config.js # → Webpack config
├── lib/ # → Hold utils and setup features
│ ├── Utils/ # → Small utility functions
│ ├── Bootstrap.php # → Flynt Bootstrap
│ ├── Init.php # → Setup theme, register features
├── node_modules/ # → Node.js packages (never edit)
├── templates/ # → Page templates (PHP)
├── .gitignore # → Files/Folders that will not be committed to Git.
├── .stylintrc # → Define Stylus linting rules
├── functions.php # → Set template directory and load lib/Init.php
├── index.php # → Theme entry point (never edit)
├── package.json # → Node.js dependencies and scripts
├── phpcs.ruleset.xml # → Define PHP linting rules
├── screenshot.png # → Theme screenshot for WP admin
├── style.css # → Required WordPress theme style file.
├── yarn.lock # → Yarn lock file (never edit)
```
[You can read the full documentation here.](https://docs.flyntwp.com)
## Maintainers
This project is maintained by [bleech](https://github.com/bleech).
The main people in charge of this repo are:
- [Dominik Tränklein](https://github.com/domtra)
- [Doğa Gürdal](https://github.com/Qakulukiam)
## Contribute
To contribute, please use GitHub [issues](https://github.com/flyntwp/flynt-starter-theme/issues). Pull requests are accepted. Please also take a moment to read the [Contributing Guidelines](https://github.com/flyntwp/guidelines/blob/master/CONTRIBUTING.md) and [Code of Conduct](https://github.com/flyntwp/guidelines/blob/master/CODE_OF_CONDUCT.md).
If editing the README, please conform to the [standard-readme](https://github.com/RichardLitt/standard-readme) specification.
## License
MIT © [bleech](https://www.bleech.de)