Category Archives: Flexbox

– Welcome –

socialnetworks

Welcome to WordPress-Saratoga

  • Attendance: / Sign-in Sheet / password
  • Survey 1: Macintosh, Windows, Unix?
  • Survey 2: Freelance, Startup Team Member, Corporate Employee?
  • Survey 3: Beginner, Intermediate, Advanced User?
  • Fundamentals
    • Blogging
      • Write & post, categorize & tag; fresh content, from time to time.
      • Content consists of text, photos, and/or audio/visual media.
      • Accept comments from visitors.
    • WordPress.com
      • Free Hosted Service, Themes, and Widgets (limited)
      • Optimal Resource Utilization, Load Balancing
      • Automatic Version Updating
    • WordPress.org
      • Host a CMS* website on server of own choosing.
      • Unlimited Customization, Access to Code
      • Maintenance is your own Responsibility!
  • This Month’s Question?
  • Introduce Yourself
    • Name, Title, and Background
    • Tell us about your experience with WordPress so far.
    • Where do you plan to go with WordPress?
  • Next Month?
  • Other Groups 

 <- Twitter Site

* Content Management System (CMS) is a computer program that allows publishing, editing and modifying content on a website as well as maintenance from a central interface. Such systems provide procedures to manage workflow in a collaborative environment.


Pulse Check

en.wikipedia.org/wiki/Indent_style#Ratliff_style

1) CSS Rule Structure

Web page styling rules are defined inline, embedded, or in an external .CSS file

Declarations grouped within a block:

selector {
     property: value;
     property: value;
     }

Element selector:
ul { padding-left: 5em; }

Selectors grouped within a rule:
ol, ul { margin-left: 5em; }

Class selector:
.entry-content { background-color: #c0c; }

Combination of element and class:
span.warning { font-weight: bold; }

ID selector:
#blog_title { font-size: 17px; }

Element within a class:

 .entry-content ol {
     background-color: #cc0;
     padding-left: 5em;
     }

Group combination & comment:
ol, ul { margin: 16px 0; padding: 0 0 0 40px; } /* top, right, bottom, left */

Inline syle:
<div style=”font-weight:bold; color:red”>Content</div>

Mind Blowing Declaration:

.entry-footer > span:not(:last-child):after {
     content: "\002f";
     display: inline-block;
     opacity: 0.7;
     padding: 0 0.538461538em;
     }

 

5) Flex Samples

 

.container { display: flex; }
.container { display: inline-flex }
.container { flex-direction: row | row-reverse | column | column-reverse; }
.container{ flex-wrap: nowrap | wrap | wrap-reverse; }

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

.container {
     justify-content: flex-start | flex-end | center | 
    space-between | space-around | space-evenly;
     }
.container { align-items: flex-start | flex-end | 
    center | baseline | stretch; }
.container {
    align-content: flex-start | flex-end | center | 
    space-between | space-around | stretch;
    }

.item { order: <integer>; }

.item { flex-grow: <number>; }
.item { flex-shrink: <number>; }
.item { flex-basis: <length> | auto; }
.item { flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ] }

.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }

7) My Container

pink
coral
khaki
light green
light blue
thistle
plum

8) Selectors of TwentySixteen

virgin.zapmap.com

article { background: khaki;}
aside { background: lightblue;}
body { background: tan;}
button { background: red;}
footer { background: lightgreen;}
header { background: lightgreen;}
section { background: grey;}

.entry-content { background: magenta;}
.entry-footer { background: yellow;}
.screen-reader-text { background: white;}
.sidebar { background: lightblue;}
.site { background: lightgrey;}
.site-branding { background: ivory;}
.site-footer { background: coral;}
.site-header { background: coral;}
.site-main { background: cyan;}

9) For More Information – FYI