Clone CSS styling for Google Docs

Question

I am making a Google Apps Script for Google Docs with a side panel.

I would like to match the style of buttons, scroll bars, etc. that Google Docs has.

enter image description here

FYI, a lot of the CSS seems to have be minified/obfuscated.

scb-button-icon
jfk-star

Where might I find such a thing?

I would have thought Google Apps Script might have provided something like this, since consistency makes the UX better.

If the official source is not available, is an unofficial one available?

Mogsdad · Accepted Answer · 2014-08-18 10:56:28Z

7

+50

EDIT: Sidebar CSS is now freely available, see CSS Package for Add-ons.

For research only, of course:

View Source of the page you wish to research. Copy and...
Paste into a text editor. Remove everything up to and including the <style> tag, and from the </style> tag to the end. Copy and...
Paste into an HTML decoder, to remove the encoding. Now you have all the CSS, it's just badly formatted. Copy and...
Paste into a CSS Formatter, and tidy it up. Optionally, output as a file.

At this point, you've got a CSS file that can be experimentally built into your for-personal-use-only app. Browser inspectors are handy for determining the HTML others have used to produce the UI elements you want to learn from.

Here's my own little experiment, a sidebar in a Google Doc, with an assortment of elements:

Screenshot

edited Aug 18, 2014 at 10:56

answered Dec 4, 2013 at 1:51

Mogsdad

46k21 gold badges166 silver badges289 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Paul Draper Over a year ago

I had actually just got finished doing this. FYI, I kept only the parts of the CSS that I wanted.

Paul Draper Over a year ago

Thank you for your answer. Enjoy the bounty.

Mogsdad Over a year ago

Thanks - that's the first one I've tried for! Funny thing - I had been through this exercise the first day that sidebar support was added to Docs, and hadn't done much else with it. Cheers!

randak · Accepted Answer · 2013-11-26 02:00:36Z

1

Not sure if you'll be able to find the source code, so here is an alternative:

CSS Unminify

This tool will take minified CSS and expand it. This will allow you to at the very least read the CSS and hopefully figure out which rules you need.

answered Nov 26, 2013 at 2:00

randak

2,0011 gold badge13 silver badges23 bronze badges

Comments

medina · Accepted Answer · 2013-12-03 16:16:53Z

0

If copyright infringement is not an issue then you could simply recreate the design that Google adopt for their buttons. It should be fairly simple with CSS. The font Google + uses is called Roboto and is free to download

answered Dec 3, 2013 at 16:16

medina

7761 gold badge11 silver badges31 bronze badges

Comments

Paul Draper · Accepted Answer · 2013-12-07 02:02:10Z

0

I talked to some of the guys at Google and got a alpha version of the CSS.

It does not yet, however, completely support IE or Firefox, and has (very minor) differences, so I accepted Mogsdad's answer.

answered Dec 7, 2013 at 2:02

Paul Draper

84.2k53 gold badges216 silver badges303 bronze badges

Collectives™ on Stack Overflow

Clone CSS styling for Google Docs

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related