I just switched over to using Grid and Flexbox in designing my website(s). I know it is relatively new, but most (if not all) modern browsers support it. It has made designing responsive websites easier and my CSS file size seems to be actually smaller.
Here’s a sample of my css (I’m using Sass to write my CSS as I just like using it).
/* Fake Popup */
.shade {
display: none;
grid-template-columns: repeat(12, 1fr);
background-color: rgba(0, 0, 0, 0.7);
padding: 0;
margin: 0 auto;
.exit-slideshow {
grid-column: 1 / span 12;
grid-row: 1;
background-color: floralwhite;
height: 3.125em;
line-height: 3.125em;
a {
overflow: hidden;
display: inline-block;
width: 11.250em;
height: 100%;
background-color: rgba(green, 0.8);
font-family: "Titillium Web", sans-serif;
font-size: 1.2em;
color: #fff;
text-align: center;
text-decoration: none;
padding: 0;
margin: 0 0 0 0;
&:hover {
background-color: rgba(red, 0.8);
}
}
}
#pictureELE {
grid-column: 2 / span 10;
grid-row: 2;
justify-self: center;
align-self: center;
width: 85%;
}
#preSlide, #nextSlide {
z-index: 20200;
background-color: rgba(green, 0.8);
font-family: "Titillium Web", sans-serif;
font-size: 1.2em;
color: $color-white;
text-decoration: none;
padding: 10px;
&:hover {
background-color: rgba(red, 0.5);
}
}
#preSlide {
grid-column: 1 / span 1;
grid-row: 2;
justify-self: center;
align-self: center;
}
#nextSlide {
grid-column: 12 / span 1;
grid-row: 2;
justify-self: center;
align-self: center;
}
.additional-info {
grid-column: 1 / span 12;
grid-row: 3;
background-color: floralwhite;
height: 3.750em;
#exifData {
font-family: 'Dokdo', cursive;
font-size: 2.0em;
font-weight: 300;
color: #2e2e2e;
text-align: center;
span {
padding-left: 0.625em;
}
}
}
}
The above is for my picture when a user clicks on the smaller image on my website
https://www.miniaturephotographer.com/blog.php
I’m actually a Smarty Template person and here’s my main template: general_page_template.tpl
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<title>{block name=title}Pepster's Place{/block}</title>
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="shortcut icon" href="favicon.ico" >
<script src='https://www.google.com/recaptcha/api.js'></script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-4505611188786409",
enable_page_level_ads: true
});
</script>
</head>
<body id="exit-frame">
<div id="pictureBox" class="shade">
<div class="exit-slideshow">
<a id="btn-slideshow" class="btn-slideshow" href="#">← Exit to Website</a>
</div>
<img id="pictureELE" src="assets/images/img-duck-001.png" alt="Big Screen Picture">
<a id="preSlide" href="#">PREV</a>
<a id="nextSlide" href="#">NEXT</a>
<div class="additional-info">
<p id="exifData">Additional Info Coming Soon!</p>
</div>
</div>
<div id="container" class="container paper">
{block name=navigationTemplate}
<div class="navigation">
<ul id="menu">
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
{if $display_status}
<li><a href="member_page.php">Member</a></li>
<li><a href="logout.php">Logout</a></li>
{else}
<li><a href="blog.php">Picture Blog</a></li>
<li id="showLogin"><a href="login.php">Login</a></li>
{/if}
</ul>
</div>
{/block}
{block name=headerTemplate}
<div class="header">
<img class="logo" src="assets/images/img-logo-003.png" alt="The Miniature Photographer">
</div>
<div class="grid-calendar">
{$calendar}
</div>
{/block}
{block name=body}
{$journal}
{/block}
{block name=aside}
<div class="aside">
<div class="aside-container">
<div class="socialMediaStyle">
<ul class="socialIcons">
<li><a href="http://www.facebook.com/PepstersPlace" target="_blank"><img src="assets/images/img-facebook-logo-25x25.png" alt="Pepster's Place Facebook Page" ></a></li>
<li><a href="http://twitter.com/#!/Strider64" target="_blank"><img src="assets/images/img-twitter-logo-25x25.png" alt="Pepster's Twitter Profile" ></a></li>
<li><a href="http://www.linkedin.com/in/johnpepp" target="_blank"><img src="assets/images/img-linkedin-logo-25x25.png" alt="John Pepp's LinkedIn Profile" ></a></li>
<li><a href="https://www.flickr.com/photos/pepster/" target="_blank"><img src="assets/images/img-flickr-logo-100x25.png" alt="John Pepp's Flickr Profile" ></a></li>
</ul>
</div>
</div>
<h3 class="aside-heading">Favorite Links</h3>
<a href="https://www.youtube.com/channel/UCAVZgMB5cZvsSWf7BI0btOA?view_as=subscriber"><img class="aside-images" src="assets/images/img-youtube-001.jpg" alt="YouTube Page"></a>
<a href="https://froknowsphoto.com/"><img class="aside-images" src="assets/images/img-froknowsphoto-001.jpg" alt="Fro Knows Photo"></a>
<a href="https://www.dpreview.com/forums/"><img class="aside-images" src="assets/images/img-dpreview-001.jpeg" alt="Dpreview Website"></a>
<a href="https://bit.ly/2VwmUAJ"><img class="aside-images" src="assets/images/img-sony-alpha-logo-001.png" alt="Sony Alpha Cameras"></a>
{/block}
</div>
<div class="footer">
<p class="page-info">©2019 The Miniature Photographer</p>
</div>
</div>
<script src="assets/js/myLightRoom.js"></script>
<script src="assets/js/showLogin.js"></script>
</body>
</html>
and here’s my blog page template called blog.tpl:
{extends file=“general_page_template.tpl”}
{block name=title}
{$title|escape}
{/block}
{block name=body}
<div class="main">
{nocache}
<h1>The Daily Blog</h1>
<div id="gallery" class="picture-box" data-total="{$journal|count}" >
{counter start=-1 skip=1 print=false}
<div class="article">
{foreach $journal as $cms}
<h2>{$cms.heading} <span class="subheading">by {$cms.author} on {$cms.date_added}</span></h2>
<a class="myLightBox" href="{$cms.image_path}" title="Picture Gallery" data-picture="{counter}"
data-exif="{if $cms.Model}{$cms.Model} --- {$cms.FocalLength} {$cms.Aperture} {$cms.ISO} {$cms.ExposureTime}{/if}"><img class="box" src="{$cms.thumb_path}" alt="Picture for Journal Entry"></a>
<hr>
<p>{$cms.content|nl2br}</p>
{/foreach}
</div>
</div>
{/nocache}
</div>
{block name="aside"}
{/block}
{/block}
The one nice thing about using a template system such as Smarty or Twig templating system is a person doing the templating really doesn’t need to know backend programming. They still need to know basic programming, but I think a person who even just learned Basic would be able to design a templating system. My preference is to keep the CSS totally part of the general page and just have the person(s) design the template between the <body></body> element. Once you get the general page template done all a person really has to do page template (like blog.tpl). However, every one develops and designs differently and I’m just give my take on templating. Templates saves a lot of time developing as you not constantly do the same thing over and over again.
