SCSS Bootstrap 4 customization via standard Bootstrap 4 variables

Tom

Asked On June 11, 2019 11:39 AM UTC

Hello,

I'm setting up Angular - Bootstrap 4 project with SCSS support and thinking about use Syncfusion Angular components as main UI framework for new web app. There are some problems/questions with that approach.

I have standard Bootstrap 4 custom theme setup in my styles.scss file:

$enable-validation-icons: true;
$enable-pointer-cursor-for-buttons: true;
$body-bg: white;
$font-family-sans-serif: 'Roboto Condensed';
$font-family-monospace: 'Roboto Mono';
$font-size-base: 0.8rem;

$theme-colors: (
  primary: #DD2E44,
  secondary: #f0f0f0,
  info: #7EBCFA,
  success: #28A745,
  warning: #FFC107,
  danger: #DC3545);
  
$input-btn-focus-width: 2px;
$badge-font-size: 9px;

@import '~bootstrap/scss/bootstrap';

@import '~@syncfusion/ej2-angular-dropdowns/styles/bootstrap4.scss'; // Syncfusion part

I thought that Syncfusion components are using these standard Bootstrap 4 variables to setup components theme but then I found in your repos _bootstrap4-definition.scss files which containing absolute values of your own variables used by other Syncfusion scss files.

Is there any way to setup your framework to use standard Bootstrap 4 variables?

Regards,
Tom

Reply | Reply with quote

Jesus Arockia Sankaran S [Syncfusion]

Replied On June 13, 2019 12:12 PM UTC

Hi Tom,

Greetings from Syncfusion.

We can override the Syncfusion component styles using standard Bootstrap 4 variables as shown in the snippet and reference image below where we have changed the primary variable color of Bootstrap to "Red" and it is applied in our Syncfusion component that you can get the sample form the link below.

Code Snippet 1: (order of importing scss files for calendar component)

@import '../node_modules/bootstrap/scss/bootstrap.scss';

@import '../node_modules/@syncfusion/ej2-base/styles/bootstrap4.scss';

@import '../node_modules/@syncfusion/ej2-angular-buttons/styles/bootstrap4.scss';

@import '../node_modules/@syncfusion/ej2-angular-calendars/styles/bootstrap4.scss';

Code Snippet 2: (changing primary variable color)

$primary: red !default;

Reference Image:

Sample: http://www.syncfusion.com/downloads/support/forum/145177/ze/angular-bootstrap4-1983497608

Please get back to us if you need any further assistance on this.

Regards,

Jesus Arockia Sankaran S

Reply | Reply with quote

Tom

Replied On June 13, 2019 12:30 PM UTC

Hi,

Thanks for the answer but setting up colors is simple case.

How about using other Bootstrap 4 variables in Syncfusion SCSS files? There are a lot of customization that is possible in Bootstrap 4 custom theme - https://github.com/twbs/bootstrap/blob/master/scss/_variables.scss

Is there any way to use those variables without spying at every Syncfusion SCSS _bootstrap4-definition.scss file and overriding one variable after another for each component?

Regards,

Tom

Reply | Reply with quote

Jesus Arockia Sankaran S [Syncfusion]

Replied On June 14, 2019 01:46 PM UTC

Hi Tom,

Sorry for the inconvenience.

Question	Answer
How about using other Bootstrap 4 variables in Syncfusion SCSS files?	We developed our Bootstrap 4 theme with its specifications, but we only provided support to override the color variables.
Is there any way to use those variables without spying at every Syncfusion SCSS _bootstrap4-definition.scss file and overriding one variable after another for each component?	We currently need to override the specific component variables in order to customize it.

Please get back to us if you need any further assistance on this.

Regards,

Jesus Arockia Sankaran S

Reply | Reply with quote

Tom

Replied On June 14, 2019 05:31 PM UTC

Ok. Thanks.

Regards,

Tom

Reply | Reply with quote

Jesus Arockia Sankaran S [Syncfusion]

Replied On June 17, 2019 10:39 AM UTC

Hi Tom,

Thanks for your update.

Regards,

Jesus Arockia Sankaran S

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
145177	Jun 11,2019 11:39 AM UTC	Jun 17,2019 10:39 AM UTC	Angular - EJ 2	5

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US