DEV Community

dow2
dow2

Posted on • Edited on

Awesome Css Frameworks...

Figuring out a complex code problem or achieving the functionality you intended on are possibly some of the rewarding and gratifying parts of software engineering. You could write some of the most elegant code ever written containing some of the most efficient functions one could possibly write but without adding styling to your code the user might not notice the impact of this beautiful code you have written due to fact it does not contain a proper visual element to compliment the 'magic' taking place behind the scenes. Fortunately there is a way connect these two essential pieces of the puzzle by using Cascading Style Sheets or CSS. CSS is one of the core technologies used in the construction of web based Applications.

Today I am going to go over what CSS is and what is its role of the overall creation of applications. Cascading Style Sheets is the technology used for describing the visual representation presented on your application. There are 3 distinct ways of writing and implementing CSS.

  1. Inline CSS
  2. Embedded CSS
  3. External CSS

Inline CSS - When you write the css directly into body of the HTML element you with to apply the styling to.

<!DOCTYPE html>
<html>
  <head>
    <title>Inline CSS</title>
  </head>
  <body>
    <h1 style="color: blue; text-align: center">This is a heading</h1>
    <p style="color: red">This is a paragraph.</p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Embedded CSS - When you write the css in a style element locate in the head of the html document.

<!DOCTYPE html>
<html>
  <head>
    <title>Embedded CSS</title>
    <style>
      body {
        background-color: linen;
      }

      h1 {
        color: maroon;
        margin-left: 40px;
      }
    </style>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

External CSS - is when you create and independent style sheet css file that contains all written css in a single location that is referenced in your HTML file.

<!DOCTYPE html>
<html>
  <head>
    <title>External CSS</title>
    <link rel="stylesheet" href="mystyle.css" />
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

mystyle.css

body { 
    background-color: lightblue; 
} 

h1 { 
    color: navy; 
    margin-left: 20px; 
}
Enter fullscreen mode Exit fullscreen mode

Dedicating time to learning the ins and out of raw css can be an extremely daunting yet rewarding and beneficial task. You can essentially make your application do whatever you can imagine through the the creative implementation of css rules. Getting familiar or even proficient with subtle nuances of CSS rules can be an extremely time consuming task. In an attempt to streamline this process and give users a more refined path for for styling web pages FrameWorks containing best practices and premade styling combinations and features were created.

There are multiple different css frameworks separated in different categories which are utilized in different situations.

Base / Reset / Normalize

  • sanitize.css
  • modern-normalize
  • minireset.css
  • modern-css-reset
  • inuitcss
  • ress
  • Natural Selection

Class-less

  • Water.css
  • MVP.css
  • sakura
  • Tacit
  • awsm.css

Very Lightweight

  • Pure
  • Milligram
  • Picnic CSS
  • Chota

General Purpose

  • Bootstrap
  • Bulma
  • Foundation
  • UIkit
  • Primer
  • Carbon Components
  • Fomantic-UI
  • Pico.css
  • Blaze UI
  • Base
  • Cirrus
  • turretcss
  • Vanilla Framework
  • PatternFly
  • HiQ

Material Design

  • Material Components Web
  • MUI

Utility-based

  • Tailwind CSS
  • Tachyons
  • Open Props

Specialized

  • NES.css
  • 98.css
  • Tufte CSS
  • Gutenberg
  • Bojler
  • TuiCss

Top comments (0)