A Pen by Lincoln Electric on CodePen.
Created
January 31, 2019 21:57
-
-
Save dylanburkey/e14ac24c6f97cab89d440ee00d02fcda to your computer and use it in GitHub Desktop.
Lincoln Electric Web Assets
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700" rel="stylesheet"> | |
| <div class="container"> | |
| <div class="base-section"> | |
| <h1 class="primary-header header">Web Assets</h1> | |
| <h2 class="subheader header">image sizes, naming conventions and optimization settings.</h2> | |
| <div class="asset-updates"> | |
| <ul class="no-bullets"> | |
| <li class="list-item--heading header">document updates</li> | |
| <li class="list-item">@author: Dylan Burkey</li> | |
| <li class="list-item">@date: 09/24/2018</li> | |
| </ul> | |
| <div class="notes-section"> | |
| <h3 class="notes-header">Notes</h3> | |
| <small class="notes">Naming conventions: Image names should use the product name and describe the asset.</small> | |
| <small class="notes">Web assets that do not follow the outline below, will be rejected.</small> | |
| <small class="notes">Please contact <a href="mailto:dylan_burkey@lincolnelectric.com">dylan_burkey@lincolnelectric.com</a> if you have any questions.</small> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="base-section section-info"> | |
| <header> | |
| <h2 class="subheader">Lincolnelectric.com</h2> | |
| </header> | |
| <div class="asset-updates"> | |
| <ul class="no-bullets"> | |
| <li class="list-item"><span class="list-item-lead header">website</span>lincolnelectric.com</li> | |
| <li class="list-item"><span class="list-item-lead header">web asset</span>homepage banners</li> | |
| <li class="list-item"><span class="list-item-lead header">size</span>980px / 300px</li> | |
| <ul class="no-bullets sub-list"> | |
| <li class="list-header header">naming conventions</li> | |
| <li class="list-item"><span class="list-item-lead header">desktop</span>product-name-year.jpg</li> | |
| <li class="list-item"><span class="list-item-lead header">example</span>powermig-260-2018.jpg</li> | |
| <div class="example-banner"> | |
| <img src="https://placehold.it/980x300" alt=""> | |
| </div> | |
| <li class="list-item pt-10"> | |
| <span class="list-item-lead header">mobile</span> product-name-year_mobile.jpg</li> | |
| <li class="list-item"><span class="list-item-lead header">example</span>powermig-260-2018_mobile.jpg</li> | |
| <div class="example-banner"> | |
| <img src="https://placehold.it/750x348" alt=""> | |
| </div> | |
| </ul> | |
| </ul> | |
| </div> | |
| </div> | |
| <hr> | |
| <div class="base-section"> | |
| <div class="asset-updates"> | |
| <ul class="no-bullets"> | |
| <li class="list-item"><span class="list-item-lead header">website</span>lincolnelectric.com</li> | |
| <li class="list-item"><span class="list-item-lead header">web asset</span>Homepage "In The Spotlight"</li> | |
| <li class="list-item"><span class="list-item-lead header">size</span>604px / 190px</li> | |
| <ul class="no-bullets sub-list"> | |
| <li class="list-header header">naming conventions</li> | |
| <li class="list-item"><span class="list-item-lead header">desktop</span>product-name-year-spotlight.jpg</li> | |
| <li class="list-item"><span class="list-item-lead header">example</span>powermig260-2018-spotlight.jpg</li> | |
| </ul> | |
| </ul> | |
| <div class="example-banner"> | |
| <img src="https://placehold.it/604x190" alt=""> | |
| </div> | |
| </div> | |
| </div> | |
| <hr> | |
| <div class="base-section"> | |
| <div class="asset-updates"> | |
| <ul class="no-bullets"> | |
| <li class="list-item"><span class="list-item-lead header">website</span>lincolnelectric.com</li> | |
| <li class="list-item"><span class="list-item-lead header">web asset</span>vertical advert</li> | |
| <li class="list-item"><span class="list-item-lead header">size</span>170px / 500px</li> | |
| <ul class="no-bullets sub-list"> | |
| <li class="list-header header">naming conventions</li> | |
| <li class="list-item"><span class="list-item-lead header">desktop</span>product-name-year-vertical.jpg</li> | |
| <li class="list-item"><span class="list-item-lead header">example</span>welding-trainig-lab-2018-vertical.jpg</li> | |
| </ul> | |
| </ul> | |
| <div class="example-banner"> | |
| <img src="https://placehold.it/170x500" alt=""> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="base-section section-info"> | |
| <header> | |
| <h2 class="subheader">Store.Lincolnelectric.com</h2> | |
| </header> | |
| <div class="asset-updates"> | |
| <ul class="no-bullets"> | |
| <li class="list-item"><span class="list-item-lead header">website</span>store.lincolnelectric.com</li> | |
| <li class="list-item"><span class="list-item-lead header">web asset</span>homepage banners</li> | |
| <li class="list-item"><span class="list-item-lead header">size</span>960px / 350px</li> | |
| <ul class="no-bullets sub-list"> | |
| <li class="list-header header">naming conventions</li> | |
| <li class="list-item"><span class="list-item-lead header">desktop</span>store-product-name-year.jpg</li> | |
| <li class="list-item"><span class="list-item-lead header">example</span>store-powermig260-2018.jpg</li> | |
| <li class="list-item"> | |
| </ul> | |
| </ul> | |
| <div class="example-banner"> | |
| <img src="https://placehold.it/960x350" alt=""> | |
| </div> | |
| </div> | |
| </div> | |
| <hr> | |
| <div class="base-section"> | |
| <div class="asset-updates"> | |
| <ul class="no-bullets"> | |
| <li class="list-item"><span class="list-item-lead header">website</span>strore.lincolnelectric.com</li> | |
| <li class="list-item"><span class="list-item-lead header">web asset</span>product page advert</li> | |
| <li class="list-item"><span class="list-item-lead header">size</span>610px / 200px</li> | |
| <ul class="no-bullets sub-list"> | |
| <li class="list-header header">naming conventions</li> | |
| <li class="list-item"><span class="list-item-lead header">desktop</span>store-product-name-year-advert.jpg</li> | |
| <li class="list-item"><span class="list-item-lead header">example</span> store-powermig260-2018-advert.jpg | |
| </li> | |
| </ul> | |
| </ul> | |
| <div class="example-banner"> | |
| <img src="https://placehold.it/610x200" alt=""> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="base-section section-info"> | |
| <header> | |
| <h2 class="subheader">Image Optimization</h2> | |
| </header> | |
| <div class="asset-updates"> | |
| <ul class="no-bullets"> | |
| <li class="list-item"><span class="list-item-lead header">download</span><a href="//imageoptim.com/mac">ImageOptim</a></li> | |
| <li class="list-item"><span class="list-item-lead header">Usage</span><a href="//imageoptim.com/howto.html">How to download and install ImageOptim</a></li> | |
| <ul class="no-bullets sub-list"> | |
| <li class="list-header header">basic compression settings</li> | |
| </ul> | |
| </ul> | |
| <div class="example-banner"> | |
| <img src='//s3-us-west-2.amazonaws.com/s.cdpn.io/t-1140/Screen%20Shot%202018-09-13%20at%203.03.10%20PM.png' alt=''> | |
| </div> | |
| <div class="example-banner"> | |
| <img src='//s3-us-west-2.amazonaws.com/s.cdpn.io/t-1140/Screen%20Shot%202018-09-13%20at%203.03.28%20PM.png' alt=''> | |
| </div> | |
| <div class="example-banner"> | |
| <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/t-1140/Screen%20Shot%202018-09-13%20at%203.03.36%20PM.png" alt=""> | |
| </div> | |
| </div> | |
| </div> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /// | |
| /// Viewport sized typography with minimum and maximum values | |
| /// | |
| /// @author Eduardo Boucas (@eduardoboucas) | |
| /// | |
| /// @param {Number} $responsive - Viewport-based size | |
| /// @param {Number} $min - Minimum font size (px) | |
| /// @param {Number} $max - Maximum font size (px) | |
| /// (optional) | |
| /// @param {Number} $fallback - Fallback for viewport- | |
| /// based units (optional) | |
| /// | |
| /// @example scss - 5vw font size (with 50px fallback), | |
| /// minumum of 35px and maximum of 150px | |
| /// @include responsive-font(5vw, 35px, 150px, 50px); | |
| /// | |
| @mixin responsive-font($responsive, $min, $max: false, $fallback: false) { | |
| $responsive-unitless: $responsive / ($responsive - $responsive + 1); | |
| $dimension: if(unit($responsive) == 'vh', 'height', 'width'); | |
| $min-breakpoint: $min / $responsive-unitless * 100; | |
| @media (max-#{$dimension}: #{$min-breakpoint}) { | |
| font-size: $min; | |
| } | |
| @if $max { | |
| $max-breakpoint: $max / $responsive-unitless * 100; | |
| @media (min-#{$dimension}: #{$max-breakpoint}) { | |
| font-size: $max; | |
| } | |
| } | |
| @if $fallback { | |
| font-size: $fallback; | |
| } | |
| font-size: $responsive; | |
| } | |
| h1,h2,h3,h4,h5 { | |
| color: #333; | |
| font-weight: 600; | |
| } | |
| .limit-min-max { | |
| @include responsive-font(3vw, 20px, 50px); | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| *:before, | |
| *:after { | |
| box-sizing: inherit; | |
| } | |
| body { | |
| background: #808080; | |
| font-family: 'Source Sans Pro', sans-serif; | |
| @include responsive-font(10vw, 14px, 16px); | |
| line-height: 1.6; | |
| } | |
| .container { | |
| border-radius: 5px/5px; | |
| max-width: 60vw; | |
| margin: 1em auto; | |
| font-weight: normal; | |
| color: #191919; | |
| background: #eee; | |
| padding: 0 2%; | |
| &:after { | |
| display: table; | |
| content: ''; | |
| } | |
| } | |
| .header { | |
| text-transform: capitalize; | |
| } | |
| .no-bullets { | |
| list-style: none; | |
| padding-left: 0; | |
| margin: 0; | |
| } | |
| .sub-list { | |
| padding-left: 0.85em; | |
| padding-top: 1em; | |
| display: block; | |
| } | |
| .base-section { | |
| margin: 1em 0; | |
| padding: 0.85em; | |
| &:after { | |
| display: table; | |
| content: ''; | |
| } | |
| } | |
| .list-header { | |
| text-decoration: underline; | |
| font-weight: 600; | |
| @include responsive-font(5vw, 10px, 20px); | |
| padding: 0.375em 0; | |
| margin-bottom: 0.475em; | |
| } | |
| header { | |
| margin: 2em 0; | |
| .subheader { | |
| @include responsive-font(5vw, 20px, 28px); | |
| font-weight: 600; | |
| line-height: 1.8; | |
| border-bottom: thin solid #be1e2e; | |
| } | |
| } | |
| .notes-section { | |
| @include responsive-font(5vw, 20px, 30px); | |
| display: block; | |
| } | |
| .notes-header { | |
| @include responsive-font(5vw, 20px, 30px); | |
| } | |
| .notes { | |
| font-weight: 600; | |
| padding: 0.275em 0; | |
| display: block; | |
| @include responsive-font(5vw, 14px, 16px); | |
| } | |
| .asset-updates { | |
| font-weight: 400; | |
| } | |
| .notes-section { | |
| padding-top: 1em; | |
| @include responsive-font(5vw, 16px, 20px); | |
| } | |
| .list-item-lead { | |
| font-weight: 700; | |
| &:after { | |
| content: ": "; | |
| } | |
| } | |
| .list-item--heading { | |
| @include responsive-font(2vw, 20px, 28px); | |
| text-decoration: underline; | |
| padding-bottom: 0.5em; | |
| } | |
| .section-info { | |
| h1,h2 { | |
| line-height: 1; | |
| margin: 0.275em 0; | |
| } | |
| } | |
| .example-banner { | |
| margin-top: 3em; | |
| margin-left: 0.75em; | |
| } | |
| ul { | |
| .example-banner { | |
| @extend .example-banner; | |
| margin-left: 0; | |
| } | |
| } | |
| .pt-10 { | |
| padding-top: 0.75em; | |
| } | |
| img { | |
| max-width: 100%; | |
| } | |
| .subheader { | |
| @include responsive-font(5vw, 14px, 20px); | |
| } | |
| .primary-header { | |
| color: #be1e2e; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment