search

lichess-org / chessground

Mobile/Web chess UI for lichess.org
https://lichess.org
GNU General Public License v3.0
1.03k stars 262 forks source link

Include a complete set of chessground CSS with NPM install #160

Closed linrock closed 3 years ago

linrock commented 3 years ago

This adds CSS files to the chessground repo so devs can get to a fully-functional and styled chessboard quickly. For example, after yarn install chessground or npm install chessground you can do this to get a useable board:

<html>
<body>
  <script src="./node_modules/chessground/dist/chessground.min.js"></script>
  <link rel="stylesheet" href="./node_modules/chessground/assets/base.css">
  <link rel="stylesheet" href="./node_modules/chessground/assets/colors.css">
  <link rel="stylesheet" href="./node_modules/chessground/assets/pieces.css">
  <div id="chessground" style="width: 400px; height: 400px; margin: 0 auto;"></div>
  <script>
    var ground = Chessground(document.getElementById("chessground"));
  </script>
</body>
</html>

Here's an example of what the rendered board looks like from the above index.html file:

I split the CSS into three files to separate out the base from the themes:

I'm happy to make any tweaks as needed. Fixes https://github.com/ornicar/chessground/issues/134

fitztrev commented 3 years ago

@linrock I had to add some more css rules to get arrows visible. I took these from the example in the current documentation:

.cg-wrap svg {
  overflow: hidden;
  position: relative;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  opacity: 0.6;
}

.cg-wrap svg image {
  opacity: 0.5;
}

EDIT: The CSS rule for arrows has been restored via #164