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.
<!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.
<!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://pure-css.github.io/