search

drud / style.ddev.com

Apache License 2.0
0 stars 2 forks source link

Create CSS package for "Powered by DDEV" badges #11

Closed ekl1773 closed 4 years ago

ekl1773 commented 4 years ago

Feature Description:

We would like to offer a badge template so that DDEV-Live users can display that their site is running on DDEV. This should be accomplished using CSS, text, and a link. We would then deliver to them (ideally via the style guide), the appropriate code, instructions, and optional logos (out of scope for this task).

Example implementation from https://drupalcamp.london/ :

<section class="hosting">
    <div class="container">
        <div class="row">
            <p>Hosting provided by</p>
            <p class="drud-tech">
                <a href="https://platform.sh">platform.sh</a>
            </p>
        </div>
    </div>
</section>

Ours might look like:

<p>Powered by</p>
<p class="ddev">
  <a href="https://ddev.com">DDEV</a>
</p>

User stories:

As a marketing professional at DDEV, I'd like to make it easy for our customers to add a DDEV-Live badge template to their DDEV site so that I can increase awareness of our hosting products.

Acceptance criteria:

Related links or issues:

Definition of Ready Checklist:

RProduct Owner AScrum Master CEng. Lead ITeam

Definition of Done Checklist:

REng. Lead, Team AScrum Master CIProduct Owner

dclear commented 4 years ago

This is one that @ekl1773 would like to see in next sprint, @slivermon

dclear commented 4 years ago

I added a draft user story @ekl1773 : feel free to tweak.

aManNamedJed commented 4 years ago

@ekl1773 What do you think of this? Added the Google badge just for comparison.

Badges

I wanted to point out that Google only offers PNG and SVG versions of these badges. I have seen some places do some type of Javascript file through a CDN or something, but it seems like overkill here when we could just provide these people with a "media kit" .zip file of these badges in PNG and SVG format. Happy to do the JS part but would extend this issue probably through the day.

aManNamedJed commented 4 years ago

I should note that the biggest advantage to doing a Javascript package or CDN would be that we could push updates down to all the badges potentially, but if these will never change it might be a waste of time.

aManNamedJed commented 4 years ago

I guess we want this to link out to our site though and we want to control that link 🤔

ekl1773 commented 4 years ago

@jdarrohn That looks nice. The suggestion I heard and created this task with was to just use text, rather than an image (which was my first instinct). JS definitely seems like a bit much for this, tho I appreciate the principle. I wasn't sure about logo styles/sizes, if one size fits all etc, which the text seemed to get around. These can/should change someday, but that just makes a nice touchpoint with clients, too. And yes, it should link to ddev.com, presumably most people would just copy/paste and be done with it?

aManNamedJed commented 4 years ago

If we are not doing an image, we would want to use Javascript to create the HTML elements on the page, and then inject the CSS into the DOM to style. Otherwise people would be able to edit the CSS (i.e. change the blue to match their branding, which we don't want) or change the link to go to a different page for some reason. Just my two cents.

aManNamedJed commented 4 years ago

To me the quickest path to water is to distribute an SVG and instruct people that it has to link to ddev.com or they have to take it down.

aManNamedJed commented 4 years ago

I was able to put together a little badge with code, but it does use SVG code in the HTML. I checked it out on Firefox and Chrome and it looks fine, but could potentially be a little weird on older browsers.

I might end up making it a little smaller.

Screen Shot 2020-09-09 at 3 53 54 PM
aManNamedJed commented 4 years ago

@ekl1773

I would like you to test this a little bit just to see if you can break it, and just to see if it works/looks as expected. Here you can download a zip:

ddev-badges.zip

  1. Unzip the package and cd ddev-badges in terminal
  2. Run php -S localhost:8888 from inside the ddev-badges directory to start a PHP server
  3. Visit localhost:8888 in your browser
ekl1773 commented 4 years ago

Thank you! That is a moderate chunk of code but not too bad. New window is good. It shrinks! if you go real small with the viewport Looks like it works as expected to me.

We'll also need some "how to add this to your site" for people of pretty basic experience (ie me), is that something you have bandwidth for? Just a "put this here, put that there, here's what it's doing" readme.

All of which will need a little section in the Style Guide repo to host it I guess?

aManNamedJed commented 4 years ago

Here is an updated package.

ddev-badges.zip

There are two ways to implement:

Use the badge SVG This has the least amount of code and is pretty easy to implement. Folks could just use the badge.svg from that zip like this:

    <a href="https://ddev.com">
        <img width="180" src="./badge.svg" alt="DDEV">
    </a>

Use the CSS, HTML, and SVG code

As an alternative, folks can drop in the code directly, which is a little bulkier, but not too bad.

    <style>
        .ddev-badge__container {
            background-color: #00325A;
            padding: 4px;
            border: 4px solid #004278;
            border-radius: 8px;
            font-family: Helvetica, Arial, sans-serif;
            color: #fff;
            display: flex;
        }

        .ddev-badge__wrapper {
            display: block;
            width: 180px;
            height: 60px;
            text-decoration: none;
        }

        .ddev-badge__powered {
            margin-top: 0;
            margin-bottom: 4px;
            font-size: 12px;
        }

        .ddev-badge__icon {
            position: relative;
            top: 8px;
        }

        .ddev-badge__right {
            padding-left: 8px;
        }
    </style>
    <a class="ddev-badge__wrapper" href="https://ddev.com" target="_blank">
        <div class="ddev-badge__container">
            <div class="ddev-badge__left">
                <div class="ddev-badge__icon">
                    <svg width="30px" height="23px" viewBox="0 0 133 101" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <g id="Badges" transform="translate(-263.000000, -595.000000)">
                                <rect id="Rectangle" x="189" y="520" width="646" height="250"></rect>
                                <rect id="Rectangle" stroke="#004278" stroke-width="6" fill="#00325A" x="233" y="564" width="558" height="162" rx="16"></rect>
                                <g id="Group-2" transform="translate(263.000000, 595.000000)" fill="#FFD600">
                                    <path d="M59.2402827,9.42274052 L102.427562,9.42274052 L125.579505,32.3906706 L125.579505,68.6093294 L102.427562,91.5772595 L63.5441696,91.5772595 C62.5053004,90.3994169 60.8727915,89.516035 59.0918728,89.516035 C55.975265,89.516035 53.3038869,92.0189504 53.3038869,95.2580175 C53.3038869,98.3498542 55.8268551,101 59.0918728,101 C60.8727915,101 62.3568905,100.263848 63.5441696,98.9387755 L105.54417,98.9387755 L133,71.7011662 L133,29.2988338 L105.54417,2.06122449 L59.2402827,2.06122449 C58.2014134,0.883381924 56.5689046,0 54.7879859,0 C51.6713781,0 49,2.50291545 49,5.74198251 C49,8.83381924 51.5229682,11.483965 54.7879859,11.483965 C56.5689046,11.483965 58.2014134,10.6005831 59.2402827,9.42274052 Z M54.7879859,3.23906706 C56.1236749,3.23906706 57.1625442,4.2696793 57.1625442,5.59475219 C57.1625442,6.91982507 56.1236749,7.95043732 54.7879859,7.95043732 C53.4522968,7.95043732 52.4134276,6.91982507 52.4134276,5.59475219 C52.4134276,4.41690962 53.4522968,3.23906706 54.7879859,3.23906706 Z M59.2402827,92.9023324 C60.5759717,92.9023324 61.614841,93.9329446 61.614841,95.2580175 C61.614841,96.5830904 60.5759717,97.6137026 59.2402827,97.6137026 C57.9045936,97.6137026 56.8657244,96.5830904 56.8657244,95.2580175 C56.8657244,93.9329446 57.9045936,92.9023324 59.2402827,92.9023324 Z" id="Shape"></path>
                                    <path d="M99.5140845,16.6169772 L44.5,16.6169772 L44.5,16.7639752 C43.4647887,15.5879917 41.9859155,15 40.3591549,15 C37.2535211,15 34.5915493,17.4989648 34.5915493,20.7329193 C34.5915493,23.8198758 37.1056338,26.4658385 40.3591549,26.4658385 C42.2816901,26.4658385 44.056338,25.5838509 45.0915493,24.1138716 L96.4084507,24.1138716 L110.753521,38.3726708 L110.753521,62.3333333 L96.4084507,76.5921325 L44.2042254,76.5921325 C43.1690141,75.4161491 41.5422535,74.5341615 39.7676056,74.5341615 C36.6619718,74.5341615 34,77.0331263 34,80.2670807 C34,83.3540373 36.5140845,86 39.7676056,86 C41.5422535,86 43.0211268,85.2650104 44.2042254,83.942029 L99.3661972,83.942029 L118,65.4202899 L118,35.1387164 L99.5140845,16.6169772 Z M40.3591549,18.3809524 C41.6901408,18.3809524 42.7253521,19.4099379 42.7253521,20.7329193 C42.7253521,22.0559006 41.6901408,23.0848861 40.3591549,23.0848861 C39.028169,23.0848861 37.9929577,22.0559006 37.9929577,20.7329193 C37.8450704,19.4099379 39.028169,18.3809524 40.3591549,18.3809524 Z M39.915493,77.7681159 C41.2464789,77.7681159 42.2816901,78.7971014 42.2816901,80.1200828 C42.2816901,81.4430642 41.2464789,82.4720497 39.915493,82.4720497 C38.584507,82.4720497 37.5492958,81.4430642 37.5492958,80.1200828 C37.4014085,78.7971014 38.584507,77.7681159 39.915493,77.7681159 Z" id="Shape"></path>
                                    <path d="M90.752149,69.3835125 L24.0530086,69.3835125 C23.0200573,70.4121864 21.6919771,71 20.0687679,71 C16.969914,71 14.3137536,68.5017921 14.3137536,65.2688172 C14.3137536,62.1827957 16.8223496,59.5376344 20.0687679,59.5376344 C21.987106,59.5376344 23.7578797,60.5663082 24.7908309,62.0358423 L43.0888252,62.0358423 L35.4154728,54.3942652 L10.1819484,54.3942652 C9.14899713,55.5698925 7.52578797,56.4516129 5.75501433,56.4516129 C2.65616046,56.4516129 0,53.953405 0,50.7204301 C0,47.6344086 2.50859599,44.9892473 5.75501433,44.9892473 C7.52578797,44.9892473 9.00143266,45.7240143 10.1819484,47.046595 L38.5143266,47.046595 L53.713467,62.0358423 L90.0143266,62.0358423 L95.474212,56.5985663 L95.474212,44.9892473 L90.0143266,39.5519713 L56.222063,39.5519713 L63.8954155,47.1935484 L78.7994269,47.1935484 C79.8323782,46.0179211 81.4555874,45.1362007 83.226361,45.1362007 C86.3252149,45.1362007 88.9813754,47.6344086 88.9813754,50.8673835 C88.9813754,53.953405 86.4727794,56.5985663 83.226361,56.5985663 C81.4555874,56.5985663 79.9799427,55.8637993 78.7994269,54.5412186 L60.7965616,54.5412186 L45.7449857,39.4050179 L25.8237822,39.4050179 C24.7908309,40.5806452 23.1676218,41.4623656 21.3968481,41.4623656 C18.2979943,41.4623656 15.6418338,38.9641577 15.6418338,35.7311828 C15.6418338,32.6451613 18.1504298,30 21.3968481,30 C23.1676218,30 24.6432665,30.734767 25.8237822,32.0573477 L93.1131805,32.0573477 L103,41.9032258 L103,59.6845878 L93.1131805,69.3835125 L90.752149,69.3835125 Z M83.226361,48.2222222 C81.8982808,48.2222222 80.8653295,49.2508961 80.8653295,50.5734767 C80.8653295,51.8960573 81.8982808,52.9247312 83.226361,52.9247312 C84.5544413,52.9247312 85.5873926,51.8960573 85.5873926,50.5734767 C85.734957,49.3978495 84.5544413,48.2222222 83.226361,48.2222222 Z M21.5444126,33.2329749 C20.2163324,33.2329749 19.1833811,34.2616487 19.1833811,35.5842294 C19.1833811,36.90681 20.2163324,37.9354839 21.5444126,37.9354839 C22.8724928,37.9354839 23.9054441,36.90681 23.9054441,35.5842294 C23.9054441,34.4086022 22.8724928,33.2329749 21.5444126,33.2329749 L21.5444126,33.2329749 Z M20.0687679,62.9175627 C18.7406877,62.9175627 17.7077364,63.9462366 17.7077364,65.2688172 C17.7077364,66.5913978 18.7406877,67.6200717 20.0687679,67.6200717 C21.3968481,67.6200717 22.4297994,66.5913978 22.4297994,65.2688172 C22.5773639,63.9462366 21.3968481,62.9175627 20.0687679,62.9175627 Z M5.9025788,48.2222222 C4.57449857,48.2222222 3.54154728,49.2508961 3.54154728,50.5734767 C3.54154728,51.8960573 4.57449857,52.9247312 5.9025788,52.9247312 C7.23065903,52.9247312 8.26361032,51.8960573 8.26361032,50.5734767 C8.26361032,49.3978495 7.23065903,48.2222222 5.9025788,48.2222222 Z" id="Shape"></path>
                                </g>
                            </g>
                        </g>
                    </svg>
                </div>
            </div>
            <div class="ddev-badge__right">
                <p class="ddev-badge__powered">
                    Powered by
                </p>
                <div class="ddev-badge__ddev-wrapper">
                    <svg width="100px" height="20px" viewBox="0 0 294 55" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <g id="Badges" transform="translate(-417.000000, -631.000000)">
                                <rect id="Rectangle" x="189" y="520" width="646" height="250"></rect>
                                <rect id="Rectangle" stroke="#004278" stroke-width="6" fill="#00325A" x="233" y="564" width="558" height="162" rx="16"></rect>
                                <g id="Group" transform="translate(417.000000, 631.000000)">
                                    <path d="M9.59550562,9.61318052 L45.4606742,9.61318052 C51.5955056,9.61318052 56.6292135,14.6561605 56.6292135,20.8022923 L56.6292135,34.0401146 C56.6292135,40.1862464 51.5955056,45.2292264 45.4606742,45.2292264 L9.59550562,45.2292264 L9.59550562,9.61318052 Z M45.6179775,0 L0,0 L0,55 L45.6179775,55 C57.1011236,55 66.5393258,45.5444126 66.5393258,34.0401146 L66.5393258,20.8022923 C66.3820225,9.29799427 57.1011236,0 45.6179775,0 Z M155.573034,22.5358166 L155.573034,54.8424069 L212.359551,54.8424069 L212.359551,45.0716332 L165.325843,45.0716332 L165.325843,32.3065903 L204.494382,32.3065903 L204.494382,22.5358166 L165.325843,22.5358166 L155.573034,22.5358166 Z M87.7752809,9.61318052 L123.640449,9.61318052 C129.775281,9.61318052 134.808989,14.6561605 134.808989,20.8022923 L134.808989,34.0401146 C134.808989,40.1862464 129.775281,45.2292264 123.640449,45.2292264 L87.7752809,45.2292264 L87.7752809,9.61318052 Z M123.640449,0 L78.0224719,0 L78.0224719,55 L123.640449,55 C135.123596,55 144.561798,45.5444126 144.561798,34.0401146 L144.561798,20.8022923 C144.561798,9.29799427 135.123596,0 123.640449,0 Z M222.741573,0 L252.786517,52.0057307 L254.359551,54.8424069 L262.224719,54.8424069 L263.955056,52.0057307 L294,0 L282.674157,0 L258.292135,42.234957 L233.910112,0 L222.741573,0 Z" id="Shape" fill="#FFFFFF"></path>
                                    <polygon id="Path" fill="#FFD600" points="164.789474 10 212 10 212 0 155 0 155 10"></polygon>
                                </g>
                            </g>
                        </g>
                    </svg>
                </div>
            </div>
        </div>
    </a>
aManNamedJed commented 4 years ago

@dclear @ekl1773 ☝️

ekl1773 commented 4 years ago

Thank you @jdarrohn!

Where can we ~put~ commit this publicly so that we can just link users to it (apart from this issue 🙂)? I would expect to find it here but not sure if we're keeping any/all of the current styleguide structure. In the interest of keeping it simple, maybe just a folder at the top of the repo if that doesn't break things?

dclear commented 4 years ago

@ekl1773 : I'd say bring that question to next business stand-up and we can make a call in there about where to promote / house this. I am going to close this issue out as completed for sprint-end.

ekl1773 commented 3 years ago

Uploaded and added some text so users can nab the zip here https://ddev.com/ddev-badges/