Bootstrap - Sass - Gulp - Toolchain

[U4EA]

In what I think will be the finishing touch, instead of including the entire bootstrap.js script I have now put the Bootstrap individual .js files into my javascript common folder and simply including them in the JSON like this: -

[

  "vendor/bower/jquery/dist/jquery.js",

  "vendor/yiisoft/yii2/assets/yii.js",

  "vendor/yiisoft/yii2/assets/yii.validation.js",

  "vendor/yiisoft/yii2/assets/yii.activeForm.js",

  "assets/js/common_files/scrolltotop/scrolltotop.js",

  "assets/js/common_files/bootstrap/affix.js"

]

I think that is now the asset functionality minimised and organised and I can start mapping out the database now.

[jacmoe (Jacob Moena)]

[color="#006400"]/* Moved to Tips, Snippets and Tutorials */[/color]

[U4EA]

Bootstrap 4 will be out any day now, and it is now based on Sass.

I have been refining the assets on my site further - after an initial strip-out of the components I obviously didn’t need I looked more at the .scss files, altering variables etc. Anyway, I also took the time to look at Bootstrap 4 and it seems to me to be a lot cleaner and better organised.

As you know, I am compiling all the asset files myself and publishing directly. Do you have any idea if I will run into any problems if I entirely replace the current B3 files with B4 and start compiling from there? What I mean is, do you know if I am going to run into any insurmountable problems? Fixing static HTML where need be to accommodate changes to B4 HTML/CSS selectors shouldn’t be a major problem but I am concerned the current set of Bootstrap widgets. I have looked over the changes between B3 and B4 and I am not particularly concerned with using new components, I would just like to make sure I can still use Nav/Navbar/ActiveForm with any issues. I see have removed some descendants and replace them with classes instead but I should be able to workaround that OK.

Any thoughts?

[jacmoe (Jacob Moena)]

I have tried and had to change some lines in the Bootstrap Menu (IIRC) because they’ve changed the required markup.

Nothing major.

However, I discovered that I also had to change other widgets - like Kartik and in third-party modules…

And then I began to think to myself: why am I doing this?

I can’t wait to get started with Bootstrap 4 - it is much cleaner and nicer overall - but do I really want to maintain customized versions of ‘all the things’ ?

The good news is that the changes are small, though - and that it will not take long before the various extensions gets updated to B4. - or: I hope!

If you are just using Yii2 Bootstrap widgets, then by all means - the changes could be done in a short time.

I guess it is a matter of how many third-party scripts you have and how psyched you are.

[U4EA]

I was worried you were going to give an answer like that

Yeah, the Bootstrap 4 Nav looks like it has different markup, but it also looks like this could be taken care of by inclusion of the new html classes in the widget config.

The fronend of my app is going to be quite simple, especially in terms of widgets. Actually, when I think about it, it’s pretty much going to be identical to the skeleton version with perhaps the addition of some basic display items (I doubt I will even be using breadcrumbs), which can probably be hardcoded any way.

The backend is a different matter - it will be a admin app and fairly complex. There will be multiple widgets involved but I also think the complexity will be more in the controllers and models, rather than the views so I am not sure it will get too expansive in regards to Widget use.

I think I will probably give B4 a shot. Asides from the new features and the fact I would be moving over to it eventually, there is also the fact that it seems so much cleaner. The _variables.scss file alone reduces the headache of it all as it’s smaller and a lot more organised than the B3 version.

[U4EA]

I tried switching over to the B4 asset files with the current B3 based setup I have and I almost started crying.

I wont move to B4 until it has matured a bit and the Yii2 classes are ready for it. In the meantime, the work I will do with uncluttering things, removing needless code/files, improving the file structure, making variables global, setting default colour schemes etc will at least in part be able to be brought over to B4 when I adopt it.

[U4EA]

I am hoping this isn’t too massive a post in terms of text volume…

I have spend a good few hours cleaning up the _variables.scss file in the Bootstrap 3 (v3.3.6 to be more precise) SASS library. The reason for this was that for me I really wanted

1. A table of contents

2. Less fluff in terms of comments and the positioning of the comments on separate lines, bloating the file line count

3. The use of tabs to have all the variable values in neat order

Additionally (and the actual reason I started cleaning it up) is that I wanted all the color css variables in a single file as I much prefer being able to get to the colours quickly and easily when styling the frontend. Every coder has their own mannerisms when working and when working on frontend stuff I want to be able to see the colour scheme clearly in 1 place, especially when using the likes of SASS which passes previous variables as arguments for computing other variables.

So below there will be 2 code dumps:-

The first is the contents of my _colours.scss file which contains only the colour variables from the v3.3.36 library, in a single file, with a table on contents.

The second is the remaining contents of my _variables.scss file, cleaned up to take out comment fluff etc, with a table on contents.

Please note that: -

1. All references to Glyphicons have been removed from the files as I don’t use them, they are deprecated in Bootstrap, having been removed entirely in the upcoming B4.

2. When running your compiler, include _colours.scss first so you don’t get a load of variable-not-found errors.

3. References to shadows remaining in the _variables.scss file, and this should be the only time colour references remain. Example: -

// CAROUSEL

$carousel-text-shadow:                0 1px 2px rgba(0,0,0,.6) !default;

4. Compilation using these files has been run and it is compiling without error (again, make sure you are not including Glyphicons or you will get errors).

I am not sure if this will be of much use to anyone, but considering the time I put into it, I thought I would put it out there in the off-chance it might help other developers.

_colours.scss…

// Table of Contents

  // BASE

  // SCAFFOLDING

  // COMPONENTS

  // TABLES

  // BUTTONS

  // FORMS

  // DROPDOWNS

  // NAVBAR

  // NAV

  // TABS

  // PILLS

  // PAGINATION

  // PAGER

  // JUMBOTRON

  // FORM STATES AND ALERTS

  // TOOLTIP

  // POPOVERS

  // LABELS

  // MODALS

  // ALERTS

  // PROGRESS BARS

  // LIST GROUP

  // PANELS

  // THUMBNAILS

  // WELLS

  // BADGES

  // BREADCRUMBS

  // CAROUSEL

  // CLOSE

  // CODE

  // TYPE


// BASE

$gray-base:                                       #000 !default;

$gray-darker:                                     lighten($gray-base, 13.5%) !default; // #222

$gray-dark:                                       lighten($gray-base, 20%) !default;   // #333

$gray:                                            lighten($gray-base, 33.5%) !default; // #555

$gray-light:                                      lighten($gray-base, 46.7%) !default; // #777

$gray-lighter:                                    lighten($gray-base, 93.5%) !default; // #eee

$brand-primary:                                   darken(#428bca, 6.5%) !default; // #337ab7

$brand-success:                                   #5cb85c !default;

$brand-info:                                      #5bc0de !default;

$brand-warning:                                   #f0ad4e !default;

$brand-danger:                                    #d9534f !default;


// SCAFFOLDING

// `<body>`.

$body-bg:                                         #fff !default;

$text-color:                                      $gray-dark !default;

// link global

$link-color:                                      $brand-primary !default;

$link-hover-color:                                darken($link-color, 15%) !default;


// COMPONENTS

//** Global color for active items (e.g., navs or dropdowns).

$component-active-color:                          #fff !default;

$component-active-bg:                             $brand-primary !default;


// TABLES

// Default for all tables.

$table-bg:                                        transparent !default;

$table-border-color:                              #ddd !default;

$table-bg-accent:                                 #f9f9f9 !default; //** Background color used for `.table-striped`.

$table-bg-hover:                                  #f5f5f5 !default; //** Background color used for `.table-hover`.

$table-bg-active:                                 $table-bg-hover !default;


// BUTTONS

$btn-default-color:                               #333 !default;

$btn-default-bg:                                  #fff !default;

$btn-default-border:                              #ccc !default;

$btn-primary-color:                               #fff !default;

$btn-primary-bg:                                  $brand-primary !default;

$btn-primary-border:                              darken($btn-primary-bg, 5%) !default;

$btn-success-color:                               #fff !default;

$btn-success-bg:                                  $brand-success !default;

$btn-success-border:                              darken($btn-success-bg, 5%) !default;

$btn-info-color:                                  #fff !default;

$btn-info-bg:                                     $brand-info !default;

$btn-info-border:                                 darken($btn-info-bg, 5%) !default;

$btn-warning-color:                               #fff !default;

$btn-warning-bg:                                  $brand-warning !default;

$btn-warning-border:                              darken($btn-warning-bg, 5%) !default;

$btn-danger-color:                                #fff !default;

$btn-danger-bg:                                   $brand-danger !default;

$btn-danger-border:                               darken($btn-danger-bg, 5%) !default;

$btn-link-disabled-color:                         $gray-light !default;


// FORMS

$input-bg:                                        #fff !default;

$input-bg-disabled:                               $gray-lighter !default;

$input-color:                                     $gray !default;

$input-border:                                    #ccc !default;

$input-border-focus:                              #66afe9 !default;

$input-color-placeholder:                         #999 !default;

$legend-color:                                    $gray-dark !default;

$legend-border-color:                             #e5e5e5 !default;

// textual input addons

$input-group-addon-bg:                            $gray-lighter !default;

$input-group-addon-border-color:                  $input-border !default;


// DROPDOWNS

$dropdown-bg:                                     #fff !default;

$dropdown-border:                                 rgba(0,0,0,.15) !default;

$dropdown-fallback-border:                        #ccc !default; //** Dropdown menu `border-color` **for IE8**

$dropdown-divider-bg:                             #e5e5e5 !default;

$dropdown-link-color:                             $gray-dark !default;

$dropdown-link-hover-color:                       darken($gray-dark, 5%) !default;

$dropdown-link-hover-bg:                          #f5f5f5 !default;

$dropdown-link-active-color:                      $component-active-color !default;

$dropdown-link-active-bg:                         $component-active-bg !default;

$dropdown-link-disabled-color:                    $gray-light !default;

$dropdown-header-color:                           $gray-light !default;

$dropdown-caret-color:                            #000 !default; //** Deprecated `$dropdown-caret-color` as of v3.1.0


// NAVBAR

$navbar-default-color:                            #777 !default;

$navbar-default-bg:                               #f8f8f8 !default;

$navbar-default-border:                           darken($navbar-default-bg, 6.5%) !default;

$navbar-default-link-color:                       #777 !default;

$navbar-default-link-hover-color:                 #333 !default;

$navbar-default-link-hover-bg:                    transparent !default;

$navbar-default-link-active-color:                #555 !default;

$navbar-default-link-active-bg:                   darken($navbar-default-bg, 6.5%) !default;

$navbar-default-link-disabled-color:              #ccc !default;

$navbar-default-link-disabled-bg:                 transparent !default;

$navbar-default-brand-color:                      $navbar-default-link-color !default;

$navbar-default-brand-hover-color:                darken($navbar-default-brand-color, 10%) !default;

$navbar-default-brand-hover-bg:                   transparent !default;

$navbar-default-toggle-hover-bg:                  #ddd !default;

$navbar-default-toggle-icon-bar-bg:               #888 !default;

$navbar-default-toggle-border-color:              #ddd !default;


$navbar-inverse-color:                            lighten($gray-light, 15%) !default;

$navbar-inverse-bg:                               #222 !default;

$navbar-inverse-border:                           darken($navbar-inverse-bg, 10%) !default;

$navbar-inverse-link-color:                       lighten($gray-light, 15%) !default;

$navbar-inverse-link-hover-color:                 #fff !default;

$navbar-inverse-link-hover-bg:                    transparent !default;

$navbar-inverse-link-active-color:                $navbar-inverse-link-hover-color !default;

$navbar-inverse-link-active-bg:                   darken($navbar-inverse-bg, 10%) !default;

$navbar-inverse-link-disabled-color:              #444 !default;

$navbar-inverse-link-disabled-bg:                 transparent !default;

$navbar-inverse-brand-color:                      $navbar-inverse-link-color !default;

$navbar-inverse-brand-hover-color:                #fff !default;

$navbar-inverse-brand-hover-bg:                   transparent !default;

$navbar-inverse-toggle-hover-bg:                  #333 !default;

$navbar-inverse-toggle-icon-bar-bg:               #fff !default;

$navbar-inverse-toggle-border-color:              #333 !default;


// NAV

$nav-link-hover-bg:                               $gray-lighter !default;

$nav-disabled-link-color:                         $gray-light !default;

$nav-disabled-link-hover-color:                   $gray-light !default;


// TABS

$nav-tabs-border-color:                           #ddd !default;

$nav-tabs-link-hover-border-color:                $gray-lighter !default;

$nav-tabs-active-link-hover-bg:                   $body-bg !default;

$nav-tabs-active-link-hover-color:                $gray !default;

$nav-tabs-active-link-hover-border-color:         #ddd !default;

$nav-tabs-justified-link-border-color:            #ddd !default;

$nav-tabs-justified-active-link-border-color:     $body-bg !default;


// PILLS

$nav-pills-active-link-hover-bg:                  $component-active-bg !default;

$nav-pills-active-link-hover-color:               $component-active-color !default;


// PAGINATION

$pagination-color:                                $link-color !default;

$pagination-bg:                                   #fff !default;

$pagination-border:                               #ddd !default;

$pagination-hover-color:                          $link-hover-color !default;

$pagination-hover-bg:                             $gray-lighter !default;

$pagination-hover-border:                         #ddd !default;

$pagination-active-color:                         #fff !default;

$pagination-active-bg:                            $brand-primary !default;

$pagination-active-border:                        $brand-primary !default;

$pagination-disabled-color:                       $gray-light !default;

$pagination-disabled-bg:                          #fff !default;

$pagination-disabled-border:                      #ddd !default;


// PAGER

$pager-bg:                                        $pagination-bg !default;

$pager-border:                                    $pagination-border !default;

$pager-hover-bg:                                  $pagination-hover-bg !default;

$pager-active-bg:                                 $pagination-active-bg !default;

$pager-active-color:                              $pagination-active-color !default;

$pager-disabled-color:                            $pagination-disabled-color !default;


// JUMBOTRON

$jumbotron-color:                                 inherit !default;

$jumbotron-bg:                                    $gray-lighter !default;

$jumbotron-heading-color:                         inherit !default;


// FORM STATES AND ALERTS (Define colors for form feedback states and, by default, alerts)

$state-success-text:                              #3c763d !default;

$state-success-bg:                                #dff0d8 !default;

$state-success-border:                            darken(adjust-hue($state-success-bg, -10), 5%) !default;

$state-info-text:                                 #31708f !default;

$state-info-bg:                                   #d9edf7 !default;

$state-info-border:                               darken(adjust-hue($state-info-bg, -10), 7%) !default;

$state-warning-text:                              #8a6d3b !default;

$state-warning-bg:                                #fcf8e3 !default;

$state-warning-border:                            darken(adjust-hue($state-warning-bg, -10), 5%) !default;

$state-danger-text:                               #a94442 !default;

$state-danger-bg:                                 #f2dede !default;

$state-danger-border:                             darken(adjust-hue($state-danger-bg, -10), 5%) !default;


// TOOLTIP

$tooltip-color:                                   #fff !default;

$tooltip-bg:                                      #000 !default;

$tooltip-opacity:                                 .9 !default;

$tooltip-arrow-color:                             $tooltip-bg !default;


// POPOVERS

$popover-bg:                                      #fff !default;

$popover-border-color:                            rgba(0,0,0,.2) !default;

$popover-fallback-border-color:                   #ccc !default;

$popover-title-bg:                                darken($popover-bg, 3%) !default;

$popover-arrow-color:                             $popover-bg !default;

$popover-arrow-outer-color:                       fade_in($popover-border-color, 0.05) !default;

$popover-arrow-outer-fallback-color:              darken($popover-fallback-border-color, 20%) !default;


// LABELS

$label-default-bg:                                $gray-light !default;

$label-primary-bg:                                $brand-primary !default;

$label-success-bg:                                $brand-success !default;

$label-info-bg:                                   $brand-info !default;

$label-warning-bg:                                $brand-warning !default;

$label-danger-bg:                                 $brand-danger !default;

$label-color:                                     #fff !default;

$label-link-hover-color:                          #fff !default;


// MODALS

$modal-content-bg:                                #fff !default;

$modal-content-border-color:                      rgba(0,0,0,.2) !default;

$modal-content-fallback-border-color:             #999 !default;

$modal-backdrop-bg:                               #000 !default;

$modal-backdrop-opacity:                          .5 !default;

$modal-header-border-color:                       #e5e5e5 !default;

$modal-footer-border-color:                       $modal-header-border-color !default;


// ALERTS

$alert-success-bg:                                $state-success-bg !default;

$alert-success-text:                              $state-success-text !default;

$alert-success-border:                            $state-success-border !default;

$alert-info-bg:                                   $state-info-bg !default;

$alert-info-text:                                 $state-info-text !default;

$alert-info-border:                               $state-info-border !default;

$alert-warning-bg:                                $state-warning-bg !default;

$alert-warning-text:                              $state-warning-text !default;

$alert-warning-border:                            $state-warning-border !default;

$alert-danger-bg:                                 $state-danger-bg !default;

$alert-danger-text:                               $state-danger-text !default;

$alert-danger-border:                             $state-danger-border !default;


// PROGRESS BARS

$progress-bg:                                     #f5f5f5 !default;

$progress-bar-color:                              #fff !default;

$progress-bar-bg:                                 $brand-primary !default;

$progress-bar-success-bg:                         $brand-success !default;

$progress-bar-warning-bg:                         $brand-warning !default;

$progress-bar-danger-bg:                          $brand-danger !default;

$progress-bar-info-bg:                            $brand-info !default;


// LIST GROUP

$list-group-bg:                                   #fff !default;

$list-group-border:                               #ddd !default;

$list-group-hover-bg:                             #f5f5f5 !default;

$list-group-active-color:                         $component-active-color !default;

$list-group-active-bg:                            $component-active-bg !default;

$list-group-active-border:                        $list-group-active-bg !default;

$list-group-active-text-color:                    lighten($list-group-active-bg, 40%) !default;

$list-group-disabled-color:                       $gray-light !default;

$list-group-disabled-bg:                          $gray-lighter !default;

$list-group-disabled-text-color:                  $list-group-disabled-color !default;

$list-group-link-color:                           #555 !default;

$list-group-link-hover-color:                     $list-group-link-color !default;

$list-group-link-heading-color:                   #333 !default;


// PANELS

$panel-bg:                                        #fff !default;

$panel-body-padding:                              15px !default;

$panel-inner-border:                              #ddd !default;

$panel-footer-bg:                                 #f5f5f5 !default;

$panel-default-text:                              $gray-dark !default;

$panel-default-border:                            #ddd !default;

$panel-default-heading-bg:                        #f5f5f5 !default;

$panel-primary-text:                              #fff !default;

$panel-primary-border:                            $brand-primary !default;

$panel-primary-heading-bg:                        $brand-primary !default;

$panel-success-text:                              $state-success-text !default;

$panel-success-border:                            $state-success-border !default;

$panel-success-heading-bg:                        $state-success-bg !default;

$panel-info-text:                                 $state-info-text !default;

$panel-info-border:                               $state-info-border !default;

$panel-info-heading-bg:                           $state-info-bg !default;

$panel-warning-text:                              $state-warning-text !default;

$panel-warning-border:                            $state-warning-border !default;

$panel-warning-heading-bg:                        $state-warning-bg !default;

$panel-danger-text:                               $state-danger-text !default;

$panel-danger-border:                             $state-danger-border !default;

$panel-danger-heading-bg:                         $state-danger-bg !default;


// THUMBNAILS

$thumbnail-bg:                                    $body-bg !default;

$thumbnail-border:                                #ddd !default;

$thumbnail-caption-color:                         $text-color !default;


// WELLS

$well-bg:                                         #f5f5f5 !default;

$well-border:                                     darken($well-bg, 7%) !default;


// BADGES

$badge-color:                                     #fff !default;

$badge-link-hover-color:                          #fff !default;

$badge-bg:                                        $gray-light !default;

$badge-active-color:                              $link-color !default;

$badge-active-bg:                                 #fff !default;


// BREADCRUMBS

$breadcrumb-bg:                                   #f5f5f5 !default;

$breadcrumb-color:                                #ccc !default;

$breadcrumb-active-color:                         $gray-light !default;


// CAROUSEL

$carousel-control-color:                          #fff !default;

$carousel-control-opacity:                        .5 !default;

$carousel-indicator-active-bg:                    #fff !default;

$carousel-indicator-border-color:                 #fff !default;

$carousel-caption-color:                          #fff !default;


// CLOSE

$close-color:                                     #000 !default;


// CODE

$code-color:                                      #c7254e !default;

$code-bg:                                         #f9f2f4 !default;

$kbd-color:                                       #fff !default;

$kbd-bg:                                          #333 !default;

$pre-bg:                                          #f5f5f5 !default;

$pre-color:                                       $gray-dark !default;

$pre-border-color:                                #ccc !default;


// TYPE

$text-muted:                                      $gray-light !default;

$abbr-border-color:                               $gray-light !default;

$headings-small-color:                            $gray-light !default;

$blockquote-small-color:                          $gray-light !default;

$blockquote-border-color:                         $gray-lighter !default;

$page-header-border-color:                        $gray-lighter !default;

$hr-border:                                       $gray-lighter !default;

[U4EA]

_variables.scss: -

/* NOTES

Reference to Glyphicons removed 

*/


// Table of Contents

//

// SCAFFOLDING

// TYPOGRAPHY

// COMPONENTS

// TABLES

// BUTTONS

// FORMS

// Z-INDEX MASTER LIST

// MEDIA QUERY BREAKPOINTS

// GRID

// CONTAINER SIZES

// NAVBAR

// NAVS

// PILLS

// PAGER

// JUMBOTRON

// TOOLTIPS

// POPOVERS

// MODALS

// ALERTS

// PROGRESS BARS

// LIST GROUP

// PANELS

// THUMBNAILS

// BADGES

// BREADCRUMBS

// CAROUSEL

// CLOSE

// CODE

// TYPE


// SCAFFOLDING  

$link-hover-decoration:               underline !default;


// TYPOGRAPHY

$font-family-sans-serif:              "Helvetica Neue", Helvetica, Arial, sans-serif !default;

$font-family-serif:                   Georgia, "Times New Roman", Times, serif !default;

//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.

$font-family-monospace:               Menlo, Monaco, Consolas, "Courier New", monospace !default;

$font-family-base:                    $font-family-sans-serif !default;


$font-size-base:                      14px !default;

$font-size-large:                     ceil(($font-size-base * 1.25)) !default; // ~18px

$font-size-small:                     ceil(($font-size-base * 0.85)) !default; // ~12px

$font-size-h1:                        floor(($font-size-base * 2.6)) !default; // ~36px

$font-size-h2:                        floor(($font-size-base * 2.15)) !default; // ~30px

$font-size-h3:                        ceil(($font-size-base * 1.7)) !default; // ~24px

$font-size-h4:                        ceil(($font-size-base * 1.25)) !default; // ~18px

$font-size-h5:                        $font-size-base !default;

$font-size-h6:                        ceil(($font-size-base * 0.85)) !default; // ~12px

//** Unit-less `line-height` for use in components like buttons.

$line-height-base:                    1.428571429 !default; // 20/14

//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.

$line-height-computed:                floor(($font-size-base * $line-height-base)) !default; // ~20px


//** By default, this inherits from the `<body>`.

$headings-font-family:                inherit !default;

$headings-font-weight:                500 !default;

$headings-line-height:                1.1 !default;

$headings-color:                      inherit !default;


// COMPONENTS

//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).

$padding-base-vertical:               6px !default;

$padding-base-horizontal:             12px !default;

$padding-large-vertical:              10px !default;

$padding-large-horizontal:            16px !default;

$padding-small-vertical:              5px !default;

$padding-small-horizontal:            10px !default;

$padding-xs-vertical:                 1px !default;

$padding-xs-horizontal:               5px !default;


$line-height-large:                   1.3333333 !default; // extra decimals for Win 8.1 Chrome

$line-height-small:                   1.5 !default;


$border-radius-base:                  4px !default;

$border-radius-large:                 6px !default;

$border-radius-small:                 3px !default;


$caret-width-base:                    4px !default; //** Width of the `border` for generating carets that indicator dropdowns.

$caret-width-large:                   5px !default; //** Carets increase slightly in size for larger components.


// TABLES

//## Customizes the `.table` component with basic values, each used across all table variations.

$table-cell-padding:                  8px !default; //** Padding for `<th>`s and `<td>`s.

$table-condensed-cell-padding:        5px !default; //** Padding for cells in `.table-condensed`.


// BUTTONS

$btn-font-weight:                     normal !default;

// Allows for customizing button radius independently from global border radius

$btn-border-radius-base:              $border-radius-base !default;

$btn-border-radius-large:             $border-radius-large !default;

$btn-border-radius-small:             $border-radius-small !default;


// FORMS

// TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4

//** Default `.form-control` border radius

// This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS.

$input-border-radius:                 $border-radius-base !default;

$input-border-radius-large:           $border-radius-large !default; //** Large `.form-control` border radius

$input-border-radius-small:           $border-radius-small !default; //** Small `.form-control` border radius

$input-height-base:                   ($line-height-computed + ($padding-base-vertical * 2) + 2) !default; //** Default `.form-control` height

$input-height-large:                  (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default; //** Large `.form-control` height

$input-height-small:                  (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default; //** Small `.form-control` height


$form-group-margin-bottom:            15px !default; //** `.form-group` margin

$cursor-disabled:                     not-allowed !default; //** Disabled cursor for form controls and buttons.


// Z-INDEX MASTER LIST

// Warning: Avoid customizing these values. They're used for a bird's eye view of components dependent on the z-axis and are designed to all work together.

// Note: These variables are not generated into the Customizer.

$zindex-navbar:                       1000 !default;

$zindex-dropdown:                     1000 !default;

$zindex-popover:                      1060 !default;

$zindex-tooltip:                      1070 !default;

$zindex-navbar-fixed:                 1030 !default;

$zindex-modal-background:             1040 !default;

$zindex-modal:                        1050 !default;


// MEDIA QUERY BREAKPOINTS

// Define the breakpoints at which your layout will change, adapting to different screen sizes.

// Extra small screen / phone

$screen-xs:                           480px !default; //** Deprecated `$screen-xs` as of v3.0.1

$screen-xs-min:                       $screen-xs !default; //** Deprecated `$screen-xs-min` as of v3.2.0

$screen-phone:                        $screen-xs-min !default; //** Deprecated `$screen-phone` as of v3.0.1

// Small screen / tablet

$screen-sm:                           768px !default; //** Deprecated `$screen-sm` as of v3.0.1

$screen-sm-min:                       $screen-sm !default; //** Deprecated `$screen-tablet` as of v3.0.1

$screen-tablet:                       $screen-sm-min !default;

// Medium screen / desktop

$screen-md:                           992px !default; //** Deprecated `$screen-md` as of v3.0.1

$screen-md-min:                       $screen-md !default;

$screen-desktop:                      $screen-md-min !default; //** Deprecated `$screen-desktop` as of v3.0.1

// Large screen / wide desktop

$screen-lg:                           1200px !default; //** Deprecated `$screen-lg` as of v3.0.1

$screen-lg-min:                       $screen-lg !default;

$screen-lg-desktop:                   $screen-lg-min !default; //** Deprecated `$screen-lg-desktop` as of v3.0.1

// So media queries don't overlap when required, provide a maximum

$screen-xs-max:                       ($screen-sm-min - 1) !default;

$screen-sm-max:                       ($screen-md-min - 1) !default;

$screen-md-max:                       ($screen-lg-min - 1) !default;


// GRID (Define your custom responsive grid)

$grid-columns:                        12 !default; //** Number of columns in the grid.  .

$grid-gutter-width:                   30px !default; //** Padding between columns. Gets divided in half for the left and right

// Navbar collapse

$grid-float-breakpoint:               $screen-sm-min !default; //** Point at which the navbar becomes uncollapsed.

$grid-float-breakpoint-max:           ($grid-float-breakpoint - 1) !default; //** Point at which the navbar begins collapsing.


// CONTAINER SIZES (define the maximum width of `.container` for different screen sizes)

// Small screen / tablet

$container-tablet:                    (720px + $grid-gutter-width) !default;

$container-sm:                        $container-tablet !default; //** For `$screen-sm-min` and up.

// Medium screen / desktop

$container-desktop:                   (940px + $grid-gutter-width) !default;

$container-md:                        $container-desktop !default; //** For `$screen-md-min` and up.

// Large screen / wide desktop

$container-large-desktop:             (1140px + $grid-gutter-width) !default;

$container-lg:                        $container-large-desktop !default; //** For `$screen-lg-min` and up.


// NAVBAR

$navbar-height:                       50px !default;

$navbar-margin-bottom:                $line-height-computed !default;

$navbar-border-radius:                $border-radius-base !default;

$navbar-padding-horizontal:           floor(($grid-gutter-width / 2)) !default;

$navbar-padding-vertical:             (($navbar-height - $line-height-computed) / 2) !default;

$navbar-collapse-max-height:          340px !default;


// NAVS

$nav-link-padding:                    10px 15px !default;


// PILLS

$nav-pills-border-radius:             $border-radius-base !default;


// PAGER

$pager-border-radius:                 15px !default;


// JUMBOTRON

$jumbotron-padding:                   30px !default;

$jumbotron-font-size:                 ceil(($font-size-base * 1.5)) !default;

$jumbotron-heading-font-size:         ceil(($font-size-base * 4.5)) !default;


// TOOLTIPS

$tooltip-max-width:                   200px !default; //** Tooltip max width

$tooltip-arrow-width:                 5px !default; //** Tooltip arrow width


// POPOVERS

$popover-max-width:                   276px !default; //** Popover maximum width

$popover-arrow-width:                 10px !default; //** Popover arrow width

$popover-arrow-outer-width:           ($popover-arrow-width + 1) !default; //** Popover outer arrow width


// MODALS

$modal-inner-padding:                 15px !default; //** Padding applied to the modal body

$modal-title-padding:                 15px !default; //** Padding applied to the modal title

$modal-title-line-height:             $line-height-base !default; //** Modal title line-height

$modal-lg:                            900px !default;

$modal-md:                            600px !default;

$modal-sm:                            300px !default;


// ALERTS

$alert-padding:                       15px !default;

$alert-border-radius:                 $border-radius-base !default;

$alert-link-font-weight:              bold !default;


// PROGRESS BARS

$progress-border-radius:              $border-radius-base !default; //** Variable for setting rounded corners on progress bar.


// LIST GROUP

$list-group-border-radius:            $border-radius-base !default; //** List group border radius


// PANELS

$panel-heading-padding:               10px 15px !default;

$panel-footer-padding:                $panel-heading-padding !default;

$panel-border-radius:                 $border-radius-base !default;


// THUMBNAILS

$thumbnail-padding:                   4px !default; //** Padding around the thumbnail image

$thumbnail-border-radius:             $border-radius-base !default; //** Thumbnail border radius

$thumbnail-caption-padding:           9px !default; //** Padding around the thumbnail caption


// BADGES

$badge-font-weight:                   bold !default;

$badge-line-height:                   1 !default;

$badge-border-radius:                 10px !default;


// BREADCRUMBS

$breadcrumb-padding-vertical:         8px !default;

$breadcrumb-padding-horizontal:       15px !default;

$breadcrumb-separator:                "/" !default; //** Textual separator for between breadcrumb elements


// CAROUSEL

$carousel-text-shadow:                0 1px 2px rgba(0,0,0,.6) !default;

$carousel-control-width:              15% !default;

$carousel-control-font-size:          20px !default;


// CLOSE

$close-font-weight:                   bold !default;

$close-text-shadow:                   0 1px 0 #fff !default;


// CODE

$pre-scrollable-max-height:           340px !default;


// TYPE

$component-offset-horizontal:         180px !default; //** Horizontal offset for forms and lists.

$blockquote-font-size:                ($font-size-base * 1.25) !default; //** Blockquote font size

$dl-horizontal-offset:                $component-offset-horizontal !default; //** Width of horizontal description list titles

$dl-horizontal-breakpoint:            $grid-float-breakpoint !default; //** Point at which .dl-horizontal becomes horizontal

[U4EA]

One more thing to note is that the order of the elements/components (refer to the Table of Contents in each file) is in the original order of the source files. Putting them in alphabetical order will not work as, for example, some Pager variables use Pagination variables as parameters in their functions.

So it’s a bad day to have OCD

[U4EA]

Has anyone, anywhere found a way to import .css using SASS? It doesn’t seem to be implmented yet and it’s ssssssssssssssssssssssssssssssssssssssssoooooooooooooooooooooooooooooooooooooo annoying

[jacmoe (Jacob Moena)]

Just import the goddamn css like you import any other sass file - no extension needed there either

I made a basic app template with Gulp and Sass support:

https://packagist.or…basic-gulp-sass

And an advanced app template with Gulp and Sass support:

https://packagist.org/packages/jacmoe/yii2-app-advanced-gulp-sass

[jacmoe (Jacob Moena)]

Both advanced and basic templates has new Yii style:

[jacmoe (Jacob Moena)]

In addition to the two Bootstrap based application templates above, I have made a Gulp Sass basic application template based on Zurb Foundation for Sites (version 6.2):

https://packagist.or…basic-zurbified

An advanced ‘zurbified’ template will follow.

[U4EA]

Just import the goddamn css like you import any other sass file - no extension needed there either

I made a basic app template with Gulp and Sass support:

https://packagist.or…basic-gulp-sass

And an advanced app template with Gulp and Sass support:

https://packagist.org/packages/jacmoe/yii2-app-advanced-gulp-sass

Interesting, I didn’t realise it was that simple. Seems there is a lot of discussion out there for how to import .css with sass but all you need to do is remove the extension.

That being said, I think I will probably still use a copy of the .css i.e. not the copy in the vendor folder so I have control over the source in case an update to update to the assets in the vendor folder causes an issue.

[jacmoe (Jacob Moena)]

It definitely works with scss - not sure if it works with sass (the haml-like syntax).

[Geoide (Devjrb)]

Thanks for your work.

One thing. You wrote (foundation version)

php composer.phar create-project --prefer-dist --stability=dev jacmoe/yii2-app-basic-gulp-sass basic

[size="2"]but, this is what worked for me:[/size]

[size="2"]

composer create-project --prefer-dist --stability=dev jacmoe/yii2-app-basic-zurbified basic

[/size]

[jacmoe (Jacob Moena)]

Good catch!

But the most important rule of Composer is to never use sudo with it.

What issues do you have when creating the project as a regular user?

[Geoide (Devjrb)]

Sometimes installing npm modules, but none with composer, sorry… but, I’ve just try your package (“build” and “watch”) and it not style the site. Perhaps in “_zurb-foundation.scss” do not import “foundation”, I’m not sure why…

[Geoide (Devjrb)]

uhmmm, gulp does not copy any file in web/css. I think is a problem with my system or permissions.

[jacmoe (Jacob Moena)]

I will check this later today to see if there are issues.

Will update code/readme and post here. Thanks