web-architecture-solutions

/*
 * Source: http://www.mightymeta.co.uk/1269/css-noise/
 * Instructions:
 * 1. Add the snippet to the bottom of your main stylesheet.
 * 2. Add class="noise" to HTML elements to apply noise, use class="body-noise" for body element only.
 * 3. Use grouped selectors instead if you want to avoid unsemantic class attributes.
 */
 
.noise {
	position: relative;

web-architecture-solutions

/*
 * Source: https://unindented.org/articles/github-ribbon-using-css-transforms/
 */
 
 .ribbon {
  background-color: #a00;
  overflow: hidden;
  white-space: nowrap;
  /* top left corner */
  position: absolute;

web-architecture-solutions

/*
 * Source: https://justmarkup.com/log/2018/03/collection-of-css-snippets/
 */

@media print { 
    a { 
        text-decoration: underline; 
    } 
    [href]:not([href^="#"]):after { 
        content: ' ('attr(href)') '; 

web-architecture-solutions

/* 
 * Pre-flexbox hack courtesy of Z63: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
 */

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

web-architecture-solutions

/*
 * Adapted from this guide: https://css-tricks.com/snippets/css/using-font-face/
 */

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('webfont.woff') format('woff'), /* Modern Browsers */
    url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */

web-architecture-solutions

/* 
 * Documentation + Resources:
 * https://developer.mozilla.org/en-US/docs/Web/CSS/::selection
 * https://css-tricks.com/almanac/selectors/s/selection/
 * https://www.w3schools.com/cssref/sel_selection.asp
 */

::selection { background: #000000; }
::-moz-selection { background: #000000; }
::-webkit-selection { background: #000000; }

web-architecture-solutions

/*
 * Adapted from this article on CSS-Tricks: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
 */

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px) and (max-device-width : 480px) {
  /* Styles */
}
 

web-architecture-solutions

/*
 * Based on Nicolas Gallagher's micro clearfix hack
 */

.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }
 
/* IE 6/7 */
.clearfix { zoom: 1; }

web-architecture-solutions

/*
 * Based on Eric Meyer's reset: https://meyerweb.com/eric/tools/css/reset/
 * Source: https://www.hongkiat.com/blog/css-snippets-for-designers/
 */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;

web-architecture-solutions

<?php 
/*
 * Source: https://speckyboy.com/wordpress-snippets-extend-wordpress/
 */
?>

<?php
$my_query = new WP_Query('post_status=future&order=DESC&showposts=5');
if ($my_query->have_posts()) {
  <ul>