Pure CSS Email Layout

Last Updated : 18 Sep, 2023

Pure CSS Email Layout provides the structure and styles of our application for displaying the emails, viewing the selected email, performing search functionality, and also performing reply, forward, and delete operations on the individual email, along with facilitating the proper grid classes to perform a responsive and well-structured way to represent the application in various screen sizes.

Pure CSS Email Layout Classes

pure-menu: This class is used to create the navigation menu in the application.
pure-menu-heading: This class is used for the styling of the heading that is used in the navigation menu of the application.
pure-menu-item: This class is used to style each individual list item within the menu.
pure-menu-list: This class is used to style the unordered elements of menu items.
pure-menu-link: This class basically anchors the elements that are in the menu items.

Syntax

<div class="pure-g">
    <div class="pure-form">
        ...
    </div>
</div>

Example 1: This example describes the basic implementation of the Pure CSS Email Layout.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport"
          content="width=device-width,  
                   initial-scale=1.0"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/purecss@2.0.3/build/pure-min.css"> 
    <style> 
        body { 
            margin: 0; 
            padding: 0; 
            font-family: Arial, sans-serif; 
            background-color: #f6f6f6; 
        } 
  
        .header { 
            background-color: #00b300; 
            color: #ffffff; 
            padding: 20px; 
            text-align: center; 
        } 
  
        .container { 
            display: flex; 
        } 
  
        .sidebar { 
            background-color: #f4f4f4; 
            width: 240px; 
            padding: 20px; 
            border-right: 1px solid #d0d0d0; 
        } 
  
        .pure-menu-list .pure-menu-item { 
            margin-bottom: 15px; 
        } 
  
        .pure-menu-link { 
            font-weight: bold; 
            color: #333; 
        } 
  
        .content { 
            flex: 1; 
            padding: 20px; 
        } 
  
        .email-list { 
            border-top: 1px solid #d0d0d0; 
            margin-top: 20px; 
        } 
  
        .email-item { 
            display: flex; 
            align-items: center; 
            padding: 10px; 
            border-bottom: 1px solid #d0d0d0; 
            cursor: pointer; 
            transition: background-color 0.2s; 
        } 
  
        .email-item:hover { 
            background-color: #f2f2f2; 
        } 
  
        .email-item img { 
            width: 40px; 
            height: 40px; 
            border-radius: 50%; 
            margin-right: 10px; 
        } 
  
        .email-details { 
            margin-left: 10px; 
        } 
  
        .email-sender { 
            font-weight: bold; 
            font-size: 18px; 
            margin: 0; 
            color: #333; 
        } 
  
        .email-subject { 
            color: #444; 
            margin: 8px 0; 
            font-size: 16px; 
        } 
  
        .email-time { 
            font-size: 14px; 
            color: #888; 
        } 
  
        .email-viewer { 
            background-color: #fff; 
            padding: 20px; 
            border: 1px solid #d0d0d0; 
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
            margin-top: 20px; 
        } 
  
        .footer { 
            background-color: #f4f4f4; 
            padding: 10px; 
            text-align: center; 
            color: #555; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="pure-g header"> 
        <div class="pure-u-1"> 
            <h1 class="pure-text"> 
                  GeeksforGeeks Mail System 
              </h1> 
        </div> 
    </div> 
    <div class="container pure-g"> 
        <div class="pure-u-1 pure-u-md-1-4 sidebar"> 
            <ul class="pure-menu-list"> 
                <li class="pure-menu-item"> 
                      <a href="#" 
                       class="pure-menu-link"> 
                          Inbox 
                      </a> 
                  </li> 
                <li class="pure-menu-item"> 
                      <a href="#"
                       class="pure-menu-link"> 
                          Sent 
                      </a> 
                  </li> 
                <li class="pure-menu-item"> 
                      <a href="#" 
                       class="pure-menu-link"> 
                          Drafts 
                      </a> 
                  </li> 
                <li class="pure-menu-item"> 
                      <a href="#" 
                       class="pure-menu-link"> 
                          Starred 
                      </a> 
                  </li> 
                <li class="pure-menu-item"> 
                      <a href="#" 
                       class="pure-menu-link"> 
                          Important 
                      </a> 
                  </li> 
                <li class="pure-menu-item"> 
                      <a href="#" 
                       class="pure-menu-link"> 
                          Labels 
                      </a> 
                  </li> 
                <li class="pure-menu-item"> 
                      <a href="#" 
                       class="pure-menu-link"> 
                          More 
                      </a> 
                </li> 
            </ul> 
            <button class="pure-button pure-button-primary"> 
                  Compose 
              </button> 
        </div> 
        <div class="pure-u-1 pure-u-md-3-4 content"> 
            <h2 class="pure-text"> 
                  Email List 
              </h2> 
            <div class="email-list"> 
                <div class="email-item pure-g"> 
                    <div class="pure-u-1 pure-u-md-1-5"> 
                        <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20230816114558/Avator.jpg"
                            alt="Sender"> 
                    </div> 
                    <div class="pure-u-1 pure-u-md-4-5 email-details"> 
                        <p class="email-sender"> 
                              GeeksforGeeks User 1 
                          </p> 
                        <p class="email-subject"> 
                              GeeksforGeeks Articles Published 
                          </p> 
                        <p class="email-time">2h ago</p> 
                    </div> 
                </div> 
                <div class="email-item pure-g"> 
                    <div class="pure-u-1 pure-u-md-1-5"> 
                        <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20230816114558/Avator.jpg"
                            alt="Sender"> 
                    </div> 
                    <div class="pure-u-1 pure-u-md-4-5 email-details"> 
                        <p class="email-sender"> 
                              GeeksforGeeks User 2 
                          </p> 
                        <p class="email-subject"> 
                              Articles Added in Pick Section 
                          </p> 
                        <p class="email-time">1d ago</p> 
                    </div> 
                </div> 
                <div class="email-item pure-g"> 
                    <div class="pure-u-1 pure-u-md-1-5"> 
                        <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20230816114558/Avator.jpg"
                            alt="Sender"> 
                    </div> 
                    <div class="pure-u-1 pure-u-md-4-5 email-details"> 
                        <p class="email-sender"> 
                              GeeksforGeeks User 3 
                          </p> 
                        <p class="email-subject"> 
                              Important News regarding GFG Courses 
                          </p> 
                        <p class="email-time">3d ago</p> 
                    </div> 
                </div> 
                <div class="email-item pure-g"> 
                    <div class="pure-u-1 pure-u-md-1-5"> 
                        <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20230816114558/Avator.jpg"
                            alt="Sender"> 
                    </div> 
                    <div class="pure-u-1 pure-u-md-4-5 email-details"> 
                        <p class="email-sender"> 
                              GeeksforGeeks User 4 
                          </p> 
                        <p class="email-subject"> 
                              Invitation to DSA Event 
                          </p> 
                        <p class="email-time">1w ago</p> 
                    </div> 
                </div> 
            </div> 
        </div> 
        <div class="pure-u-1 pure-u-md-1-3 email-viewer"> 
            <h3>Email Viewer</h3> 
            <p class="email-sender"> 
                  GeeksforGeeks User 1 
              </p> 
            <p class="email-subject"> 
                  GeeksforGeeks Articles Published 
              </p> 
            <p class="email-time">2h ago</p> 
            <p> 
                  Congratulations Geek. Your written  
                articles are now available on  
                http://www.geeksforgeeks.com 
              </p> 
        </div> 
    </div> 
    <div class="footer"> 
        <p>© 2023 GeeksforGeeks. All rights reserved.</p> 
    </div> 
</body> 
  
</html>

Output:

Video-1

Example 2: This example describes the more enhanced demonstration of Email Layout. We have used different Pure CSS classes for designing the text and button components of the layout.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/purecss@2.0.3/build/pure-min.css"> 
    <style> 
        body { 
            margin: 0; 
            padding: 0; 
            font-family: Arial, sans-serif; 
            background-color: #f6f6f6; 
        } 
  
        .header { 
            background-color: #00b300; 
            color: #ffffff; 
            padding: 20px; 
            text-align: center; 
        } 
  
        .container { 
            display: flex; 
            justify-content: space-between; 
            align-items: flex-start; 
        } 
  
        .sidebar { 
            background-color: #f4f4f4; 
            width: 240px; 
            padding: 20px; 
            border-right: 1px solid #d0d0d0; 
        } 
  
        .pure-menu-list .pure-menu-item { 
            margin-bottom: 15px; 
        } 
  
        .pure-menu-link { 
            font-weight: bold; 
            color: #333; 
        } 
  
        .content { 
            flex: 1; 
            padding: 20px; 
        } 
  
        .email-list { 
            border-top: 1px solid #d0d0d0; 
            margin-top: 20px; 
        } 
  
        .email-item { 
            display: flex; 
            align-items: center; 
            padding: 10px; 
            border-bottom: 1px solid #d0d0d0; 
            cursor: pointer; 
            transition: background-color 0.2s; 
        } 
  
        .email-item:hover { 
            background-color: #f2f2f2; 
        } 
  
        .email-item img { 
            width: 40px; 
            height: 40px; 
            border-radius: 50%; 
            margin-right: 10px; 
        } 
  
        .email-details { 
            margin-left: 10px; 
        } 
  
        .email-sender { 
            font-weight: bold; 
            font-size: 18px; 
            margin: 0; 
            color: #333; 
        } 
  
        .email-subject { 
            color: #444; 
            margin: 8px 0; 
            font-size: 16px; 
        } 
  
        .email-time { 
            font-size: 14px; 
            color: #888; 
        } 
  
        .email-viewer { 
            background-color: #fff; 
            padding: 20px; 
            border: 1px solid #d0d0d0; 
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
            margin-top: 20px; 
            flex: 1; 
            margin-left: 20px; 
            margin-right: 20px; 
        } 
  
        .email-viewer h3 { 
            margin-top: 0; 
            font-size: 24px; 
        } 
  
        .email-content { 
            margin-top: 20px; 
        } 
  
        .email-footer { 
            margin-top: 20px; 
            text-align: right; 
        } 
  
        .email-actions { 
            margin-top: 20px; 
        } 
  
        .email-actions button { 
            margin-right: 10px; 
        } 
  
        .email-search { 
            margin-top: 20px; 
            display: flex; 
            align-items: center; 
        } 
  
        .search-input { 
            flex: 1; 
            padding: 10px; 
        } 
  
        .search-button { 
            margin-left: 10px; 
        } 
  
        .footer { 
            background-color: #f4f4f4; 
            padding: 10px; 
            text-align: center; 
            color: #555; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="pure-g header"> 
        <div class="pure-u-1"> 
            <h1 class="pure-text"> 
                  GeeksforGeeks Mail System 
              </h1> 
        </div> 
    </div> 
    <div class="container pure-g"> 
        <div class="pure-u-1 pure-u-md-1-4 sidebar"> 
            <ul class="pure-menu-list"> 
                <li class="pure-menu-item"> 
                      <a href="#" 
                       class="pure-menu-link"> 
                          Inbox 
                      </a> 
                  </li> 
                <li class="pure-menu-item"> 
                      <a href="#" 
                       class="pure-menu-link"> 
                          Sent 
                      </a> 
                  </li> 
                <li class="pure-menu-item"> 
                      <a href="#" 
                       class="pure-menu-link"> 
                          Drafts 
                      </a> 
                  </li> 
                <li class="pure-menu-item"> 
                      <a href="#" 
                       class="pure-menu-link"> 
                          Starred</a> 
                  </li> 
                <li class="pure-menu-item"> 
                      <a href="#" 
                       class="pure-menu-link"> 
                          Important 
                      </a> 
                  </li> 
                <li class="pure-menu-item"> 
                      <a href="#" 
                       class="pure-menu-link"> 
                          Labels 
                      </a> 
                  </li> 
                <li class="pure-menu-item"> 
                      <a href="#" 
                       class="pure-menu-link"> 
                          More 
                      </a> 
                </li> 
            </ul> 
            <button class="pure-button pure-button-primary"> 
                  Compose 
              </button> 
        </div> 
        <div class="pure-u-1 pure-u-md-2-3 content"> 
            <h2 class="pure-text">Email List</h2> 
            <div class="email-search"> 
                <input type="text" 
                       class="pure-input-rounded search-input" 
                       placeholder="Search emails..."> 
                <button class="pure-button  
                               pure-button-primary search-button"> 
                      Search 
                  </button> 
            </div> 
            <div class="email-list"> 
                <div class="email-item pure-g"> 
                    <div class="pure-u-1 pure-u-md-1-5"> 
                        <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20230816114558/Avator.jpg"
                             alt="Sender"> 
                    </div> 
                    <div class="pure-u-1 pure-u-md-4-5 email-details"> 
                        <p class="email-sender"> 
                              GeeksforGeeks User 1 
                          </p> 
                        <p class="email-subject"> 
                              GeeksforGeeks Articles Published 
                          </p> 
                        <p class="email-time">2h ago</p> 
                    </div> 
                </div> 
                <div class="email-item pure-g"> 
                    <div class="pure-u-1 pure-u-md-1-5"> 
                        <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20230816114558/Avator.jpg"
                             alt="Sender"> 
                    </div> 
                    <div class="pure-u-1 pure-u-md-4-5 email-details"> 
                        <p class="email-sender"> 
                              GeeksforGeeks User 2 
                          </p> 
                        <p class="email-subject"> 
                              Articles Added in Pick Section 
                          </p> 
                        <p class="email-time">1d ago</p> 
                    </div> 
                </div> 
                <div class="email-item pure-g"> 
                    <div class="pure-u-1 pure-u-md-1-5"> 
                        <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20230816114558/Avator.jpg"
                             alt="Sender"> 
                    </div> 
                    <div class="pure-u-1 pure-u-md-4-5 email-details"> 
                        <p class="email-sender"> 
                              GeeksforGeeks User 3 
                          </p> 
                        <p class="email-subject"> 
                              Important News regarding GFG Courses 
                          </p> 
                        <p class="email-time">3d ago</p> 
                    </div> 
                </div> 
                <div class="email-item pure-g"> 
                    <div class="pure-u-1 pure-u-md-1-5"> 
                        <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20230816114558/Avator.jpg"
                            alt="Sender"> 
                    </div> 
                    <div class="pure-u-1 pure-u-md-4-5 email-details"> 
                        <p class="email-sender"> 
                              GeeksforGeeks User 4 
                          </p> 
                        <p class="email-subject"> 
                              Invitation to DSA Event 
                          </p> 
                        <p class="email-time">1w ago</p> 
                    </div> 
                </div> 
            </div> 
        </div> 
        <div class="pure-u-1 pure-u-md-1-3 email-viewer"> 
            <h3>Email Viewer</h3> 
            <div class="email-content"> 
                <p class="email-sender"> 
                      GeeksforGeeks User 1 
                  </p> 
                <p class="email-subject"> 
                      GeeksforGeeks Articles Published 
                  </p> 
                <p class="email-time">2h ago</p> 
                <p> 
                      Congratulations Geek. Your written 
                    articles are now available on  
                    http://www.geeksforgeeks.com 
                  </p> 
            </div> 
            <div class="email-footer"> 
                <p class="email-time">2h ago</p> 
            </div> 
            <div class="email-actions"> 
                <button class="pure-button">Reply</button> 
                <button class="pure-button">Forward</button> 
                <button class="pure-button">Delete</button> 
            </div> 
        </div> 
    </div> 
    <div class="footer"> 
        <p>© 2023 GeeksforGeeks. All rights reserved.</p> 
    </div> 
</body> 
  
</html>