CSS Frameworks Review

I will focus on 4 Frameworks that we should consider, each was chosen for what it offers compared to the rest. To use the include code provided below simply place the entire contents inside your head!

Frameworks

• Bulma
  Website / Documentation

  • Key Points
    • A balance between simplicity and aesthetics
  • Useful links
    • https://www.youtube.com/watch?v=I8ezFcJ6AeM
    • https://www.youtube.com/watch?v=IiPQYQT2-wg
    • https://www.youtube.com/watch?v=MchBPICewgs
  • Include code:
    

     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">

• Bootstrap
  Website / Documentation

  • Key Points
    • Advanced framework with a decent learning curve
    • Utilized by a huge % of Themes you can buy, meaning if you plan to use a theme learn/use it
  • Useful links
    • https://www.youtube.com/watch?v=Zn64_IVLO88
    • https://www.youtube.com/watch?v=eIWRbvE1B2E
    • https://www.youtube.com/watch?v=9cKsq14Kfsw
  • Include code:
    

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

• Milligram
  Website / Documentation

  • Key Points
    • Super minimal framework and aesthetic
  • Include code:
    

    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic"> <link rel="stylesheet" href="//cdn.rawgit.com/necolas/normalize.css/master/normalize.css"> <link rel="stylesheet" href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css">

• UIKit
  Website / Documentation

  • • Key Points
      • Perfect for building an actual web application like
        • Idea posting site (with comments etc)
        • Travel planning site
      • Basically, anything that isn’t a normal web page, but rather a functional system
    • Useful links
      • https://www.youtube.com/watch?v=shFCueCxoqM
    • Include code:
      

       <!-- UIkit CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.42/css/uikit.min.css" /> <!-- UIkit JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.42/js/uikit.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.42/js/uikit-icons.min.js"></script>