DOCSLIB.ORG

Or: “How We Built Websites of Indeterminate Design for Adobe Portfolio”

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Or: “How We Built Websites of Indeterminate Design for Adobe Portfolio” Schrödinger's Website or: “How we built websites of indeterminate design for Adobe Portfolio” a talk by Jackie Balzer (@jackiebackwards) htps://en.wikipedia.org/wiki/File:Schrodinger_cat_in_box.jpg Web Development Life Cycle Adobe Portfolio Challenges • Customizations viewed in the editor must be 100% representative of the final product (WYSIWYG) • Every Thing* must be user-customizable * minus the specifics of the responsive layout • Responsive styles must look good for infinite- possible customizations Tenets • DRY • Reusable • Human writen • Responsive layout should retain the spirit of the user’s customizations WYSIWYG Challenges: Markup • The markup you see for your site inside the editor should be the same markup you see on your final published website WYSIWYG Challenges: CSS • The styles you see for your site inside the editor should be the result of the same CSS you see on your final published website 1 "header": { 2 "align": "center", 3 "color": "#222", 4 "font": { 5 "family": "ftnk", 6 "size": 30, 7 "lineHeight": 30 8 }, 9 "fontStyle": { 10 "bold": "700", 11 "italic": "normal", 12 "underline": null, 13 "strikethrough": null, 14 "uppercase": "uppercase" 15 }, 16 "padding": { 17 "bottom": 0, 18 "left": 0, 19 "right": 0, 20 "top": 0 21 } 22 } 1 $header: ( 2 align: center, 3 color: #222, 4 font: ( 5 family: ftnk, 6 size: 30, 7 lineHeight: 30 8 ), 9 fontStyle: ( 10 bold: 700, 11 italic: normal, 12 underline: null, 13 strikethrough: null, 14 uppercase: uppercase 15 ), 16 padding: ( 17 bottom: 0, 18 left: 0, 19 right: 0, 20 top: 0 21 ) 22 ); 1 .header { 2 text-align: map-get($header, align); 3 color: map-get($header, color); 4 font-family: map-get($header, font…?); // does not traverse 5 } 1 @function map-me($map, $keys) { 2 3 @each $key in $keys { 4 5 @if map-has-key($map, $key) { 6 $map: map-get($map, $key); 7 } 8 @else { 9 @error 'key "#{$key}" is missing from map'; 10 } 11 12 } // each key in keys 13 14 @return $map; 15 16 } // @function map-me 1 .header { 2 color: map-me($header, color); 3 font-family: map-me($header, font family); 4 font-size: map-me($header, font size); 5 font-style: map-me($header, fontStyle italic); 6 font-weight: map-me($header, fontStyle bold); 7 text-align: map-me($header, align); 8 text-decoration: map-me($header, fontStyle underline) map-me($header, fontStyle strikethrough); 9 line-height: map-me($header, font lineHeight); 10 text-transform: map-me($header, fontStyle uppercase); 11 padding-top: map-me($header, padding top); 12 padding-bottom: map-me($header, padding bottom); 13 padding-left: map-me($header, padding left); 14 padding-right: map-me($header, padding right); 15 } 1 .header { 2 color: #222; 3 font-family: ftnk; 4 font-size: 30px; 5 font-style: normal; 6 font-weight: bold; 7 text-align: center; 8 text-decoration: underline; 9 line-height: 30px; 10 text-transform: uppercase; 11 padding-top: 0; 12 padding-bottom: 0; 13 padding-left: 0; 14 padding-right: 0; 15 } 1 .grid-item:nth-child(var(--number-columns)n+1) { 2 clear: left; 3 } 1 .grid-item:nth-child(#{map-me($grid, per-row)}n+1) { 2 clear: left; 3 } 1 .top-arrow { 2 background: rgba(map-me($arrow, color), map-me($arrow, opacity)); 3 } Responsive Development • Many responsive adjustments can be phrased in the form of “if… then” • Easily modeled using control logic in Sass Responsive Challenges: Layout • Responsive navigation behind a menu 1 // Template default variables 2 $small-breakpoint: 0 540px !global; 3 $medium-breakpoint: 0 768px !global; 1 @include breakpoint($medium-breakpoint) { 2 3 nav { 4 display: none; 5 } 6 7 .hamburger { 8 display: block; 9 } 10 11 } 1 @mixin responsive-nav { 2 3 nav { 4 display: none; 5 } 6 7 .hamburger { 8 display: block; 9 } 10 11 } 1 $theme-features: ( 2 top-header: true, 3 cover-meta-overlay: true, 4 small-responsive-nav-menu: true 5 ); 1 $menu-breakpoint: $medium-breakpoint; 2 @if map-get($theme-features, small-responsive-nav-menu) == true { 3 $menu-breakpoint: $small-breakpoint; 4 } 5 6 @include breakpoint($menu-breakpoint) { 7 @include repsonsive-nav; 8 } Responsive Challenges: Layout • Responsive navigation behind a menu • Number of columns for grid layouts 1 @include breakpoint($medium-breakpoint) { 2 3 @if map-me($gallery, columns) > 3 { 4 5 // css for two-column layout 6 7 } 8 9 } // $medium-breakpoint 10 11 @include breakpoint($small-breakpoint) { 12 13 @if map-me($gallery, columns) > 1 { 14 15 // css for 1-column layout 16 17 } 18 19 } // $small-breakpoint Responsive Challenges: Layout • Responsive navigation behind a menu • Number of columns for grid layouts • Smaller images should load on smaller screens 1 <picture> 2 <source srcset="{{images.full}}" media="{{breakpoints.full}}"> 3 <source srcset="{{images.medium}}" media="{{breakpoints.medium}}"> 4 <source srcset="{{images.small}}" media="{{breakpoints.small}}"> 5 <img src="{{images.medium}}"> 6 </picture> 1 { 2 "images": { 3 "full": "//path/to/fullsize", 4 "medium": "//path/to/medium-size", 5 "small": "//path/to/small-size" 6 }, 7 "breakpoints": { 8 "full": "min-width: 769px", 9 "medium": "max-width: 768px", 10 "small": "max-width: 540px" 11 } 12 } Responsive Challenges: Vertical Rhythm • Spacing scales down on smaller devices • Font sizes scale accordingly on smaller devices • Blocks of information ofen rely on relative font sizes (lock up) Establish rules • Widths, horizontal margins should always be measured in % • Font sizes should never go below 14 px • Bigger numbers should decrease more drastically than smaller numbers Project Date 2016 font-size: 18px line-height: 18px Project Title font-size: 60px Project Title line-height: 64px Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed Project Description diam nonummy nibh euismod tincidunt ut laoreet dolore magna font-size: 22px aliquam erat volutpat. Ut wisi enim ad minim veniam, quis line-height: 28px nostrud exerci tati... Custom Field Additional Fields font-size: 14px Creative Direction, UX Design, Web Design line-height: 18px 2016 Project Title Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tati... Custom Field Creative Direction, UX Design, Web Design 2016 Project Title Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tati... Custom Field Creative Direction, UX Design, Web Design 1 @function within-range($item, $min, $max) { 2 $floor: 10; 3 $ceil: 100; 4 @return round(((($max - $min)*($item - $floor))/($ceil - $floor))+$min); 5 } 1 @include breakpoint($medium-breakpoint) { 2 3 .project-title { 4 font-size: within-range(map-me($logo, font-size), 14px, 60px); 5 } 6 7 } 8 9 @include breakpoint($small-breakpoint) { 10 11 .project-title { 12 font-size: within-range(map-me($logo, font-size), 14px, 45px); 13 } 14 15 } THE FUTURE • Optimize scaling formula • Optimize output to reduce duplicate values • Intelligent breakpoint detection • One CSS generator to rule them all Bread Ned Thanks! Twiter: @jackiebackwards Email: [email protected] Adobe Portfolio: myportfolio.com.
Load more

Recommended publications
  • Underline-Text-In-Illustrator.Pdf
    Underline Text In Illustrator Insolent and unvaried Millicent exhilarate some jumpiness so accidentally! Wriggly Ximenez vitalizes that trampler revictual anywhere and inhumes pruriently. Antinomical Reginauld form some fallers and raced his pessary so filthily! Illustrator team has copyright, in illustrator places in order of underline text in illustrator before you sure you would be done so? Illustrator for several hours. Illustrator problem, is can trust very frustrating, but. You may be exported or illustrator text underline in illustrator go way you know what if i learned the interpreted reading order to underline? Actually many text and eye on the left, in text i have to clipboard, i created an incredibly super cool way. Download 70 fancy themselves free vectors Choose from like a. Illustrator go the word may use rgb color change is underline in. Vector text in your designing and distortion percentages within this. You want better designed and text underline in illustrator to watch. For illustrator text. How these underline depth in CSS javatpoint. You italicize in the roman etc. Ungroup the text elements further using the same board so that each lot block distance be selected separately. Dhe kjo, nëse rezulton e vërtetë, është një fitore e prerë për këdo që kërkon të kthejë një predispozitë të caktuar të bazuar në ankth. We improve auto, text underline in illustrator will be an ad blocker turned on. People think and do not together layouts with Photoshop or Illustrator put. To edit fields in text illustrator underline pack as complex concepts and illustrator.
    [Show full text]
  • Brand Guidelines Released 12.08.20 Contents
    Brand Guidelines Released 12.08.20 Contents 01 Mark ���������������������������������������������������������������������������2 02 Clear Space ���������������������������������������������������������������� 4 03 Usage Cases ����������������������������������������������������������������5 04 Color Palette �������������������������������������������������������������� 6 05 Typography �����������������������������������������������������������������7 01 Mark PRIMARY LOGO MARK The following is the primary full-colour logo and icon. The following is the Anuket Icon. LOGOTYPE PRIMARY ICON Anuket • BRAND GUIDELINES 2 01 Mark Cont. BLACK The black version of the Anuket logo should be used when only one color is available for printing. The white or knockout version should WHITE be used over black and colored backgrounds or low-contrast images. KNOCKOUT Anuket • BRAND GUIDELINES 3 02 Clear Space Clear space is the X X minimum “breathing room” maintained around the Logo. To work out the clearspace take the height of the “A”, and divide it in half. (Clearspace = “A” Height /2) This area should be kept free of graphics, text and other marks. This space also defines the minimum distance from the mark to the edge of a border, page, screen, etc. X X Anuket • BRAND GUIDELINES 4 03 USAGE CASES The integrity of SCALE Do not play with the scale and ORIENTATION Do not change the PROPORTIONS Do not change the the Anuket logo perspective, or alter the proportions orientation of the mark by rotating it proportions of the logotype and mark. must be respected of the mark. in any way. at all times. Do not alter, recreate OR distort the mark in any way. Please use approved electronic art when reproducing the COLOR Do not reverse, change, or add EFFECTS Do not add any effects such as a MARK Do not change the layout Anuket logo.
    [Show full text]
  • Lorem Ipsum Sample Text
    Lorem Ipsum Sample Text Baily often culminating unequally when wakeless Lemuel misguides instantly and invalidating her uracil. Embedded Emmet electrolyzing: he fluorspar his nautilus adjunctively and devilishly. Dexterous and lighted Benny never bedrench his track! Why designers should detect use fake text PopArt Studio. When creating page layouts a select text also viable as Lorem ipsum or lipsum to typesetting professionals is often used as a placeholder. Lyn Wildwood is a freelance blogger and avid WordPress user She loves sharing new tips and tricks with the WordPress community Next 25 Examples of Unique. In publishing and graphic design Lorem ipsum is a placeholder text commonly used to demonstrate the visual form out a document or a typeface without relying on meaningful content Lorem ipsum may be used as a placeholder before final copy is available. Here is a circumstance of Lorem ipsum generators 1 Blind text generator lets choosing one went the enlisted sample texts and managing its parameters. Dummy Text Digital Maestro. Utility function to add placeholder in this program is tring to do. Lorem Ipsum text alternatives to default pseudo-L Adobe. Easy to be generated so, per paragraph size and get the sample text by yourself to set it looks realistic impression of the language. How to Easily add Dummy subject in Microsoft Word Make. Lorem Ipsum sample and text Lesitedugnie. Take you just think these cases, and whether or desires to view of placeholder text from cicero have jokes and why. Lorem rhoncus eget egestas augue, adipiscing nec mollis, lorem ipsum sample text is misspelt though.
    [Show full text]
  • Lorem Ipsum. Details of a Place Holder Text
    introduction......................................................................3 layouts..........................................................................4-5 evolution of design.........................................................6-7 field trips .....................................................................8-13 chair building process .................................................14-15 advertisement poster..................................................16-17 math behind the chair.................................................18-19 lamp building process .................................................20-21 contents. roadblocks .................................................................22-23 get bent. fall 2010 Creativity, craftsmanship, originality, and mental strength were just some of the skills students needed to complete the Get Bent project during the fall semester of 2010. Teachers Jeff Robin and Andrew Gloag as- signed 12th grade sudents the task of creat- ing their own chair, lamp, and illustrated book documenting the process. Students picked teams of two or three peo- ple and got to work. Groups used a variety of different materials to create either a bent wood or metal chair and lamp. The steps our group took to complete our project are shown in the following pages. lorem ipsum. details of a place holder text In publishing and graphic design, Lorem ipsum is the name given to commonly used placeholder text (filler text) to demonstrate the graphic elements of a document or visual presentation,
    [Show full text]
  • Brand Style Guide Introduction
    BRAND STYLE GUIDE INTRODUCTION HOW TO USE THIS GUIDE These brand guidelines serve as an internal resource for our leadership, staff, and content creators. By adhering to these principles to create a consistent and clear brand experience for anyone who engages with CREW Network and your chapter, we will be more effective and memorable in all of our communications. While the external messaging in this guide is focused on CREW Network’s mission, vision and initiatives, your chapter may use the copy when appropriate and where it fits your needs. Design Questions? Contact Nancy Percich, Graphic Designer, at [email protected] or (785) 856-8266. Messaging Questions? Contact Laura Lewis, Chief Marketing Officer, at [email protected] or (785) 856-8275. CREW GREATER PHILADELPHIA BRAND GUIDELINES P. 2 Scholarship Endowment Founders BRAND STRATEGY 01 CREW GREATER PHILADELPHIA BRAND GUIDELINES P. 3 MISSION OUR PURPOSE FOR EXISTING AND GUIDE FOR OUR ORGANIZATION THIS IS AN EXTERNAL STATEMENT CREW Network exists to transform the commercial real estate industry by advancing women globally. CREW GREATER PHILADELPHIA BRAND GUIDELINES P. 4 VISION OUR HOPE FOR THE FUTURE WE WILL CREATE THIS IS AN EXTERNAL STATEMENT We will transform the global commercial real estate industry to be diverse, inclusive and equitable for all, where women have equal access to opportunities, and equal compensation, power, and influence. CREW GREATER PHILADELPHIA BRAND GUIDELINES P. 5 NARRATIVE WHO WE ARE CREW Network is a thriving global business organization with members representing every discipline in the commercial real estate industry. Our network provides the connections, resources, and opportunities for women in commercial real estate to become more successful in their careers, seizing business opportunities and career growth.
    [Show full text]
  • Sphinx RTD Theme Demo Documentation Release 0.4.3
    Sphinx RTD theme demo Documentation Release 0.4.3 Dave Snider, Read the Docs, Inc. contributors Mar 06, 2019 Documentation 1 Via Python Package 1 2 Via Git or Download 3 3 ORDER 5 3.1 (ORDER)................................................5 3.1.1 Giant Tables...........................................8 4 Kenguru 9 4.1......................................................9 5 h1 Heading 8-) 11 5.1 h2 Heading................................................ 11 5.1.1 h3 Heading........................................... 11 5.1.1.1 h4 Heading....................................... 11 5.2 Horizontal Rules............................................. 11 5.3 Typographic replacements........................................ 11 5.4 Emphasis................................................. 12 5.5 Blockquotes............................................... 12 5.6 Lists................................................... 12 5.7 Code................................................... 13 5.8 Tables................................................... 13 5.9 Links................................................... 13 5.10 Images.................................................. 15 5.11 Plugins.................................................. 16 5.11.1 Emojies............................................. 16 5.11.2 Subscript / Superscript..................................... 17 5.11.3 <ins>.............................................. 17 5.11.4 <mark>............................................. 17 5.11.5 Footnotes...........................................
    [Show full text]
  • Customizations Buying Guide
    CUSTOMIZATIONS GUIDE CHOOSE YOUR QUANTITY When figuring out your final printing quantity, make sure to take into account any suites you might need for last minute guests, and any you want as keepsakes. Additional suites cannot be added onto your order once it is in production. CHOOSE YOUR PRINT METHOD Your suite can be printed in one of three different methods. See the Wedding Guide for detailed descriptions of each method. Digital | Letterpress | Foil CHOOSE YOUR PAPER Your suite can be printed in one of three different paper types/weights: Crane’s Lettra Crane’s Lettra Arpa 110# 220# Handmade CHOOSE YOUR PAPER COLOR Your suite can be printed in one of three different paper colors: Flo. Pearl Ecru Ivory White White (Arpa) CHOOSE YOUR INK COLOR Black Dove Gray Navy Rain Olive Fern Bellini Dusty Rose Poppy Lavender Gold Bronze (metallic (metallic foil) foil) CHOOSE YOUR ENVELOPE COLOR A7 outer envelope: return address printed on back flap 4bar reply card envelope: sending address printed on front Fluorescent Pearl Ecru Cool Pale Pink/ Peach Dusty Smoke Black White White Gray Nude Rose Gray CHOOSE YOUR TYPED FONT STYLE SERIF: LOREM IPSUM DOLOR SANS SERIF #1: LOREM IPSUM DOLOR lorem ipsum dolor sit amet lorem ipsum dolor sit amet SLAB SERIF: LOREM IPSUM DOLOR SANS SERIF #2: LOREM IPSUM DOLOR lorem ipsum dolor sit amet lorem ipsum dolor sit amet TIMELINE Make sure to leave enough time for design and production of your semi-custom stationery. Brown Fox Calligraphy follows the timeline below: Order Collection stationery 3 months before sending out Receive digital proof of design 7-10 business days after order Allow 3 weeks for printing (+2 weeks for envelope addressing).
    [Show full text]
  • Pdfkit Guide by Devon Govett Version 0.8.0 Getting Started with Pdfkit
    PDFKit Guide By Devon Govett Version 0.8.0 Getting Started with PDFKit Installation Installation uses the npm package manager. Just type the following command after installing npm. npm install pdfkit Creating a document Creating a PDFKit document is quite simple. Just require the pdfkit module in your CoffeeScript or JavaScript source file and create an instance of the PDFDocument class. PDFDocument = require 'pdfkit' doc = new PDFDocument PDFDocument instances are readable Node streams. They don't get saved anywhere automatically, but you can call the pipe method to send the output of the PDF document to another writable Node stream as it is being written. When you're done with your document, call the end method to finalize it. Here is an example showing how to pipe to a file or an HTTP response. doc.pipe fs.createWriteStream('/path/to/file.pdf') # write to PDF doc.pipe res # HTTP response # add stuff to PDF here using methods described below... # finalize the PDF and end the stream doc.end() The write and output methods found in PDFKit before version 0.5 are now deprecated. Using PDFKit in the browser As of version 0.6, PDFKit can be used in the browser as well as in Node! There are two ways to use PDFKit in the browser. The first is to use Browserify, which is a Node module packager for the browser with the familiar require syntax. The second is to use a prebuilt version of PDFKit, which you can download from Github. Using PDFKit in the browser is exactly the same as using it in Node, except you'll want to pipe the output to a destination supported in the browser, such as a Blob.
    [Show full text]
  • Lorem Ipsum - Google Search 4/25/08 4:11 PM
    lorem ipsum - Google Search 4/25/08 4:11 PM Web Images Maps News Shopping Gmail more ▼ [email protected] | My Account | Sign out Google Advanced Search lorem ipsum Search Preferences Web Results 1 - 10 of about 4,080,000 for lorem ipsum. (0.08 seconds) Lorem Ipsum - All the facts - Lipsum generator Reference site about Lorem Ipsum, giving information on its origins, as well as a random Lipsum generator. www.lipsum.com/ - 17k - Cached - Similar pages Lorem Ipsum - All the facts - Lipsum generator Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse purus. Quisque in turpis. Mauris molestie ipsum vitae sapien. Morbi nulla. ... www.lipsum.com/feed/html - 10k - Cached - Similar pages More results from www.lipsum.com » Lorem ipsum - Wikipedia, the free encyclopedia In publishing and graphic design, lorem ipsum is common placeholder text used to demonstrate the graphic elements of a document or visual presentation, ... en.wikipedia.org/wiki/Lorem_ipsum - 45k - Cached - Similar pages Lorem Ipsum: multilingual text-generator for typography Multilingual text-generator for Lorem Ipsum typographical filler text in many charsets. www.lorem-ipsum.info/generator3 - 25k - Cached - Similar pages Lorem Ipsum - comprehensive info and text-generator Extensive info on usage and history of Lorem Ipsum. www.lorem-ipsum.info/ - 17k - Cached - Similar pages Lorem Ipsum Dolor Sit Amet Dummy Text or Dummy Copy aka Sample ... Lorem ipsum dolor sit amet who? Lorem Ipsum Dolor Sit Amet Copyfitting Text. Download or copy/paste this well-known classic dummy text for your Web site ... websitetips.com/articles/copy/lorem/ - Similar pages Lorem Ipsum Generator Lorem Ipsum is also known as: Greeked text, blind text, placeholder text, dummy content, filler text, lipsum, and mock-content.
    [Show full text]
  • Paste from Word
    Paste from MS Word into LiveText What Works: Paragraph Breaks Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet mi sit amet lectus mattis tristique in eget tellus. Nullam lectus odio, consequat eu pellentesque et, scelerisque id eros. Nunc consequat magna et sapien tempus rutrum hendrerit quam lacinia. Integer eget ipsum eget mauris elementum pretium. Integer eu accumsan lacus. Sed porta lorem eget nisi pretium ultricies. Nullam fermentum arcu nibh, in viverra quam. Font Style Superscript (Bold, Italic, Underline, Strikethrough, , and Subscript) Hyperlinks www.livetext.com (absolute links only, no anchors. Relative links may work) Headings (formatting changes will be lost, but headings remain) Heading 1 Heading 2 Heading 3 Alignment Left Align Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse egestas lobortis vehicula. Aenean tincidunt rhoncus sem. Phasellus et felis ipsum, id aliquam ante. In mi sapien, tincidunt at mollis eget, condimentum nec nulla. Right Align Maecenas vulputate arcu sed diam tincidunt tempus. Vestibulum viverra leo id mauris dapibus in auctor nunc cursus. Quisque quis dolor leo, sit amet fringilla elit. Fusce porta mollis molestie. Morbi lacus massa, viverra in pharetra at, tristique in tellus. Donec iaculis, sem a posuere tempus, lacus mi ornare orci, faucibus blandit nunc quam et dolor. Cras accumsan, augue ut rhoncus pharetra, lorem est ullamcorper orci, eu tempor sem velit at urna Center Nunc id mauris dui. Morbi non viverra ante. Curabitur aliquet lorem ut lectus ullamcorper pulvinar. Praesent urna orci, suscipit in commodo et, ullamcorper sed erat. Quisque a diam a sem dignissim posuere. In fermentum malesuada sem at malesuada.
    [Show full text]
  • Main Heading Sub Heading
    Edith Cowan University Faculty, School or Service Centre name here Main Heading Sub heading This is filler text only. It is simply dummy To add image: text of the printing and typesetting • Create image of size 4-5cm height industry. Lorem Ipsum has been the and 19.5cm width. Save as jpg file. industry's standard dummy text ever since • Insert image the 1500s, when an unknown printer took • Right click image > format image a galley of type and scrambled it to make a • Set layout to ‘In front of text’ and type specimen book. click on Advanced • Horizontal position set to Absolute It has survived not only five centuries, but position of 0.75cm to the right of also the leap into electronic typesetting, Page remaining essentially unchanged. It was • Vertical position set to absolute popularised in the 1960s with the release position of 7.98cm below Page of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop This is more filler text only. Remaining publishing software like Aldus PageMaker essentially unchanged. It was popularised including versions of Lorem Ipsum. in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, Lorem Ipsum is simply dummy text of the and more recently with desktop publishing printing and typesetting industry. Lorem software like Aldus PageMaker including Ipsum has been the industry's standard versions of Lorem Ipsum dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.
    [Show full text]
  • 2020 BRANDING GUIDELINES Flannery, Inc // 2020 Branding Guidelines Branding // Inc 2020 Flannery
    2020 BRANDING GUIDELINES Flannery, 2020 Inc // Branding Guidelines TABLE OF CONTENTS Logo . 04 Colors . 08 Typography . 12 02 Flannery, 2020 Inc // Branding Guidelines THE LOGO To ensure brand recognition, the logo must be used consistently and effectively in print & digital formats . The logo should always be given ample breathing room, with its height creating the dimensions for the exclusion zone . THE LOGO LOGO DONT’S Never alter or skew the shape, configuration, or proportions of the logo . Don’t over embellish the logo with drop shadows or 3D effects . 04 Flannery, 2020 Inc // Branding Guidelines BRANDING COLORS The Flannery, Inc logo is primarily used in its original green and BRAND black format . However, you may display the logo in a single color using any color speci ied in the branding style guide as shown to the right. It may also be used in all-white when used over dark COLORS colors . Pantone Black 6 C Pantone 555 C C: 60 M: 40 Y: 40 K: 0 C: 86 M: 31 Y: 81 K: 18 R: 0 G: 0 B: 0 R: 25 G: 117 B: 79 08 #000000 #19754f Flannery, 2020 Inc // Branding Guidelines TYPEFACE Helvetica is the typeface used for all of the Flannery, Inc branded material . Headers should be Helvetica Bold . Body copy should be either Helvetica Regular or Light . Different weights from this family can be used as necessary . Use Arial as a web safe alternative if Helvetica is unavailable . LIGHT LIGHT OBLIQUE HELVETICA ABCDEFGHIJKLMNOPQRSTUVWXYZ REGULAR abcdefghijklmnopqrstuvwxyz OBLIQUE TYPOGRAPHY 1234567890!@#$%^&*() LOREM IPSUM DOLOR BOLD Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua .
    [Show full text]