Commit 9ec137f5 authored by bramtenhove's avatar bramtenhove
Browse files

DS-4398 by bramtenhove: Fix some coding standards

parent ed47abe5
......@@ -15,7 +15,9 @@ Inserted KSS based styleguide
* See gulpfile for options that are passed on
* The folder os-builder holds the assets and layout for the styleguide
* Removed hook_theme_suggestions_fieldset_alter and hook_theme_suggestions_details_alter overrides which are not needed anymore because of social base theme update (2.1.0).
* Removed hook_theme_suggestions_fieldset_alter and
hook_theme_suggestions_details_alter overrides which are not needed anymore
because of social base theme update (2.1.0).
* Class name updates for changed components in socialbase update 2.1.0
* Set hover color of button links to remain primary color
* Remove grid mixins (deprecated)
......@@ -5,37 +5,37 @@
* Lists available colors and color schemes for the Social Blue theme.
*/
$info = array(
$info = [
// Available colors and color labels used in theme.
'fields' => array(
'fields' => [
'brand-bg-primary' => t('Primary color'),
'brand-bg-secondary' => t('Secondary color'),
'brand-bg-accent' => t('Accent color'),
'brand-text-primary' => t('Link color'),
),
],
// Pre-defined color schemes.
'schemes' => array(
'default' => array(
'schemes' => [
'default' => [
'title' => t('Social Blue (default)'),
'colors' => array(
'colors' => [
'brand-bg-primary' => '#29abe2',
'brand-bg-secondary' => '#1f80aa',
'brand-bg-accent' => '#ffc142',
'brand-text-primary' => '#33b5e5',
),
),
),
],
],
],
// CSS files (excluding @import) to rewrite with new color scheme.
// @TODO make sure we rewrite the correct color.css
'css' => array(
'css' => [
'assets/css/brand.css',
),
],
// Files to copy.
'copy' => array(
'copy' => [
'logo.svg',
),
],
/**
* Gradient definitions.
......@@ -70,4 +70,4 @@ $info = array(
],
],
],
);
];
# Style Guide for the Open Social <span class="text-primary">Blue</span> theme
__Open Social is a Drupal 8 distribution for building social communities and intranets.__
__Open Social is a Drupal 8 distribution for building social communities and
intranets.__
A Style Guide is a set of standards to ensure a consistent design and identity. Additionally, from a development point of view it serves to improve the speed and ease of code deployment. A style guide consolidates the front-end code while comprehensively documenting the visual language, such as color palettes and fonts. To ensure it is always up-to-date, this style guide is automatically generated from comments in the Sass files.
A Style Guide is a set of standards to ensure a consistent design and identity.
Additionally, from a development point of view it serves to improve the speed
and ease of code deployment. A style guide consolidates the front-end code while
comprehensively documenting the visual language, such as color palettes and
fonts. To ensure it is always up-to-date, this style guide is automatically
generated from comments in the Sass files.
The goals for creating this style guide are:
1. Streamline the workflow for designers and developers
2. Maintain a consistency of the theme styles and components
3. Create a focal point for our Design and User Experience work, both for ourselves and for the community
3. Create a focal point for our Design and User Experience work, both for
ourselves and for the community
This theme is built upon [Drupal Bootstrap](https://www.drupal.org/project/bootstrap), which means Bootstrap is used as the base theme. Furthermore it is enhanced with a default brand styling and extra components. For the extra components mostly [Material Design](https://www.google.com/design/spec/material-design/introduction.html) principles are used.
This theme is built upon
[Drupal Bootstrap](https://www.drupal.org/project/bootstrap), which means
Bootstrap is used as the base theme. Furthermore it is enhanced with a default
brand styling and extra components. For the extra components mostly
[Material Design](https://www.google.com/design/spec/material-design/introduction.html)
principles are used.
### Organisation
Design components are reusable designs that can be applied using just the CSS class names specified in the component. We categorize our components to make them easy to find.
Design components are reusable designs that can be applied using just the CSS
class names specified in the component. We categorize our components to make
them easy to find.
<dl>
<dt>**Base**</dt>
<dd>`components/01-base` — The default “base” components apply to HTML elements. Since all of the rulesets in this class of styles are HTML elements, the styles apply automatically.</dd>
<dd>`components/01-base` — The default “base” components apply to HTML elements.
Since all of the rulesets in this class of styles are HTML elements, the styles
apply automatically.</dd>
<dt>**Atoms**</dt>
<dd>`components/02-atoms` — Smallest building blocks for our components.</dd>
<dt>**Molecules**</dt>
<dd>`components/03-molecules` — Small reusable components. Usually consists of smaller atoms. </dd>
<dd>`components/03-molecules` — Small reusable components. Usually consists of
smaller atoms. </dd>
<dt>**Organisms**</dt>
<dd>`components/04-organisms` — Organisms are larger blocks to can be placed in a template and do now rely on other components.</dd>
<dd>`components/04-organisms` — Organisms are larger blocks to can be placed in
a template and do now rely on other components.</dd>
<dt>**Templates**</dt>
<dd>`components/05-templates` — Templates consist mostly of groups of organisms put together.</dd>
<dd>`components/05-templates` — Templates consist mostly of groups of organisms
put together.</dd>
<dt>**Libraries**</dt>
<dd>`components/06-libraries` — External libraries that can be used by the other components.</dd>
<dd>`components/06-libraries` — External libraries that can be used by the other
components.</dd>
</dl>
In addition to the components, our component library also contains these folders:
In addition to the components, our component library also contains these
folders:
<dl>
<dt>**Configuration**</dt>
<dd>`components/00-config` — This Sass documents the colors used throughout the site and various Sass variables, functions and mixins. </dd>
<dd>`components/00-config` — This Sass documents the colors used throughout the
site and various Sass variables, functions and mixins. </dd>
<dt>**Style guide helper files**</dt>
<dd>`components/styleguide` — The files needed to build this style guide; includes some CSS overrides for the default KSS style guide</dd>
<dd>`components/styleguide` — The files needed to build this style guide;
includes some CSS overrides for the default KSS style guide</dd>
<dt>**Generated files**</dt>
<dd>`assets` — location of the generated CSS, images and javascript; don't alter these files directly</dd>
<dd>`assets` — location of the generated CSS, images and javascript; don't alter
these files directly</dd>
</dl>
......@@ -6,7 +6,6 @@ type: theme
base theme: socialbase
core: 8.x
version: '1.1'
libraries:
- socialblue/brand
......
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