Texte tronqué

https://css-tricks.com/flexbox-truncated-text/

Flexboxes

  • https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  • http://codepen.io/aderaaij/post/flexbox-resources
  • https://medium.com/@samserif/flexbox-s-best-kept-secret-bd3d892826b6#.cw0j5svnz

Layout avec flexboxes

http://codepen.io/HugoGiraudel/pen/qIAwr

Fichier de travail

<html>
<head>
<title>Flexbox</title>
  <style type="text/css" media="screen">
  html, body{

    margin: 0;
    padding: 0;
  }

  .container{
    background: #000;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
  }

  .item{
    order: <integer>;
    padding: 10px;
    width: 275px;
    height: 275px;
    flex: 1;
  }

  .item-1{background: #60eeae;}
  .item-2{background: #d54b62;}
  .item-3{background: #608c43;}
  .item-4{background: #ebae44;}
  </style>
</head>
  <body>
    <div class="container">
      <div class="item item-1">1</div>
      <div class="item item-2">2</div>
      <div class="item item-3">3</div>
      <div class="item item-4">4</div>
    </div>
  </body>
</html>

Animation

  • https://danielcwilson.com/blog/2019/02/step-and-jump/ jump-start, jump-end, steps(n). Des outils utiles pour animer.

Librairies

  • https://bulma.io/ Framework css-only, basé sur flexbox