Last active
May 9, 2019 14:06
-
-
Save ScarletPonytail/d57731b6655ddf4f014a1bef2bc4434e to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="formatted-text"> | |
{{ items }} | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{# | |
/** | |
* @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 %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 --- // |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{# | |
/** | |
* @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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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" | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{# | |
/** | |
* @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 #} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body{ | |
background-color: teal; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
name: Lisa | |
type: theme | |
description: 'Lisa theme' | |
core: 8.x | |
libraries: | |
- lisa/lisa-style | |
regions: | |
header: Header | |
content: Content | |
footer: Footer |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment