Pure CSS Email Layout

Primer CSS Layout

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"> 
                  w3wiki 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.w3wiki.net/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"> 
                              w3wiki User 1 
                          </p> 
                        <p class="email-subject"> 
                              w3wiki 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.w3wiki.net/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"> 
                              w3wiki 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.w3wiki.net/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"> 
                              w3wiki 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.w3wiki.net/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"> 
                              w3wiki 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"> 
                  w3wiki User 1 
              </p> 
            <p class="email-subject"> 
                  w3wiki Articles Published 
              </p> 
            <p class="email-time">2h ago</p> 
            <p> 
                  Congratulations Geek. Your written  
                articles are now available on  
                http://www.w3wiki.com 
              </p> 
        </div> 
    </div> 
    <div class="footer"> 
        <p>© 2023 w3wiki. All rights reserved.</p> 
    </div> 
</body> 
  
</html>

Output:

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"> 
                  w3wiki 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.w3wiki.net/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"> 
                              w3wiki User 1 
                          </p> 
                        <p class="email-subject"> 
                              w3wiki 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.w3wiki.net/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"> 
                              w3wiki 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.w3wiki.net/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"> 
                              w3wiki 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.w3wiki.net/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"> 
                              w3wiki 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"> 
                      w3wiki User 1 
                  </p> 
                <p class="email-subject"> 
                      w3wiki Articles Published 
                  </p> 
                <p class="email-time">2h ago</p> 
                <p> 
                      Congratulations Geek. Your written 
                    articles are now available on  
                    http://www.w3wiki.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 w3wiki. All rights reserved.</p> 
    </div> 
</body> 
  
</html>

Output:

Tags:

#Pure CSS #CSS #Web Technologies

Primer CSS Layout

Pure CSS Email Layout