• The concept of taking a footer that more than likely doesn’t sit at the bottom of a screen comfortably and forcing it to stay put at the bottom of the screen.
• This is ideal if you have information there that you would like people to have a constant view on. Ie, social links, navigation links, contact information

<footer id=”footer”>
Content goes here.
</footer>

#footer {
  position:fixed;
  left:0px;
  bottom:0px;
  Height:30px; <!–Is it needed? Play around with it –>
  width:100%;
}

Flexbox – via CSS Tricks by Chris Coyier

Twitter
@SchaffenCreate
@tommnorman

Website: https://www.schaffencreative.com

The post Eps 35: Fixed Position Footer appeared first on Schaffen Creative.


@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.

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.

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.

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.

<aside></aside>

• section of the page with content related to the page
• separate from that content.
• Used as a sidebar or an inserted box/space
• advertisements
• bio/blurb/profile information  
• related links on a site
• Does NOT have to be on the side of the site/page
• Be creative, use a circle or other shape
• Place it in the middle of the page, wrap wording around the container.
• Whatever you decide to do with it, make sure it sticks out as separate content
  • Different background color, use a border of some sort

As always, ease of use is most important over all

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

The post Eps 22: An Aside – Talking HTML appeared first on Schaffen Creative.

Break goals into bite sized chunks. If you want to learn a language make weekly checkpoints.

For long term goals have monthly or bimonthly checkpoints.

Know who you are and be realistic about your goals. 

Before you begin down your path it may be helpful to map out your plans. Create a calendar on your phone/computer and use notifications to keep you on track. Join social groups or local meet ups to enhance your experience. If you share your experience with friends, family or even strangers that may go a long way in having accountability to someone more than yourself. Nobody likes disappointing other people.

Give me a rating on iTunes, Stitcher or any other place you get your podcasts.

Leave me comments!

Webdevpod.com for all content and shows

@tnpwdesign

@tommnorman

The post Eps 21: Resolutions – Talking HTML appeared first on Schaffen Creative.

<!– BEGIN GOOGLE FONTS –>
<link href=’http://fonts.googleapis.com/css?family=Kite+One|Merienda+One|Sintony’ rel=’stylesheet’ type=’text/css’>
<!– END GOOGLE FONTS–>

Ensure readability and accessibility before choosing a final font for your website!

If you enjoy listening please share it with your friends and Please go to iTunes and Stitcher to rate the show! Ratings get listeners!!

If you leave a good comment it could end up on the front page of the site!

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

@TNPWDesign

@tommnorman

DreamHost promo code – tnpw

The post Eps 20: Google Fonts – Talking HTML appeared first on Schaffen Creative.