field--paragraph--formatted-text.html.twig

<div class="formatted-text">
  {{ items }}
</div>

field.html.twig

{#
/**
 * @file
 * Theme override for a field.
 *
 * To override output, copy the "field.html.twig" from the templates directory
 * to your theme's directory and customize it, just like customizing other
 * Drupal templates such as page.html.twig or node.html.twig.
 *
 * Instead of overriding the theming for all fields, you can also just override
 * theming for a subset of fields using
 * @link themeable Theme hook suggestions. @endlink For example,
 * here are some theme hook suggestions that can be used for a field_foo field
 * on an article node type:
 * - field--node--field-foo--article.html.twig
 * - field--node--field-foo.html.twig
 * - field--node--article.html.twig
 * - field--field-foo.html.twig
 * - field--text-with-summary.html.twig
 * - field.html.twig
 *
 * Available variables:
 * - attributes: HTML attributes for the containing element.
 * - label_hidden: Whether to show the field label or not.
 * - title_attributes: HTML attributes for the title.
 * - label: The label for the field.
 * - multiple: TRUE if a field can contain multiple items.
 * - items: List of all the field items. Each item contains:
 *   - attributes: List of HTML attributes for each item.
 *   - content: The field item's content.
 * - entity_type: The entity type to which the field belongs.
 * - field_name: The name of the field.
 * - field_type: The type of the field.
 * - label_display: The display settings for the label.
 *
 * @see template_preprocess_field()
 */
#}
{%
  set title_classes = [
    label_display == 'visually_hidden' ? 'visually-hidden',
  ]
%}

{% if label_hidden %}
  {% if multiple %}
      {% for item in items %}
        {{ item.content }}
      {% endfor %}
  {% else %}
    {% for item in items %}
      {{ item.content }}
    {% endfor %}
  {% endif %}
{% else %}
	{{ label }}
  {% for item in items %}
    {{ item.content }}
  {% endfor %}
{% endif %}

gulpfile.js

var gulp = require('gulp');
var livereload = require('gulp-livereload');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var imagemin = require('gulp-imagemin');
var eslint = require('gulp-eslint');
var gulpIf = require('gulp-if');
var sourcemaps = require('gulp-sourcemaps');

// --- SASS themes --- //
gulp.task('sass-compile-themes', function() {
  return gulp.src(['./../themes/lisa/src/sass/**/*.scss'])
    .pipe(sourcemaps.init())
    .pipe(sass.sync({ outputStyle: 'compressed' }).on('error', sass.logError))
    .pipe(autoprefixer({ browsers: ['cover 99.5%'] }))
    .pipe(sourcemaps.write('.', { addComment: false }))
    .pipe(gulp.dest('./../themes/lisa/css/'))
    .pipe(livereload());
});
// --- SASS themes end --- //


// --- SASS modules --- //
gulp.task('sass-compile-modules', function() {
  return gulp.src(['./../modules/custom/**/src/sass/**/*.scss'])
    .pipe(sourcemaps.init())
    .pipe(sass.sync({ outputStyle: 'compressed' }).on('error', sass.logError))
    .pipe(autoprefixer({ browsers: ['cover 99.5%'] }))
    .pipe(sourcemaps.write('.', { addComment: false }))
    .pipe(gulp.dest('./../modules/custom/**/css'))
    .pipe(livereload());
});
// --- SASS modules end --- //


// --- JS --- //
function isFixed(file) {
	return file.eslint != null && file.eslint.fixed;
}
//-- JS lint theme --
gulp.task('js-lint-themes', function(done) {
	gulp.src(['./../themes/lisa/src/js/**/*.js'])
		.pipe(eslint({
        plugins: ['prettier'],
 				rules: {
					'prettier/prettier': 'error',
					'consistent-return': ['off'],
					'no-underscore-dangle': ['off'],
					'max-nested-callbacks': ['warn', 3],
					'import/no-mutable-exports': ['warn'],
					'no-plusplus': ['warn', {
						'allowForLoopAfterthoughts': true
					}],
					'no-param-reassign': ['off'],
					'no-prototype-builtins': ['off'],
					'valid-jsdoc': ['warn', {
						'prefer': {
							'returns': 'return',
							'property': 'prop'
						},
						'requireReturn': false
					}],
					'no-unused-vars': ['warn'],
					'operator-linebreak': ['error', 'after', { 'overrides': { '?': 'ignore', ':': 'ignore' } }]
        },
        extends: ['airbnb', 'plugin:prettier/recommended'],
        globals: ['jQuery', 'Drupal', 'drupalSettings', 'drupalTranslations', 'domready', '_', 'matchMedia', 'Backbone', 'Modernizr', 'CKEDITOR'],
        envs: ['browser', 'node', 'es6'],
        root: true,
        fix: true
		}))
		.pipe(eslint.format())
		.pipe(gulpIf(isFixed, gulp.dest('./../themes/lisa/js')))
		.pipe(livereload())
		done();
});

// --- JS end --- //

// --- Images --- //
gulp.task('image-compress', function(done) {
	gulp.src('./../themes/lisa/src/images/**')
		.pipe(imagemin([
			imagemin.gifsicle({ interlaced: true }),
			imagemin.jpegtran({ progressive: true }),
			imagemin.optipng({ optimizationLevel: 5 }),
			imagemin.svgo({
      	plugins: [
        	{ removeViewBox: true },
        	{ cleanupIDs: false }
        ]
    	})
		], { verbose: true }))
		.pipe(gulp.dest('./../themes/lisa/images'))
		done();
});

// --- Images end --- //

// --- Watch --- //
gulp.task('watch', function() {
  livereload.listen();
  gulp.watch('./../modules/custom/**/src/sass/**/*.scss', gulp.series('sass-compile-modules'));
  //gulp.watch('./../modules/custom/**/src/js/**/*.js', gulp.series('js-lint-modules'));
	gulp.watch('./../themes/**/src/sass/**/*.scss', gulp.series('sass-compile-themes'));
	gulp.watch('./../themes/**/src/js/**/*.js', gulp.series('js-lint-themes'));
});
// --- Watch end --- //

html.html.twig

{#
/**
 * @file
 * Theme override for the basic structure of a single Drupal page.
 *
 * Variables:
 * - logged_in: A flag indicating if user is logged in.
 * - root_path: The root path of the current page (e.g., node, admin, user).
 * - node_type: The content type for the current node, if the page is a node.
 * - head_title: List of text elements that make up the head_title variable.
 *   May contain one or more of the following:
 *   - title: The title of the page.
 *   - name: The name of the site.
 *   - slogan: The slogan of the site.
 * - page_top: Initial rendered markup. This should be printed before 'page'.
 * - page: The rendered page markup.
 * - page_bottom: Closing rendered markup. This variable should be printed after
 *   'page'.
 * - db_offline: A flag indicating if the database is offline.
 * - placeholder_token: The token for generating head, css, js and js-bottom
 *   placeholders.
 *
 * @see template_preprocess_html()
 */
#}
<!DOCTYPE html>
<html{{ html_attributes }}>
  <head>
    <head-placeholder token="{{ placeholder_token|raw }}">
    <title>{{ head_title|safe_join(' | ') }}</title>
    <css-placeholder token="{{ placeholder_token|raw }}">
    <js-placeholder token="{{ placeholder_token|raw }}">
  </head>
  <body{{ attributes }}>
    {#
      Keyboard navigation/accessibility link to main content section in
      page.html.twig.
    #}
    <a href="#main-content" class="visually-hidden focusable">
      {{ 'Skip to main content'|t }}
    </a>
    {{ page_top }}
    {{ page }}
    {{ page_bottom }}
    <js-bottom-placeholder token="{{ placeholder_token|raw }}">
  </body>
</html>

package.json

{
  "name": "Gulp",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "postinstall": "find node_modules/ -name '*.info' -type f -delete"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "eslint": "^5.15.3",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^4.1.0",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-react": "^7.12.4",
    "gulp": "^4.0.0",
    "gulp-autoprefixer": "^6.0.0",
    "gulp-eslint": "^5.0.0",
    "gulp-if": "^2.0.2",
    "gulp-imagemin": "^5.0.3",
    "gulp-livereload": "^4.0.1",
    "gulp-sass": "^4.0.2",
    "gulp-sourcemaps": "^2.6.5",
    "prettier": "^1.16.4"
  }
}

page.html.twig

{#
/**
 * @file
 * Theme override to display a single page.
 *
 * The doctype, html, head and body tags are not in this template. Instead they
 * can be found in the html.html.twig template in this directory.
 *
 * Available variables:
 *
 * General utility variables:
 * - base_path: The base URL path of the Drupal installation. Will usually be
 *   "/" unless you have installed Drupal in a sub-directory.
 * - is_front: A flag indicating if the current page is the front page.
 * - logged_in: A flag indicating if the user is registered and signed in.
 * - is_admin: A flag indicating if the user has permission to access
 *   administration pages.
 *
 * Site identity:
 * - front_page: The URL of the front page. Use this instead of base_path when
 *   linking to the front page. This includes the language domain or prefix.
 *
 * Page content (in order of occurrence in the default page.html.twig):
 * - messages: Status and error messages. Should be displayed prominently.
 * - node: Fully loaded node, if there is an automatically-loaded node
 *   associated with the page and the node ID is the second argument in the
 *   page's path (e.g. node/12345 and node/12345/revisions, but not
 *   comment/reply/12345).
 *
 * Regions:
 * - page.header: Items for the header region.
 * - page.primary_menu: Items for the primary menu region.
 * - page.secondary_menu: Items for the secondary menu region.
 * - page.highlighted: Items for the highlighted content region.
 * - page.help: Dynamic help text, mostly for admin pages.
 * - page.content: The main content of the current page.
 * - page.sidebar_first: Items for the first sidebar.
 * - page.sidebar_second: Items for the second sidebar.
 * - page.footer: Items for the footer region.
 * - page.breadcrumb: Items for the breadcrumb region.
 *
 * @see template_preprocess_page()
 * @see html.html.twig
 */
#}
<div class="layout-container">

  <header>
    {{ page.header }}
  </header>

  <main>

    <div class="container">
      {{ page.content }}
    </div>{# /.layout-content #}

  </main>

  {% if page.footer %}
    <footer>
      {{ page.footer }}
    </footer>
  {% endif %}

</div>{# /.layout-container #}

services.yml

parameters:
  session.storage.options:
    # Default ini options for sessions.
    #
    # Some distributions of Linux (most notably Debian) ship their PHP
    # installations with garbage collection (gc) disabled. Since Drupal depends
    # on PHP's garbage collection for clearing sessions, ensure that garbage
    # collection occurs by using the most common settings.
    # @default 1
    gc_probability: 1
    # @default 100
    gc_divisor: 100
    #
    # Set session lifetime (in seconds), i.e. the time from the user's last
    # visit to the active session may be deleted by the session garbage
    # collector. When a session is deleted, authenticated users are logged out,
    # and the contents of the user's $_SESSION variable is discarded.
    # @default 200000
    gc_maxlifetime: 200000
    #
    # Set session cookie lifetime (in seconds), i.e. the time from the session
    # is created to the cookie expires, i.e. when the browser is expected to
    # discard the cookie. The value 0 means "until the browser is closed".
    # @default 2000000
    cookie_lifetime: 2000000
    #
    # Drupal automatically generates a unique session cookie name based on the
    # full domain name used to access the site. This mechanism is sufficient
    # for most use-cases, including multi-site deployments. However, if it is
    # desired that a session can be reused across different subdomains, the
    # cookie domain needs to be set to the shared base domain. Doing so assures
    # that users remain logged in as they cross between various subdomains.
    # To maximize compatibility and normalize the behavior across user agents,
    # the cookie domain should start with a dot.
    #
    # @default none
    # cookie_domain: '.example.com'
    #
  twig.config:
    # Twig debugging:
    #
    # When debugging is enabled:
    # - The markup of each Twig template is surrounded by HTML comments that
    #   contain theming information, such as template file name suggestions.
    # - Note that this debugging markup will cause automated tests that directly
    #   check rendered HTML to fail. When running automated tests, 'debug'
    #   should be set to FALSE.
    # - The dump() function can be used in Twig templates to output information
    #   about template variables.
    # - Twig templates are automatically recompiled whenever the source code
    #   changes (see auto_reload below).
    #
    # For more information about debugging Twig templates, see
    # https://www.drupal.org/node/1906392.
    #
    # Not recommended in production environments
    # @default false
    debug: true
    # Twig auto-reload:
    #
    # Automatically recompile Twig templates whenever the source code changes.
    # If you don't provide a value for auto_reload, it will be determined
    # based on the value of debug.
    #
    # Not recommended in production environments
    # @default null
    auto_reload: true
    # Twig cache:
    #
    # By default, Twig templates will be compiled and stored in the filesystem
    # to increase performance. Disabling the Twig cache will recompile the
    # templates from source each time they are used. In most cases the
    # auto_reload setting above should be enabled rather than disabling the
    # Twig cache.
    #
    # Not recommended in production environments
    # @default true
    cache: false
  renderer.config:
    # Renderer required cache contexts:
    #
    # The Renderer will automatically associate these cache contexts with every
    # render array, hence varying every render array by these cache contexts.
    #
    # @default ['languages:language_interface', 'theme', 'user.permissions']
    required_cache_contexts: ['languages:language_interface', 'theme', 'user.permissions']
    # Renderer automatic placeholdering conditions:
    #
    # Drupal allows portions of the page to be automatically deferred when
    # rendering to improve cache performance. That is especially helpful for
    # cache contexts that vary widely, such as the active user. On some sites
    # those may be different, however, such as sites with only a handful of
    # users. If you know what the high-cardinality cache contexts are for your
    # site, specify those here. If you're not sure, the defaults are fairly safe
    # in general.
    #
    # For more information about rendering optimizations see
    # https://www.drupal.org/developing/api/8/render/arrays/cacheability#optimizing
    auto_placeholder_conditions:
      # Max-age at or below which caching is not considered worthwhile.
      #
      # Disable by setting to -1.
      #
      # @default 0
      max-age: 0
      # Cache contexts with a high cardinality.
      #
      # Disable by setting to [].
      #
      # @default ['session', 'user']
      contexts: ['session', 'user']
      # Tags with a high invalidation frequency.
      #
      # Disable by setting to [].
      #
      # @default []
      tags: []
  # Cacheability debugging:
  #
  # Responses with cacheability metadata (CacheableResponseInterface instances)
  # get X-Drupal-Cache-Tags and X-Drupal-Cache-Contexts headers.
  #
  # For more information about debugging cacheable responses, see
  # https://www.drupal.org/developing/api/8/response/cacheable-response-interface
  #
  # Not recommended in production environments
  # @default false
  http.response.debug_cacheability_headers: false
  factory.keyvalue:
    {}
    # Default key/value storage service to use.
    # @default keyvalue.database
    # default: keyvalue.database
    # Collection-specific overrides.
    # state: keyvalue.database
  factory.keyvalue.expirable:
    {}
    # Default key/value expirable storage service to use.
    # @default keyvalue.database.expirable
    # default: keyvalue.database.expirable
  # Allowed protocols for URL generation.
  filter_protocols:
    - http
    - https
    - ftp
    - news
    - nntp
    - tel
    - telnet
    - mailto
    - irc
    - ssh
    - sftp
    - webcal
    - rtsp

   # Configure Cross-Site HTTP requests (CORS).
   # Read https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
   # for more information about the topic in general.
   # Note: By default the configuration is disabled.
  cors.config:
    enabled: false
    # Specify allowed headers, like 'x-allowed-header'.
    allowedHeaders: []
    # Specify allowed request methods, specify ['*'] to allow all possible ones.
    allowedMethods: []
    # Configure requests allowed from specific origins.
    allowedOrigins: ['*']
    # Sets the Access-Control-Expose-Headers header.
    exposedHeaders: false
    # Sets the Access-Control-Max-Age header.
    maxAge: false
    # Sets the Access-Control-Allow-Credentials header.
    supportsCredentials: false

setup.txt

01. Install Drupal 8 locally, remembering to get latest version
	- Page url: https://www.drupal.org/download
02. Install modules via CMS: 
	- Admin Toolbar
		-- Page url: https://www.drupal.org/project/admin_toolbar
		-- Module zip url: https://ftp.drupal.org/files/projects/admin_toolbar-8.x-1.26.tar.gz
	- Paragraphs
		-- Page url: https://www.drupal.org/project/paragraphs
		-- Module zip url: https://ftp.drupal.org/files/projects/paragraphs-8.x-1.8.tar.gz
	- Entity Reference Revisions
		-- Page url: https://www.drupal.org/project/entity_reference_revisions
		-- Module zip url: https://ftp.drupal.org/files/projects/entity_reference_revisions-8.x-1.6.tar.gz
03. Check module dependances are installed
04. Create theme folder: 'themes/theme_name'
05. Create 'info' file: eg. 'theme_name.info.yml'
06. Create 'css' folder: 'themes/theme_name/css'
07. Create 'templates' folder: 'themes/theme_name/templates'
	- Create 'layout' folder: 'themes/theme_name/templates/layout'
08. Create 'src' folder: 'themes/theme_name/src'
	- Create 'js' folder: 'themes/theme_name/src/js'
	- Create 'sass' folder: 'themes/theme_name/src/sass'
	- Create 'images' folder: 'themes/theme_name/src/images'
09. Copy 'html.html.twig' file from: 'core/themes/stable/templates/layout' into 'themes/theme_name/templates/layout'
10. Copy 'page.html.twig' file from: 'core/themes/stable/templates/layout' into 'themes/theme_name/templates/layout'
	- Review regions, and remove unwanted regions
		-- 'page.header'
		-- 'page.content'
		-- 'page.footer'
11. Enable theme in CMS
12. Disable any other themes
13. Disable unwanted blocks
14. Delete 'article' content type
15. Copy 'default.services.yml' file from: 'sites/default' into 'sites/default'
	- Rename to 'services.yml'
	- Under 'twig.config' change the following: 
		-- debug: true
		-- auto_reload: true
		-- cache: false
16. Define site front page: CMS -> Configuration -> System -> Basic Site Settings
17. Define input fields for pages using Paragraph module
18. Hide labels: CMS -> Page -> Manage Display tab
	- Change label visibility to hidden
19. Remove excess div containers from layout file: 'themes/theme_name/templates/field'
20. Create 'gulp' folder in root
	- Create 'gulpfile.js' file
	- Create 'package.json' file
21. Turn off file aggregation: CMS -> Configuration -> Development -> Performance
22. Create 'style.css' file: 'themes/theme_name/css/style.css'
23. Create 'site.js' file: 'themes/theme_name/js/site.js'
24. Check the website and make sure the files are pulling through
25. Copy 'site.js' file into: 'themes/theme_name/src/js'
26. Create 'sass' folder in: 'themes/theme_name/src'
27. Copy Bootstrap and other sass partials into: 'themes/theme_name/src'
28. Create 'field.html.twig' into: 'themes/theme_name/templates/field'
29. Create '*.twig' files for all neccessary paragraph types

site.js

(function ($) {

/*
 * Add body class on page load
 */
// jQuery(window).load(function() {
	jQuery('body').addClass('loaded');
// } );

// jQuery(document).ready(function($) {
	// Adds a class to the footer in single declaration
	$('header').addClass('header');
// });

})(jQuery);

style.css

body{
	background-color: teal;
}

theme_name.info.yml

name: Lisa
type: theme
description: 'Lisa theme'
core: 8.x
libraries:
  - lisa/lisa-style
regions:
  header: Header
  content: Content
  footer: Footer