Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add bash script for linting variables, remove unused ones #22954

Merged
merged 7 commits into from
Jul 2, 2017
Merged

Add bash script for linting variables, remove unused ones #22954

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
7816724
cleanup offsets
mdo Jul 1, 2017
1c64adf
no need for offset, use justify-content-center
mdo Jul 1, 2017
fee7a2f
Add bash script to lint our variables
mdo Jul 1, 2017
3a0cac2
no xs sizes being used
mdo Jul 1, 2017
f4b53e0
button variants are generated from -colors Sass map
mdo Jul 1, 2017
31aeb63
badge variants are generated from -colors Sass map
mdo Jul 1, 2017
d6c8377
remove some unused vars, restore table-active variant
mdo Jul 1, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions build/lint-vars.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
#!/usr/bin/env bash
#
# Approach:
# 1. Find variable declaration in the form of "$my-var: anyvalue"
# 2. Loop through found variables and find occurrences of each variable in all sass files
# 3. Filter out vars that occurred only once
#
# Run from command line with `build/lint-vars.sh scss`.
#
# Source: https://gist.github.com/badsyntax/6193491

if [ -z "$1" ]; then
echo "Please specify a directory as the first argument."
exit 1
fi
if [ ! -d "$1" ]; then
echo "Not a valid directory."
exit 1
fi

echo "Finding unused variables. This might take some time..."

vars=$(find "$1" -type f -name "*.scss" -exec grep --color=never -h '^$[a-zA-Z0-9_-][^:]*' {} \; | sed 's/$\([a-zA-Z0-9_-][^:]*\).*/\1/')

for var in $vars; do
echo -n "Occurrences of \"\$$var\":"
find "$1" -type f -name "*.scss" -exec grep --color=never -h "$var" "{}" \; | wc -l
done | grep ' 1$'
2 changes: 1 addition & 1 deletion docs/4.0/components/forms.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -412,7 +412,7 @@ Be sure to add `.col-form-label` to your `<label>`s as well so they're verticall
</div>
</div>
<div class="form-group row">
<div class="offset-sm-2 col-sm-10">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</div>
Expand Down
16 changes: 8 additions & 8 deletions docs/4.0/components/modal.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -270,14 +270,14 @@ Utilize the Bootstrap grid system within a modal by nesting `.container-fluid` w
<div class="container-fluid bd-example-row">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
<div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
<div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
<div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
</div>
<div class="row">
<div class="col-sm-9">
Expand Down Expand Up @@ -313,14 +313,14 @@ Utilize the Bootstrap grid system within a modal by nesting `.container-fluid` w
<div class="container-fluid">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
<div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
<div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
<div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
</div>
<div class="row">
<div class="col-sm-9">
Expand Down
6 changes: 4 additions & 2 deletions docs/4.0/content/typography.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -268,8 +268,10 @@ Align terms and descriptions horizontally by using our grid system's predefined
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>

<dt class="col-sm-3">Euismod</dt>
<dd class="col-sm-9">Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd class="col-sm-9 offset-sm-3">Donec id elit non mi porta gravida at eget metus.</dd>
<dd class="col-sm-9">
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
<p>Donec id elit non mi porta gravida at eget metus.</p>
</dd>

<dt class="col-sm-3">Malesuada porta</dt>
<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
Expand Down
4 changes: 0 additions & 4 deletions docs/4.0/layout/grid.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,10 +111,6 @@ See how aspects of the Bootstrap grid system work across multiple devices with a
<th class="text-nowrap" scope="row">Nestable</th>
<td colspan="5">Yes</td>
</tr>
<tr>
<th class="text-nowrap" scope="row">Offsets</th>
<td colspan="5">Yes</td>
</tr>
<tr>
<th class="text-nowrap" scope="row">Column ordering</th>
<td colspan="5">Yes</td>
Expand Down
4 changes: 2 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@
<h2 class="bd-featurette-title">Easy to get started</h2>
<p class="lead">Quickly include Bootstrap's CSS and JS into any project. Use your favorite package manager, download the source, or use the Bootstrap CDN.</p>

<div class="row text-center">
<div class="col-sm-6 col-md-5 offset-md-1 mb-3 pr-md-4">
<div class="row justify-content-center text-center">
<div class="col-sm-6 col-md-5 mb-3 pr-md-4">
<h4>Managed dependencies</h4>
<p>Include Bootstrap's source Sass and JavaScript files via Bower, Composer, Meteor, or npm. Package managed installs don't include documentation, but do include our build system and readme.</p>
<p>
Expand Down
2 changes: 2 additions & 0 deletions scss/_tables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,8 @@
@include table-row-variant($color, theme-color-level($color, -9));
}

@include table-row-variant(active, $table-active-bg);


// Inverse styles
//
Expand Down
36 changes: 0 additions & 36 deletions scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,7 +238,6 @@ $font-family-base: $font-family-sans-serif !default;
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
$font-size-lg: 1.25rem !default;
$font-size-sm: .875rem !default;
$font-size-xs: .75rem !default;

$font-weight-normal: normal !default;
$font-weight-bold: bold !default;
Expand Down Expand Up @@ -341,30 +340,6 @@ $btn-box-shadow: inset 0 1px 0 rgba($white,.15), 0 1px 1px rgba(
$btn-focus-box-shadow: 0 0 0 3px rgba(theme-color("primary"), .25) !default;
$btn-active-box-shadow: inset 0 3px 5px rgba($black,.125) !default;

$btn-primary-color: $white !default;
$btn-primary-bg: theme-color("primary") !default;
$btn-primary-border-color: $btn-primary-bg !default;

$btn-secondary-color: $gray-900 !default;
$btn-secondary-bg: $white !default;
$btn-secondary-border-color: #ccc !default;

$btn-info-color: $white !default;
$btn-info-bg: theme-color("info") !default;
$btn-info-border-color: $btn-info-bg !default;

$btn-success-color: $white !default;
$btn-success-bg: theme-color("success") !default;
$btn-success-border-color: $btn-success-bg !default;

$btn-warning-color: $white !default;
$btn-warning-bg: theme-color("warning") !default;
$btn-warning-border-color: $btn-warning-bg !default;

$btn-danger-color: $white !default;
$btn-danger-bg: theme-color("danger") !default;
$btn-danger-border-color: $btn-danger-bg !default;

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

$btn-block-spacing-y: .5rem !default;
Expand Down Expand Up @@ -412,7 +387,6 @@ $input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height
$input-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s !default;

$form-text-margin-top: .25rem !default;
$form-feedback-margin-top: $form-text-margin-top !default;

$form-check-margin-bottom: .5rem !default;
$form-check-input-gutter: 1.25rem !default;
Expand Down Expand Up @@ -645,8 +619,6 @@ $card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width})
$card-cap-bg: rgba($black, .03) !default;
$card-bg: $white !default;

$card-dark-link-hover-color: $white !default;

$card-img-overlay-padding: 1.25rem !default;

$card-deck-margin: ($grid-gutter-width / 2) !default;
Expand Down Expand Up @@ -700,15 +672,7 @@ $popover-arrow-outer-color: fade-in($popover-border-color, .05) !defau

// Badges

$badge-default-bg: $gray-600 !default;
$badge-primary-bg: theme-color("primary") !default;
$badge-success-bg: theme-color("success") !default;
$badge-info-bg: theme-color("info") !default;
$badge-warning-bg: theme-color("warning") !default;
$badge-danger-bg: theme-color("danger") !default;

$badge-color: $white !default;
$badge-link-hover-color: $white !default;
$badge-font-size: 75% !default;
$badge-font-weight: $font-weight-bold !default;
$badge-padding-y: .25em !default;
Expand Down