Bootstrap nullify styles: Reserved Classes

sjf125 commented 8 years ago

I have rounded squares with a light green color that has a hover effect, but when I enable bootstrap, they all become light yellow un-rounded squares with no hover effect. For the time being I have disabled bootstrap styling by commenting out the @import so I have the styling I want. I have gone over my scss files and my html to see if removing classes or moving things around would help, to no avail. Below is the code I have:

index.scss:

$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
// @import '~bootstrap-sass/assets/stylesheets/bootstrap';
@import 'breakpoints';
@import 'colors';
@import 'typography';
@import 'board';
@import 'cells';
@import 'scoreboard';

cells.scss:

.cell {
  background-color: $cell;
  border-radius: 10px;
  float: left;
  margin: 1%;
  padding-bottom: 31.33%; // = width for a 1:1 aspect ratio //
  position: relative;
  width: 31.33%;
}

.cell:hover {
  background-color: $cell-hover;
  box-shadow: 0 0 1em $cell-highlight;
}

.mark {
  height: 100%; // = 100% - 2*5% padding //
  position: absolute;
  text-align: center;
  width: 100%; // = 100% - 2*5% padding //
}

colors.scss:

$text-default: #383838;
$cell: #D8F39A;
$cell-hover: lighten($cell, 70%);
$cell-highlight: #F6FCDD;
$border: #000;

/// Slightly lighten a color
/// @param {Color} $color - color to tint
/// @param {Number} $percentage - percentage of `$color` in returned color
@function tint($color, $percentage) {
  @return mix(white, $color, $percentage);
}

/// Slightly darken a color
/// @param {Color} $color - color to shade
/// @param {Number} $percentage - percentage of `$color` in returned color
@function shade($color, $percentage) {
  @return mix(black, $color, $percentage);
}

index.html:

<!DOCTYPE html>
<html>
    <head>
      <title>Tic Tac Toe!</title>

      <script src="vendor.bundle.js" type="text/javascript" charset="utf-8" defer></script>
      <script src="bundle.js" type="text/javascript" charset="utf-8" defer></script>
      <link href='https://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
    </head>
    <body class="container-fluid">
      <h1>Tic Tac Toe!</h1>

          <div class="board">
            <div class="cell">
              <div class="mark"><h2 id="a1"></h2></div>
            </div>
            <div class="cell">
              <div class="mark"><h2 id="a2"></h2></div>
            </div>
            <div class="cell">
              <div class="mark"><h2 id="a3"></h2></div>
            </div>
            <div class="cell">
              <div class="mark"><h2 id="b1"></h2></div>
            </div>
            <div class="cell">
              <div class="mark"><h2 id="b2"></h2></div>
            </div>
            <div class="cell">
              <div class="mark"><h2 id="b3"></h2></div>
            </div>
            <div class="cell">
              <div class="mark"><h2 id="c1"></h2></div>
            </div>
            <div class="cell">
              <div class="mark"><h2 id="c2"></h2></div>
            </div>
            <div class="cell">
              <div class="mark"><h2 id="c3"></h2></div>
            </div>
          </div>

          <footer>
            <div class="player x">
              <h2 class="x">X</h2>
              <h1 class="score x">1</h1>
            </div>
            <div class="player o">
              <h2 class="o">O</h2>
              <h1 class="score o">1</h1>
            </div>
          </footer>
    </body>
</html>

gaand commented 8 years ago

@J-Weeks What's the best way to remove

<link href='https://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>

from the header and store it (and dependencies) in vendor.bundle.js?

RealWeeks commented 8 years ago

I would use the SASS syntax to import it

RealWeeks commented 8 years ago

So something like @import url(https://fonts.googleapis.com/css?family=Open+Sans);

or even just add a font directory and add the js for the fonts in separate files. If Sean really wanted to be cool he could find a font loader and do some light webpack configuration.

sjf125 commented 8 years ago

Thanks! I've removed <link href='https://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'> and have replaced it with the scss @import, but my cell styling is still getting overridden by bootstrap. :/

Here's my current import list - maybe the order has something to do with it?

$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
@import '~bootstrap-sass/assets/stylesheets/bootstrap';
@import url(https://fonts.googleapis.com/css?family=Quicksand);
@import 'breakpoints';
@import 'colors';
@import 'typography';
@import 'board';
@import 'cells';
@import 'scoreboard';

RDegnen commented 8 years ago

The order in which you import things in the index.scss file can mess things up sometimes

sjf125 commented 8 years ago

I tried moving @import '~bootstrap-sass/assets/stylesheets/bootstrap'; to the end, but still overrode my styling.

gaand commented 8 years ago

@J-Weeks Wouldn't that put the imported files in bundle.js not vendor.bundle.js? @sjf125 If it's being overridden then the bootstrap styling is probably more specific than your styling.

RealWeeks commented 8 years ago

@gaand In my experience it has worked both locally and when built. I see @laurenfazah self-assigned. Already so I'm curious what the solution will be.

sjf125 commented 8 years ago

Got it, thanks Lauren! 'mark' is a reserved class in bootstrap as it turns out - changing the class name fixed it.

ga-wdi-boston / game-project

Bootstrap nullify styles: Reserved Classes #57