Eps 31: SASS MixIn

A mixin allows developers to create reusable CSS blocks. This helps avoiding writing repetitive code. Also allows to make quick changes without searching code for every instance.


@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

 

Eps 30: SASS Basics

What is SASS?

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

Eps 29: Back to Basics

Check your workflow

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 Update Episode

This episode is being used as an update to what is to come in the near future.SASS, Bootstrap and JavaScript for starters.

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

CSS Float

A float allows an element to be moved/placed on the webpage

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>

 

Material Design: Expanding Circle

A very basic tutorial on how to build a Material Design expanding circle as seen on Google products.

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;
}

 

PHP Includes

PHP includes are a vital aspect of websites and should be incorporated into every Web Developer’s workflow.

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

Eps 25: CSS Backgrounds

http://www.w3schools.com/cssref/css3_pr_background.asp

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

Eps 24: Building A Table

Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out

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;
}

Eps 23: Styling Your Navigation

Welcome to Talking HTML, an audio/video internet thing for web developers who are just starting out

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;
}