Commit ed47abe5 authored by bramtenhove's avatar bramtenhove
Browse files

DS-4398 by bramtenhove: Fix some coding standards

parent 8708a946
# Social Blue
Social Blue is made to provide as a demo as well as a default style for Open Social. This is a sub theme of socialbase.
Social Blue is made to provide as a demo as well as a default style for Open
Social. This is a sub theme of socialbase.
Social Blue uses Gulp.js as a task runner, so that it can do many tasks automatically:
Social Blue uses Gulp.js as a task runner, so that it can do many tasks
automatically:
- Build CSS from your Sass using libSass and node-sass.
- Add vendor prefixes for the browsers you want to support using Autoprefixer.
- Build a style guide of your components with KSS-Node.
......@@ -9,13 +11,22 @@ Social Blue uses Gulp.js as a task runner, so that it can do many tasks automati
- Set up to deploy your style guide to a custom location
# What can I do with this theme?
The safest and fastest way to get started is to duplicate this theme and rename it to your custom theme name. You need to make sure all instances of 'socialblue' are renamed to guarantee a proper working theme. Socialblue itself will be updated in the future with new features, so it is best not to make changes. You might lose it when updating.
The safest and fastest way to get started is to duplicate this theme and rename
it to your custom theme name. You need to make sure all instances of
'socialblue' are renamed to guarantee a proper working theme. Socialblue itself
will be updated in the future with new features, so it is best not to make
changes. You might lose it when updating.
If you want to utilise the gulp plugins we have provided you need to install the plugins again, via `yarn install` (which will read the package.json file).
If you want to utilise the gulp plugins we have provided you need to install the
plugins again, via `yarn install` (which will read the package.json file).
As you can see in the info file, we are mostly extending the socialbase libraries with the socialblue variant. This means there is a relation between the two and because we load some libraries via twig files conditionally this ensure we are not forgetting to load the 'styling' layer for a component.
As you can see in the info file, we are mostly extending the socialbase
libraries with the socialblue variant. This means there is a relation between
the two and because we load some libraries via twig files conditionally this
ensure we are not forgetting to load the 'styling' layer for a component.
You can override template files just like in any other theme. Just create a `templates` folder and put you new template files there.
You can override template files just like in any other theme. Just create a
`templates` folder and put you new template files there.
......@@ -26,16 +37,21 @@ Any questions or feedback?
# Getting started with your sub theme
### Drupal settings
Before you start theming there are a few things that might be convenient. In html/sites/default there is a services.yml file. Make sure to set
Before you start theming there are a few things that might be convenient. In
html/sites/default there is a services.yml file. Make sure to set
* twig.config -> debug: true
* twig.config -> auto_reload: true
* twig.config -> cache: false
Also in sites default you will find an example.settings.local.php file. Duplicate this file and remove the example part. After you have configured these files you need to rebuild the caches. This will speed up you development process.
Also in sites default you will find an example.settings.local.php file.
Duplicate this file and remove the example part. After you have configured these
files you need to rebuild the caches. This will speed up you development
process.
### Working with Gulp
1. [Install Yarn](https://yarnpkg.com/en/docs/install), see their website for documentation
1. [Install Yarn](https://yarnpkg.com/en/docs/install), see their website for
documentation
2. Install the gulp-cli tool globally. Normally, installing a Node.js globally
is not recommended, which is why both Gulp and Grunt have created wrapper
......@@ -45,7 +61,8 @@ Also in sites default you will find an example.settings.local.php file. Duplicat
```
npm install -g gulp-cli
3. The package.json file contains the versions of all the node packages you need. To install them run:
3. The package.json file contains the versions of all the node packages you
need. To install them run:
```
yarn install
```
......@@ -56,8 +73,8 @@ Also in sites default you will find an example.settings.local.php file. Duplicat
options.drupalURL = 'http://localhost';
```
4. There are different gulp tasks. What each gulp task does is described in the gulpfile with the task itself. To run a gulp task, type:
4. There are different gulp tasks. What each gulp task does is described in the
gulpfile with the task itself. To run a gulp task, type:
```
gulp [taskname]
```
\ No newline at end of file
```
......@@ -24,73 +24,73 @@ function socialblue_form_system_theme_settings_alter(&$form, FormStateInterface
if ($system_theme_settings == 'socialblue' || $system_theme_settings == 'socialsaas') {
$config = \Drupal::config($system_theme_settings . '.settings');
$form['open_social_settings'] = array(
$form['open_social_settings'] = [
'#type' => 'vertical_tabs',
'#title' => t('Opensocial settings'),
'#weight' => -50,
'#collapsible' => TRUE,
'#collapsed' => TRUE,
);
];
$form['os_color_settings'] = array(
$form['os_color_settings'] = [
'#type' => 'details',
'#group' => 'open_social_settings',
'#title' => t('Border radius'),
'#weight' => 20,
'#collapsible' => TRUE,
'#collapsed' => TRUE,
);
];
$form['os_font_settings'] = array(
$form['os_font_settings'] = [
'#type' => 'details',
'#group' => 'open_social_settings',
'#title' => t('Fonts'),
'#weight' => 10,
'#collapsible' => TRUE,
'#collapsed' => TRUE,
);
];
$form['os_color_settings']['card_radius'] = array(
$form['os_color_settings']['card_radius'] = [
'#type' => 'number',
'#title' => t('Card border radius (px)'),
'#default_value' => $config->get('card_radius'),
'#description' => t('Define the roundness of cards corners.'),
);
];
$form['os_color_settings']['form_control_radius'] = array(
$form['os_color_settings']['form_control_radius'] = [
'#type' => 'number',
'#title' => t('Form control border radius (px)'),
'#default_value' => $config->get('form_control_radius'),
'#description' => t('Define the roundness of the corners of form-controls, like <code>input</code>, <code>textarea</code> and <code>select</code>'),
);
];
$form['os_color_settings']['button_radius'] = array(
$form['os_color_settings']['button_radius'] = [
'#type' => 'number',
'#title' => t('Button border radius (px)'),
'#default_value' => $config->get('button_radius'),
'#description' => t('Define the roundness of buttons corners.'),
);
];
$form['os_email_settings'] = array(
$form['os_email_settings'] = [
'#type' => 'details',
'#group' => 'open_social_settings',
'#title' => t('E-mail'),
'#weight' => 30,
'#collapsible' => TRUE,
'#collapsed' => TRUE,
);
];
$form['os_email_settings']['email_logo'] = array(
$form['os_email_settings']['email_logo'] = [
'#type' => 'managed_file',
'#title' => t('Logo for e-mails'),
'#description' => t('Upload a logo which is shown in e-mail sent by the platform. This overrides the default logo that is also used in e-mails when no logo is provided here.'),
'#default_value' => $config->get('email_logo'),
'#upload_location' => 'public://',
'#upload_validators' => [
'file_validate_is_image' => array(),
'file_validate_extensions' => array('gif png jpg jpeg'),
'file_validate_is_image' => [],
'file_validate_extensions' => ['gif png jpg jpeg'],
],
);
];
// Font tab.
$fonts = [];
......@@ -103,13 +103,13 @@ function socialblue_form_system_theme_settings_alter(&$form, FormStateInterface
}
$form['os_font_settings']['font_primary'] = array(
$form['os_font_settings']['font_primary'] = [
'#type' => 'select',
'#title' => t('Font'),
'#options' => $fonts,
'#default_value' => $config->get('font_primary'),
'#description' => t("The font family to use."),
);
];
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment