README

Seeds: Kickoff distribution for SMEs

Light distribution to kick off all projects regardless scale, you can use it to speed up your projects.

Seeds focusing on Arabic website with RTL interfaces so if you have any issue with your Arabic language website you are more than welcome to contribute with us.

Sponsored and developed by:

Sprintive is a web solution provider which transform ideas into realities, where humans are the center of everything, and Drupal is the heart of our actions, it has built and delivered Drupal projects focusing on a deep understanding of business goals and objective to help companies innovate and grow.

Documentation

• Creating a subtheme
• Styling using sass
• Enabling RTL styling
• Mixins you can use in sass
• Sass placeholder classes that you can extend
• CKEditor RTL and LTR styling
• Using responsive font sizes in sass
• Disable bootstrap container in certian content types
• Override blazy loader
• Set default medias

Creating a subtheme

Creating a subtheme is simple, you have to have a git init in your project, then by running the create_subtheme.shand following the instructions, you would have a ready-to-go theme in your hands. Run:

./public_html/profiles/contrib/seeds/themes/custom/seeds_coat/scripts/create_subtheme.sh

You will be asked to enter you theme machine name and label, after that, the theme is created and activated automatically.

Styling using sass

After you created your subtheme, it will automatically run npm installinside the subtheme folder, all you have to do is running:

gulp watch OR npm start

Then begin styling. After you are done, make sure to run:

gulp build OR npm run build

To build and minify the css when deploying to production.

There are certian settings you can modify in the theme.json:

{
	"livereloadPort": 35729,
	"rtlEnabled": false
}

Enabling RTL styling

In you THEMENAME.theme, find the following lines:

/* Comment out and change "THEMENAME" to enable rtl style */
// $variables['page']['#attached']['library'][] = 'THEMENAME/rtl';

Comment this out to enable RTL styling.

Mixins you can use in sass

@include form($gutter: 15px, $min-width: 180px);

This mixin defines general classes for forms:

• .form-2col
• .form-3col
• .form-4col

When you are creating a webform, you can create a container and then add one of the above to act as a row that contains form elements. By default, it is added for all webforms.

@include form-inline($gutter: 5px, $break: 767px);

Define an inline form with gutter and a maximum breakpoint.

@include responsive-image-blazy($lg, $md, $sm);

Using it with the combination of seeds_coat responsive image styles, it can prove useful. This mixin is used when you want to use blazy with core responsive image styles to avoid content reflows using padding-top check the _mixin.scss file for additonal info.

.node--type-article {
	@include responsive-image-blazy(
		('w':1200,'h':900),
		('w':900,'h':600),
		('w':400,'h':400)
	);
}

Where 'w' is the width of the image and 'h' is the height. The mixin uses three bootstrap breakpoints: lg, md, sm

@include shadow();

Sets a shadowy container on the element. Useful with images.

@include fontawesome($content, $psuedo: 'before');

Includes a fontawesome icon. See Fontawesome v4

@include fontawesome('\f2d1');

Sass placeholder classes that you can extend

@extend %center

Centers an element.

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: auto;

@extend %absolute-full

Set position to absolute and stretch it.

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;

CKEditor RTL and LTR styling

Go to /admin/config/content/seeds or Admin >> Configuration >> Content Authoring >> Seeds Content Settings, You will see CKEditor styling settings. By default, it is initialized, but if you want to change it, feel free to do it.

Using responsive font sizes in sass

in your _theme-variables.scss file, comment out this line:

// $enable-responsive-font-sizes: true

You can now use the bootstrap 4 build in mixin:

@include  rfs(64px);
// OR
@include  responsive-font-size(64px);
// OR
@include  font-size(64px);

Disable bootstrap container in certian content types

Go to /admin/structure/types, Click edit on a content type. You will be met with various settings. At the bottom, you will see Container settings, Navigate there and enable Fluid container to disable the bootstrap container.

Override blazy loader

Go to /admin/config/seeds_media. You will see blazy settings. Check the Override blazy loader? then set the background image and color to something you like, hit save and flush the cache, you should see the loader takes a different appearence.

Set default medias

We also provide a neat feature, you can set some default medias to not allow accidental edits by the client. Simply, go edit any media, you will see at the bottom a checkbox, Default media, check it and save, now only users with Bypass Default Media Access permission can edit the media.