Open In App

Pure CSS Blog Layout

Last Updated : 14 Feb, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

Pure CSS Blog layout would consist of a header, navigation menu, main content area, and footer. The header would typically contain the blog title and possibly a logo. The navigation menu would allow users to easily navigate through the different sections of the blog. The main content area would be where the blog posts are displayed. The footer would typically contain additional information such as links to the blog’s social media profiles and a copyright notice.

Classes used:

  • pure-g: It creates a container for the grid, and all direct children of the container will be treated as grid items.
  • pure-u-1-3: It specifies that the element should take up 1/3 of the available width within the grid.
  • pure-menu: It is a class for creating a navigation menu.
  • pure-menu-heading: It is a class for the heading of the navigation menu.
  • pure-menu-list: It is a class for creating an unordered list of menu items.
  • pure-menu-item: It is a class for each list item in the menu.
  • pure-menu-link: It is a class for the anchor elements within the menu items.
  • pure-button: It is a class for creating a button.
  • pure-button-primary: This class is used for creating a primary button.
  • pure-u-1: This class is used to create a grid cell that spans the full width of the container. 
  • pure-u-md-1-2: This class is used to create a grid cell that spans half the width of the container on medium-size screens and above. 

Syntax:

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

Example 1: The layout consists of a header that contains the blog title and subtitle, and a section for displaying blog posts. Each blog post includes a title, date, and content. The blog posts are arranged in two columns using the Pure.css grid system. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet" href=
"https://unpkg.com/purecss@1.0.1/build/pure-min.css">
 
    <style>
        /* Custom styles */
        .blog {
            margin: 0 auto;
            max-width: 800px;
        }
 
        .blog-header {
            text-align: center;
            padding: 20px;
        }
 
        .blog-title {
            font-size: 36px;
            font-weight: bold;
        }
 
        .blog-subtitle {
            font-size: 24px;
            color: gray;
        }
 
        .blog-post {
            margin-bottom: 20px;
            padding: 20px;
            border: 1px solid lightgray;
        }
 
        .blog-post-title {
            font-size: 28px;
            margin-bottom: 10px;
        }
 
        .blog-post-date {
            font-size: 18px;
            color: gray;
            margin-bottom: 20px;
        }
 
        .blog-post-content {
            font-size: 18px;
            line-height: 1.5;
        }
    </style>
</head>
 
<body>
    <div class="blog">
        <header class="blog-header pure-g">
            <div class="pure-u-1">
                <h1 class="blog-title">
                    Welcome to GFG
                </h1>
                <p class="blog-subtitle">
                    Thoughts and musings on various topics
                </p>
            </div>
        </header>
        <div class="blog-posts pure-g">
            <div class="pure-u-1 pure-u-md-1-2">
                <article class="blog-post">
                    <h2 class="blog-post-title">Feature 1</h2>
                    <p class="blog-post-date">January 1, 2021</p>
                    <p class="blog-post-content">
                        The website offers a variety of articles
                        and tutorials on different programming
                        languages, data structures, and algorithms,
                        making it a great resource for anyone
                        looking to improve their coding skills.
                        The website also provides a platform for
                        users to test their skills by solving
                        practice problems, which are accompanied
                        by detailed solutions and explanations.
                    </p>
                </article>
            </div>
            <div class="pure-u-1 pure-u-md-1-2">
                <article class="blog-post">
                    <h2 class="blog-post-title">Feature 2</h2>
                    <p class="blog-post-date">January 2, 2021</p>
                    <p class="blog-post-content">
                        The website is well-organized and easy
                        to navigate, making it easy for users
                        to find the information they need. The
                        articles and tutorials are well-written
                        and easy to understand, making them
                        accessible to users of all skill levels.
                        The website also has a search bar, which
                        allows users to quickly find specific
                        information or topics.
                    </p>
                </article>
            </div>
        </div>
    </div>
 
</body>
 
</html>
 






                        










Output:


 


Example 2: This code will create a basic blog layout using the Pure CSS library. The layout uses grid classes to divide the page into columns and rows, and also uses classes for styling the menu, buttons, and text. 




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html>


<html>


 


<head>


    <link rel="stylesheet" href=


"https://unpkg.com/purecss@2.0.3/build/pure-min.css">


    <title>My Blog</title>


</head>


 


<body>


    <div class="pure-g">


        <div class="pure-u-1-3">


            <div class="pure-menu">


                <a class="pure-menu-heading" href="#">


                    Blog Categories


                </a>


                <ul class="pure-menu-list">


                    <li class="pure-menu-item">


                        <a href="#" class=


                            "pure-menu-link">Technology</a>


                    </li>


                    <li class="pure-menu-item">


                        <a href="#" class=


                            "pure-menu-link">Design</a>


                    </li>


                    <li class="pure-menu-item">


                        <a href="#" class=


                            "pure-menu-link">Travel</a>


                    </li>


                </ul>


            </div>


        </div>


        <div class="pure-u-2-3">


            <div class="pure-g">


                <div class="pure-u-1">


                    <h1>Welcome to GFG</h1>


                </div>


            </div>


            <div class="pure-g">


                <div class="pure-u-1-3">


                    <div class="l-box">


                        <h2>Feature 1</h2>


                        <p>


                            The website offers a variety 


                            of articles and tutorials


                            on different programming 


                            languages,data structures, and


                            algorithms, making it a great 


                            resource for anyone looking


                            to improve their coding skills. 


                            The website also provides a


                            platform for users to test 


                            their skills by solving


                            practice problems, which are 


                            accompanied by detailed


                            solutions and explanations.


                        </p>


                        <a href="#" class="pure-button">


                            Read More


                        </a>


                    </div>


                </div>


                <div class="pure-u-1-3">


                    <div class="l-box">


                        <h2>Feature 2</h2>


                        <p>


                            Additionally, GeeksforGeeks has 


                            a large and active community


                            of users who can share their 


                            knowledge and help others


                            with their coding problems.


                            Another great functionality


                            of GeeksforGeeks is its user-


                            friendly interface and


                            easy navigation.


                        </p>


                        <a href="#" class="pure-button">


                            Read More


                        </a>


                    </div>


                </div>


                <div class="pure-u-1-3">


                    <div class="l-box">


                        <h2>Article 3</h2>


                        <p>


                            The website is well-organized 


                            and easy to navigate, making 


                            it easy for users to find the 


                            information they need. The 


                            articles and tutorials are 


                            well-written and easy to 


                            understand, making them 


                            accessible to users of all 


                            skill levels. The website also 


                            has a search bar, which allows 


                            users to quickly find specific 


                            information or topics.


                        </p>


                        <a href="#" class="pure-button">


                            Read More


                        </a>


                    </div>


                </div>


            </div>


        </div>


    </div>


 


    <div class="pure-g">


        <div class="pure-u-1">


            <div class="l-box">


                <h2>About the Author</h2>


                <p>GFG Writers</p>


                <a href="#" class=


                    "pure-button pure-button-primary">


                    Learn More


                </a>


            </div>


        </div>


    </div>


</body>


 


</html>



















                        







                        










Output:


 


Reference: https://purecss.io/layouts/blog/


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Foundation CSS Motion UI Installation
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Ember.js Component actions Property
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                How to back up and Import blog content from one blog to another Blog in Blogger ?
            

        
    
        
            

                Create a Blog Website Layout using HTML and CSS
            

        
    
        
            

                Pure CSS Responsive Horizontal-to-Vertical Menu Layout
            

        
    
        
            

                Pure CSS Responsive Horizontal-to-Scrollable Menu Layout
            

        
    
        
            

                Pure CSS Layout Complete Reference
            

        
    
        
            

                Pure CSS Responsive Side Menu Layout
            

        
    
        
            

                Pure CSS Photo Gallery Layout
            

        
    
        
            

                Pure CSS Landing Page Layout
            

        
    
        
            

                Pure CSS Email Layout
            

        
    
        
            

                How to create a Blog Archive using HTML and CSS ?
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
S

        

            
        

        

                                    


                                    

                                        smeet002                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox