@mixin image-rotate {
margin: 20px auto 0 auto;
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

@mixin image-rotate-hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

img#norm {
@include image-rotate;
}

img#norm:hover{
@include image-rotate-hover;
}

Sitepoint example

A mixin can take Sass data values as arguments. These values are specified when you define the mixin and given when you @include the mixin. The arguments are then passed to the mixin as variables. Arguments are included in a comma separated list enclosed in parentheses after the mixin name.

@mixin headline ($color, $size) {
color: $color;
font-size: $size;
}

h1 {
@include headline(green, 12px);
}

h1 {
color: green;
font-size: 12px;
}


h2 {
@include headline(red, 10px);
}

h2 {
color: red;
font-size: 10px;
}


@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}

Compiling program & link (Koala)

Where to learn about SASS – http://sass-lang.com/

Codeacademy has a SASS class

@tommnorman

@tnpwdesign

TNPWDesign.com

WebDevPod.com

The post Eps 31: SASS MixIn – Talking HTML appeared first on Schaffen Creative.

Considered an extension of CSS. I consider it a streamlined version of CSS.

How it works

• Set up on your personal system – I use Koala to compile my code
  • Done locally then uploaded to the server via Filezilla
• Create a .SCSS file
• Write ANY CSS code as you normally would
• Add the SASS styling code as you see fit
  • variables
  • mixins
  • Code Nesting
    • Putting code inside of code
  • imports
    • Get into it in a future eps
• Save file
• Compile code
  • may do so automatically once SCSS file is saved.
  • Compiling transforms your SCSS file into a CSS file

Benefits

• Streamline CSS writing – The one change will be distributed accross to all the corresponding instances of whatever it is you changed.

Negatives

• You have to learn how to use SASS
• You have to figure out how to get it to work on your computer, which can be a feat if you aren’t Computer savvy

Variables

• Not usable in standard CSS
• SASS integrates a way to create variables which then translates to regular CSS when compiled


$primary-color: #113e6d; /* BREWER BLUE */
$secondary-color: #c1c4c4; /* COWBOY GRAY */
$tertiary-color: #ffbf00; /* PACKER GOLD */
$quaternary-color: #294239; /* PACKER GREEN */
$quinary-color: #b70101; /* BADGER RED */
$font-stack1: 'Merienda One', cursive;
$font-stack2: 'Kite One', sans-serif;
$font-stack3: 'Sintony', sans-serif;

body {
background-color: $primary-color;
font-family: $font-stack3;
font-size: 62.5%;
}

#center {
margin: 0 auto;
background-color: $secondary-color;
width: 800px;
}

Compiling program & link (Koala)

Where to learn about SASS – http://sass-lang.com/

Codeacademy has a class

@tommnorman

@tnpwdesign

TNPWDesign.com

WebDevPod.com

The post Eps 30: SASS Basics – Talking HTML appeared first on Schaffen Creative.

Review EVERYTHING.

• Look at where you work
  • Desk setup
  • Are you in an external office or do you sit in your living room at home
  • Do you need to find a new spot
  • What are you sitting in
    • Type of chair matters
  • How many monitors are you using
    • Do you need a new one?
    • Do you need to add another?

You can’t be productive if you are distracted or uncomfortable

• How do you work
  • What is your text editor of choice
    • Does it access FTP?
    • Do you work off of your local machine and upload via an FTP client like Filezilla?
    • How often are you checking your results.
      • Upload changes often and make minor tweaks along the way vs doing giant loads of work and fine tuning later
      • How much time do you waste sweating the small problems vs waiting until the end of the day – or even the project – to move pixels
  • Are you taking time to update your software?
    • Very important, especially if you are using wordpress
    • Checking for theme and plugin updates can be the difference between a hacked site and a site that loads quickly and efficiently
  • Biggest question
    • ARE YOU USING YOUR TIME WELL
      • Biggest distractions:
        • In home
          • Kids
          • Pets
          • Technology
            • Tv or phone
        • Office setting
          • Co-workers
          • Technology
          • Disorganized business
            • Random meetings
            • Too much watercooler talk

How do you fix the issues

• Force yourself to take time – maybe 5 minutes a day – to organize your desk, clean up your computer desktop, reorganize files and folders

On top of basic housekeeping ask yourself this: Can I improve myself

• Are you keeping up on current topics in design and development
• Are you trying new resources

@tommnorman

@tnpwdesign

TNPWDesign.com

WebDevPod.com

The post Eps 29: Back to Basics – Talking HTML appeared first on Schaffen Creative.

Also a giant thank you to everyone who has downloaded, listened or rated this podcast. I have read the comments and I appreciate the nice words. Come back again for more episodes coming soon.

@tommnorman

@tnpwdesign

TNPWDesign.com

WebDevPod.com

The post The Update Episode – Talking HTML appeared first on Schaffen Creative.

Float event:

elements are removed from the flow of the website. Will cause issues with non floated elements.

Use:

Float: left, right, none

Clear: left, right, both

ORDER MATTERS!!!

Items in the first position will be placed first.

Go to itunes, stitcher, or wherever you get your podcasts and leave the show a rating and a comment. Ratings get listeners! If you don’t leave a rating/comment then please tell a friend.

@tommnorman

@TNPWDesign

Link to the Youtube video: https://youtu.be/vD3hA5xh7lA

webdevpod.com

CODE

body {
    Width: 980px;
}

#box1 {
    height: 400px;
    width: 300px;
    margin: 10px;    
    background: #000;
}

#box2 {
    height: 300px;
    width: 300px;    
    margin: 10px;
    background: #F00;
}

#box3 {
    height: 200px;
    width: 300px;    
    margin: 10px;
    background: #0F0;
}

footer {
    height: 200px;
    width: 300px;
    margin: 10px;    
    background: #00F; 
}

<div id=”box1″ class=”box”></div>
<div id=”box2″ class=”box”></div>
<div id=”box3″ class=”box”></div>
<footer></footer>

The post CSS Float – Talking HTML appeared first on Schaffen Creative.

Smashing Magazine Transition article

Material Design Instructions

https://design.google.com/

HTML

<div class=”container_circle”>
<div class=”circle circle1″>
<!– <img src=”YOUR-URL-IMAGE.png”> –>
<p>+</p>
</div>
<div class=”circle circle2″><p><a href=””>t</a></p></div>
<div class=”circle circle3″><p><a href=””>f</a></p></div>
<div class=”circle circle4″><p><a href=””>g+</a></p></div>
</div>

CSS

.circle
{
width:60px;
height:60px;
box-shadow: 3px 3px 6px #333333;
border-radius:50%;
position: fixed;
bottom: 10px;
right: 10px;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-ms-transition:all 0.2s linear;
transition:all 0.2s linear;
}

.circle p {
margin: 0;
padding: 0;
font-size: 40px;
font-weight: bold;
}

.circle1
{
background-color:#db4531;
z-index: 4;
}

.circle2
{
background: #00aced;
z-index: 3;
<!– background-image: url(YOUR-URL-IMAGE.png); –>
background-size:cover;
}

.circle3
{
background: #3b5998;
z-index: 2;
<!– background-image: url(YOUR-URL-IMAGE.png); –>
background-size:cover;
}

.circle4
{
background: #dd4b39;
z-index: 1;
<!– background-image: url(YOUR-URL-IMAGE.png); –>
background-size:cover;
}

.container_circle:hover .circle2
{
bottom:75px;
}

.container_circle:hover .circle3
{
bottom:140px;
}

.container_circle:hover .circle4
{
bottom:205px;
}

The post Material Design: Expanding Circle – Talking HTML appeared first on Schaffen Creative.

Code via Chris Coyier and the CSS Tricks website   

Main reason for using a PHP include:

1. All code for a specific function is under 1 roof.
   1. If you need to make a change you change it in 1 spot instead of going to each and every individual page

When using and creating includes the files need to have the php extension on the file. 

Index.html turns into index.php  

Popular includes to create:

Footer.php
Header.php
Navigation.php 

Other examples:

Meta data/ stylesheets/ head information
Social media
Separate website tracking code if you don’t/can’t include it in the footer.  

General include statement: 

<?php include(“header.php”); ?>

PHP include statement from root.

<?php
$path = $_SERVER[‘DOCUMENT_ROOT’];
$path .= “/common/header.php”;
include_once($path);
?>

DISCLAIMER: when using PHP includes you HAVE TO ensure ALL OF YOUR LINKS are sourced from the root.

• All internal navigation
• Direct links from 1 page to another that is not in the navigation
• Image file locations

Generally speaking this is something to get into the habit of doing anyway, that way if you move something you don’t have to remember to fix the link. Also I do believe that this is a general web standard.

webdevpod.com

@tommnorman

@TNPWDesign

The post PHP Includes – Talking HTML appeared first on Schaffen Creative.

Individual Properties

Background -image

Background -repeat

Background -position

Background -size

Shortcode

background : #cccccc url(“img_tree.gif”) no-repeat fixed top left;

Multiple Background Images

background -image: url(“img_tree.gif”), url(“img_flwr.gif”);

Properties

positioning: top, bottom, left, right, center repeat, repeat-x (horizontal), repeat-y (vertical), no-repeat,

horizontal% vertical% (top left is 0% 0%)

horizontalpos verticalpos – ex= (0px 0px), (0em, 0em)

background -image default is top-left corner of an element and repeated

You can set a background to inherit, though I don’t recommend it.

Gradients can be created – however it is not supported by all browsers. Use with caution. If you are interested in background gradients simply search css background gradients to find some tutorials

@TNPWdesign

@tommnorman

Dreamhost.com – promo code: TNPW

The post Eps 25: CSS Backgrounds – Talking HTML appeared first on Schaffen Creative.

W3 Schools

The headers attribute specifies one or more header cells a table cell is related to and has no visual effect in ordinary web browsers, but can be used by screen readers.

Please go to iTunes and Stitcher and rate the show! Ratings get listeners!!

http://www.Webdevpod.com for all the content and links

@TNPWDesign

@tommnorman

DreamHost promo code – tnpw

HTML Code

<div id=”table”>
<table>
   <tr class=”odd”>
      <th id=”project”>Project Type</th>
      <th id=”price”>Price</th>
      <th id=”description”>General Requirements</th>
   </tr>
   <tr>
      <td headers=”project”>Websites</td>
      <td headers=”price”>$750+</td>
      <td headers=”description”>Personal, Business (non e-commerce) or Informational.</td>
   </tr>
   <tr class=”odd”>
      <td headers=”project”>E-Commerce</td>
      <td headers=”price”>$2,500+</td>
      <td headers=”description”>Websites in which selling merchandise is the main function.</td>
   </tr>
   <tr>
      <td headers=”project”>Hourly Rate</td>
      <td headers=”price”>$30/hour</td>
      <td headers=”description”>Reserved for projects under 10 hours of work and website maintenance.</td>
   </tr>
   <tr class=”odd”>
      <td headers=”project”>Charity and Non-profit</td>
      <td headers=”price”>Negotiable</td>
      <td headers=”description”>Reserved for organizations that deal with charities and non-profit organization.</td>
   </tr>
   <tr>
      <td headers=”project”>Podcast Setup</td>
      <td headers=”price”>$20/hour (minimum 1 hr)</td>
      <td headers=”description”>The setup and demonstration of the programs and options available in beginning and maintaining a FREE! audio and/or video podcast.</td>
   </tr>
</table>
</div>

CSS Code

div#table {
   width: 600px;
   font-size: 10px;
   margin: 5px auto 5px auto;
}
table {
   width: 400px;
   border: 3px solid #000;
   margin: auto;  
   padding: 10px;
   border-spacing: 0;
   text-align: center;
}
td, th {
   border: 1px solid #000;
   padding: 10px;
   text-align: center;
}
tr.odd {
   background: #333;
   color: #FFF;
}
table tr th {
   font-size: 1.6em;
   font-weight: bold;
   background: #999;
}
table tr td { font-size: 1.3em;
}

The post Eps 24: Building A Table – Talking HTML appeared first on Schaffen Creative.

This is a basic web development tutorial on styling a primary navigation using HTML and CSS.

As always, the code will be in the show notes.

Please go to iTunes, Stitcher or Google Play Music and rate the show! Ratings get listeners!!

http://www.Webdevpod.com for all the content and links

@TNPWDesign

@tommnorman

DreamHost promo code – tnpw

/* HTML */

<nav id=”nav”>    

   <ul>

      <li></li>

     <li></li>

   </ul>

</nav>

/* Navigation */

#nav {
padding-top: 205px;
margin-left: 105px;
}
#nav ul li{
color: white;
background: #113e63;
display: block;
width: 150px;
position: relative;
list-style-type: none;
float: left;
padding: 0px;
margin: 0 3px 0 0;
height: 40px;
border: 0px solid #ffbf00;
/*border-bottom: 3px solid #ffbf00;*/
border-top: 5px solid #fff;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}
#nav ul li a {
display: block;
text-decoration: none;
color: white;
font-size: 1.6em;
line-height: 40px;
text-align: center;
}
#nav ul li:hover,
#nav ul li:focus,
#nav ul li#current {
background: #c1c4c4;
line-height: 40px;
border-top: 5px solid #7c765b;
}
#nav ul li a:hover,
#nav ul li a:focus,
#nav ul li#current a {
color: #000;
}

The post A basic web development tutorial on styling a primary navigation using HTML and CSS. – Talking HTML appeared first on Schaffen Creative.