Inconsistency in variable naming pattern V4 #22414

pat270 · 2017-04-11T23:47:14Z

In most places variables are named using the pattern $(component)-(state)-(css property)-(size) except in tables and inputs where it follows $(component)-(css property)-(size)-(state). I think it should be consistent across your variable api. I prefer the pattern in tables and inputs since it's easier to order alphabetically, $(component)-(css property)-(size)-(state), but realize it's easier to change it according to the first pattern.

The text was updated successfully, but these errors were encountered:

mdo · 2017-06-07T05:56:23Z

I think you've submitted some PRs for this recently that we merged. Have any other areas you'd like to see addressed?

pat270 · 2017-06-09T18:43:19Z

@mdo Yes! Some variables I would like to see changed for consistency are:

$font-size-h1                                   =>      $h1-font-size
$font-size-h2                                   =>      $h2-font-size
$font-size-h3                                   =>      $h3-font-size
$font-size-h4                                   =>      $h4-font-size
$font-size-h5                                   =>      $h5-font-size
$font-size-h6                                   =>      $h6-font-size
$table-sm-cell-padding                          =>      $table-cell-padding-sm
$table-bg-accent                                =>      $table-accent-bg
$table-bg-hover                                 =>      $table-hover-bg
$table-bg-active                                =>      $table-active-bg
$table-inverse-bg-accent                        =>      $table-inverse-accent-bg
$table-inverse-bg-hover                         =>      $table-inverse-hover-bg
$input-bg-disabled                              =>      $input-disabled-bg
$input-bg-focus                                 =>      $input-focus-bg
$input-border-color-focus                       =>      $input-focus-border-color
$input-box-shadow-focus                         =>      $input-focus-box-shadow
$input-color-focus                              =>      $input-focus-color
$input-color-placeholder                        =>      $input-placeholder-color
$custom-control-disabled-indicator-bg           =>      $custom-control-indicator-disabled-bg
$custom-control-disabled-description-color      =>      $custom-control-description-disabled-color
$custom-control-checked-indicator-color         =>      $custom-control-indicator-checked-color
$custom-control-checked-indicator-bg            =>      $custom-control-indicator-checked-bg
$custom-control-checked-indicator-box-shadow    =>      $custom-control-indicator-checked-box-shadow
$custom-control-focus-indicator-box-shadow      =>      $custom-control-indicator-focus-box-shadow
$custom-control-active-indicator-color          =>      $custom-control-indicator-active-color
$custom-control-active-indicator-bg             =>      $custom-control-indicator-active-bg
$custom-control-active-indicator-box-shadow     =>      $custom-control-indicator-active-box-shadow
$custom-checkbox-checked-icon                   =>      $custom-checkbox-icon-checked
$custom-checkbox-indeterminate-indicator-color  =>      $custom-checkbox-indicator-indeterminate-color
$custom-checkbox-indeterminate-icon             =>      $custom-checkbox-icon-indeterminate
$custom-radio-checked-icon                      =>      $custom-radio-icon-checked
$custom-select-sm-font-size                     =>      $custom-select-font-size-sm
$nav-disabled-link-color                        =>      $nav-link-disabled-color
$nav-tabs-active-link-color                     =>      $nav-tabs-link-active-color
$nav-tabs-active-link-bg                        =>      $nav-tabs-link-active-bg
$nav-tabs-active-link-border-color              =>      $nav-tabs-link-active-border-color
$nav-pills-active-link-color                    =>      $nav-pills-link-active-color
$nav-pills-active-link-bg                       =>      $nav-pills-link-active-bg
$modal-dialog-sm-up-margin-y                    =>      $modal-dialog-margin-y-sm-up
$modal-content-xs-box-shadow                    =>      $modal-content-box-shadow-xs
$modal-content-sm-up-box-shadow                 =>      $modal-content-box-shadow-sm-up

This list isn't comprehensive (I probably missed some). Let me know if this is something worth merging, I can send a pull with changes.

mdo · 2017-06-12T05:19:15Z

Whoa, that's a big list lol. Separate PRs would be fantastic if you can manage.

pat270 · 2017-06-12T16:28:40Z

Not a problem, I'll try and send everything this week.

…`$table-bg-hover`, `$table-bg-active`, `$table-inverse-bg-accent`, `$table-inverse-bg-hover` to `$table-cell-padding-sm`, `$table-accent-bg`, `$table-hover-bg`, `$table-active-bg`, `$table-inverse-accent-bg`, `$table-inverse-hover-bg`, respectively (twbs#22414)

…focus`, `$input-border-color-focus`, `$input-box-shadow-focus`, `$input-color-focus`, `$input-color-placeholder` to `$input-disabled-bg`, `$input-focus-bg`, `$input-focus-border-color`, `$input-focus-box-shadow`, `$input-focus-color`, `$input-placeholder-color`, respectively

…or-bg`, `$custom-control-disabled-description-color`, `$custom-control-checked-indicator-color`, `$custom-control-checked-indicator-bg`, `$custom-control-checked-indicator-box-shadow`, `$custom-control-focus-indicator-box-shadow`, `$custom-control-active-indicator-color`, `$custom-control-active-indicator-bg`, `$custom-control-active-indicator-box-shadow` to `$custom-control-indicator-disabled-bg`, `$custom-control-description-disabled-color`, `$custom-control-indicator-checked-color`, `$custom-control-indicator-checked-bg`, `$custom-control-indicator-checked-box-shadow`, `$custom-control-indicator-focus-box-shadow`, `$custom-control-indicator-active-color`, `$custom-control-indicator-active-bg`, `$custom-control-indicator-active-box-shadow`, respectively

…v-tabs-active-link-color`, `$nav-tabs-active-link-bg`, `$nav-tabs-active-link-border-color`, `$nav-pills-active-link-color`, `$nav-pills-active-link-bg` to `$nav-link-disabled-color`, `$nav-tabs-link-active-color`, `$nav-tabs-link-active-bg`, `$nav-tabs-link-active-border-color`, `$nav-pills-link-active-color`, `$nav-pills-link-active-bg`, respectively

…`$modal-content-xs-box-shadow`, `$modal-content-sm-up-box-shadow`, to `$modal-dialog-margin-y-sm-up`, `$modal-content-box-shadow-xs`, `$modal-content-box-shadow-sm-up`, respectively

mdo · 2017-06-13T02:55:57Z

Lol wow, so amazing to see those PRs coming in. I was staring at the /pulls page and thinking what the hell just happened!? <3

…dal-content-xs-box-shadow`, `$modal-content-sm-up-box-shadow`, to `$modal-dialog-margin-y-sm-up`, `$modal-content-box-shadow-xs`, `$modal-content-box-shadow-sm-up`, respectively

…bs-active-link-color`, `$nav-tabs-active-link-bg`, `$nav-tabs-active-link-border-color`, `$nav-pills-active-link-color`, `$nav-pills-active-link-bg` to `$nav-link-disabled-color`, `$nav-tabs-link-active-color`, `$nav-tabs-link-active-bg`, `$nav-tabs-link-active-border-color`, `$nav-pills-link-active-color`, `$nav-pills-link-active-bg`, respectively

…g`, `$custom-control-disabled-description-color`, `$custom-control-checked-indicator-color`, `$custom-control-checked-indicator-bg`, `$custom-control-checked-indicator-box-shadow`, `$custom-control-focus-indicator-box-shadow`, `$custom-control-active-indicator-color`, `$custom-control-active-indicator-bg`, `$custom-control-active-indicator-box-shadow` to `$custom-control-indicator-disabled-bg`, `$custom-control-description-disabled-color`, `$custom-control-indicator-checked-color`, `$custom-control-indicator-checked-bg`, `$custom-control-indicator-checked-box-shadow`, `$custom-control-indicator-focus-box-shadow`, `$custom-control-indicator-active-color`, `$custom-control-indicator-active-bg`, `$custom-control-indicator-active-box-shadow`, respectively

…s`, `$input-border-color-focus`, `$input-box-shadow-focus`, `$input-color-focus`, `$input-color-placeholder` to `$input-disabled-bg`, `$input-focus-bg`, `$input-focus-border-color`, `$input-focus-box-shadow`, `$input-focus-color`, `$input-placeholder-color`, respectively

…`$table-bg-hover`, `$table-bg-active`, `$table-inverse-bg-accent`, `$table-inverse-bg-hover` to `$table-cell-padding-sm`, `$table-accent-bg`, `$table-hover-bg`, `$table-active-bg`, `$table-inverse-accent-bg`, `$table-inverse-hover-bg`, respectively (#22414)

mdo · 2017-06-13T15:47:00Z

Ready for the next batch lol!

…`$custom-checkbox-checked-icon`, `$custom-checkbox-indeterminate-indicator-color`, `$custom-checkbox-indeterminate-icon`, `$custom-radio-radius`, `$custom-radio-checked-icon`, `$custom-select-sm-font-size`, to `$custom-checkbox-border-radius`, `$custom-checkbox-icon-checked`, `$custom-checkbox-indicator-indeterminate-color`, `$custom-checkbox-icon-indeterminate`, `$custom-radio-border-radius`, `$custom-radio-icon-checked`, `$custom-select-font-size-sm` respectively

…group-action-*-*`

…p-action-*-*`

… `$custom-checkbox-icon-checked`, `$custom-checkbox-indeterminate-bg`, `$custom-checkbox-icon-indeterminate`, `$custom-checkbox-indeterminate-box-shadow`, `$custom-radio-border-radius`, `$custom-radio-icon-checked` to `$custom-checkbox-indicator-border-radius`, `$custom-checkbox-indicator-icon-checked`, `$custom-checkbox-indicator-indeterminate-bg`, `$custom-checkbox-indicator-icon-indeterminate`, `$custom-checkbox-indicator-indeterminate-box-shadow`, `$custom-radio-indicator-border-radius`, `$custom-radio-indicator-icon-checked`, respectively

…ustom-checkbox-icon-checked`, `$custom-checkbox-indeterminate-bg`, `$custom-checkbox-icon-indeterminate`, `$custom-checkbox-indeterminate-box-shadow`, `$custom-radio-border-radius`, `$custom-radio-icon-checked` to `$custom-checkbox-indicator-border-radius`, `$custom-checkbox-indicator-icon-checked`, `$custom-checkbox-indicator-indeterminate-bg`, `$custom-checkbox-indicator-icon-indeterminate`, `$custom-checkbox-indicator-indeterminate-box-shadow`, `$custom-radio-indicator-border-radius`, `$custom-radio-indicator-icon-checked`, respectively

…own-spacer`

…spacer`

…cent-bg`, `$table-inverse-hover-bg`, `$table-inverse-border-color`, `$table-inverse-color` to `$table-dark-bg`, `$table-dark-accent-bg`, `$table-dark-hover-bg`, `$table-dark-border-color`, `$table-dark-color` for consistency

…-bg`, `$table-inverse-hover-bg`, `$table-inverse-border-color`, `$table-inverse-color` to `$table-dark-bg`, `$table-dark-accent-bg`, `$table-dark-hover-bg`, `$table-dark-border-color`, `$table-dark-color` for consistency

vvpanchenko · 2018-01-31T12:51:51Z

Extended list of changes, faced during upgrade: Bootstrap 4 Alpha 6 -> Bootstrap 4.0.0:

$brand-primary                                  =>      $primary    // theme-color("primary")
$brand-secondary                                =>      $secondary  // theme-color("secondary")
$brand-success                                  =>      $success    // theme-color("success")
$brand-info                                     =>      $info       // theme-color("info")
$brand-warning                                  =>      $warning    // theme-color("warning")
$brand-danger                                   =>      $danger     // theme-color("danger")
$brand-inverse                                  =>      $dark       // theme-color("dark")

$card-border-radius-inner                       =>      $card-inner-border-radius
$card-link-hover-color                          =>      $card-inverse-link-hover-color
$card-columns-sm-up-column-gap                  =>      $card-columns-gap

$carousel-icon-width                            =>      $carousel-control-icon-width

$custom-control-disabled-indicator-bg           =>      $custom-control-indicator-disabled-bg
$custom-control-disabled-description-color      =>      $custom-control-description-disabled-color
$custom-control-checked-indicator-color         =>      $custom-control-indicator-checked-color
$custom-control-checked-indicator-bg            =>      $custom-control-indicator-checked-bg
$custom-control-checked-indicator-box-shadow    =>      $custom-control-indicator-checked-box-shadow
$custom-control-focus-indicator-box-shadow      =>      $custom-control-indicator-focus-box-shadow
$custom-control-active-indicator-color          =>      $custom-control-indicator-active-color
$custom-control-active-indicator-bg             =>      $custom-control-indicator-active-bg
$custom-control-active-indicator-box-shadow     =>      $custom-control-indicator-active-box-shadow
$custom-checkbox-checked-icon                   =>      $custom-checkbox-icon-checked
$custom-checkbox-indeterminate-indicator-color  =>      $custom-checkbox-indicator-indeterminate-color
$custom-checkbox-indeterminate-icon             =>      $custom-checkbox-icon-indeterminate
$custom-radio-checked-icon                      =>      $custom-radio-icon-checked
$custom-select-sm-font-size                     =>      $custom-select-font-size-sm

$dropdown-margin-top                            =>      $dropdown-spacer

$font-size-h1                                   =>      $h1-font-size
$font-size-h2                                   =>      $h2-font-size
$font-size-h3                                   =>      $h3-font-size
$font-size-h4                                   =>      $h4-font-size
$font-size-h5                                   =>      $h5-font-size
$font-size-h6                                   =>      $h6-font-size

$input-bg-disabled                              =>      $input-disabled-bg
$input-bg-focus                                 =>      $input-focus-bg
$input-border-color-focus                       =>      $input-focus-border-color
$input-box-shadow-focus                         =>      $input-focus-box-shadow
$input-color-focus                              =>      $input-focus-color
$input-color-placeholder                        =>      $input-placeholder-color

$list-group-link-color                          =>      $list-group-action-color
$list-group-link-hover-color                    =>      $list-group-action-hover-color
$list-group-link-active-color                   =>      $list-group-action-active-color
$list-group-link-active-bg                      =>      $list-group-action-active-bg

$nav-disabled-link-color                        =>      $nav-link-disabled-color
$nav-tabs-active-link-color                     =>      $nav-tabs-link-active-color
$nav-tabs-active-link-bg                        =>      $nav-tabs-link-active-bg
$nav-tabs-active-link-border-color              =>      $nav-tabs-link-active-border-color
$nav-pills-active-link-color                    =>      $nav-pills-link-active-color
$nav-pills-active-link-bg                       =>      $nav-pills-link-active-bg

$navbar-inverse-color                           =>      $navbar-dark-color
$navbar-inverse-hover-color                     =>      $navbar-dark-hover-color
$navbar-inverse-active-color                    =>      $navbar-dark-active-color
$navbar-inverse-disabled-color                  =>      $navbar-dark-disabled-color
$navbar-inverse-toggler-bg                      =>      $navbar-inverse-toggler-icon-bg
$navbar-inverse-toggler-icon-bg                 =>      $navbar-dark-toggler-icon-bg
$navbar-inverse-toggler-border-color            =>      $navbar-dark-toggler-border-color
$navbar-light-toggler-bg                        =>      $navbar-light-toggler-icon-bg

$modal-dialog-sm-up-margin-y                    =>      $modal-dialog-margin-y-sm-up
$modal-content-xs-box-shadow                    =>      $modal-content-box-shadow-xs
$modal-content-sm-up-box-shadow                 =>      $modal-content-box-shadow-sm-up

$popover-content-color                          =>      $popover-body-color
$popover-content-padding-y                      =>      $popover-body-padding-y
$popover-content-padding-x                      =>      $popover-body-padding-x
$popover-title-bg                               =>      $popover-header-bg
$popover-title-color                            =>      $popover-header-color
$popover-title-padding-y                        =>      $popover-header-padding-y
$popover-title-padding-x                        =>      $popover-header-padding-x

$table-sm-cell-padding                          =>      $table-cell-padding-sm
$table-bg-accent                                =>      $table-accent-bg
$table-bg-hover                                 =>      $table-hover-bg
$table-bg-active                                =>      $table-active-bg

$table-inverse-bg                               =>      $table-dark-bg
$table-inverse-bg-accent                        =>      $table-inverse-accent-bg      =>      $table-dark-accent-bg
$table-inverse-bg-hover                         =>      $table-inverse-hover-bg       =>      $table-dark-hover-bg
$table-inverse-border-color                     =>      $table-dark-border-color
$table-inverse-color                            =>      $table-dark-color

bardiharborow added css v4 labels Apr 19, 2017

pat270 added a commit to pat270/bootstrap that referenced this issue Jun 13, 2017

Rename $font-size-h* to $h*-font-size for consistency (twbs#22414)

9ca111f

pat270 mentioned this issue Jun 13, 2017

Rename $font-size-h* to $h*-font-size for consistency (#22414) #22805

Merged

pat270 mentioned this issue Jun 13, 2017

(#22414) Rename for consistency `$custom-control-disabled-indicator-b… #22808

Merged

pat270 mentioned this issue Jun 13, 2017

(#22414) Renamed for consistency $nav-disabled-link-color, `$nav-ta… #22809

Merged

pat270 mentioned this issue Jun 13, 2017

(#22414) Renamed for consistency $modal-dialog-sm-up-margin-y, `$mo… #22810

Merged

mdo added a commit that referenced this issue Jun 13, 2017

Mention variable naming scheme to help with #22414

8850966

mdo mentioned this issue Jun 13, 2017

Mention variable naming scheme in source files #22814

Merged

mdo added this to the v4.0.0-beta milestone Jun 13, 2017

mdo added a commit that referenced this issue Jun 13, 2017

Mention variable naming scheme to help with #22414

c5d4430

mdo pushed a commit that referenced this issue Jun 13, 2017

Rename $font-size-h* to $h*-font-size for consistency (#22414)

a362d62

mdo mentioned this issue Jun 13, 2017

Beta 1 ship list #21568

Closed

mdo closed this as completed in d786737 Jun 14, 2017

pat270 added a commit to pat270/bootstrap that referenced this issue Jun 17, 2017

(twbs#22414) Rename for consistency $list-group-link-*-* to `$list-…

81093dd

…group-action-*-*`

pat270 mentioned this issue Jun 17, 2017

(#22414) Rename for consistency $list-group-link-*-* to `$list-grou… #22843

Merged

mdo pushed a commit that referenced this issue Jun 17, 2017

(#22414) Rename for consistency $list-group-link-*-* to `$list-grou…

9f09290

…p-action-*-*`

pat270 added a commit to pat270/bootstrap that referenced this issue Jul 31, 2017

(twbs#22414) Rename for consistency $dropdown-margin-top to `$dropd…

2aa5571

…own-spacer`

pat270 mentioned this issue Jul 31, 2017

Dropup dropdown-menu should have margin on the bottom instead of top #23187

Merged

mdo pushed a commit that referenced this issue Aug 4, 2017

(#22414) Rename for consistency $dropdown-margin-top to `$dropdown-…

0501b02

…spacer`

Ks89 mentioned this issue Aug 11, 2017

Bootstrap 4 beta 1 support shakacode/bootstrap-loader#315

Closed

Omrisnyk mentioned this issue Jul 26, 2024

[Snyk] Security upgrade bootstrap from 3.4.1 to 4.0.0 Omrisnyk/npm-lockfiles#174

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Inconsistency in variable naming pattern V4 #22414

Inconsistency in variable naming pattern V4 #22414

pat270 commented Apr 11, 2017

mdo commented Jun 7, 2017

pat270 commented Jun 9, 2017

mdo commented Jun 12, 2017 •

edited

Loading

pat270 commented Jun 12, 2017

mdo commented Jun 13, 2017

mdo commented Jun 13, 2017

vvpanchenko commented Jan 31, 2018 •

edited

Loading

Inconsistency in variable naming pattern V4 #22414

Inconsistency in variable naming pattern V4 #22414

Comments

pat270 commented Apr 11, 2017

mdo commented Jun 7, 2017

pat270 commented Jun 9, 2017

mdo commented Jun 12, 2017 • edited Loading

pat270 commented Jun 12, 2017

mdo commented Jun 13, 2017

mdo commented Jun 13, 2017

vvpanchenko commented Jan 31, 2018 • edited Loading

mdo commented Jun 12, 2017 •

edited

Loading

vvpanchenko commented Jan 31, 2018 •

edited

Loading