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.
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?
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:
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.
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
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.
Related
I am using google's audit and its tells me to remove unused CSS. I don't know if that css is for just that page or the whole site. The CSS might be there but not needed on that page but another page. Can someone tell me how this works?
It is telling you to remove unneeded CSS for that page.
However you have rightly pointed out the flaw in this suggestion as it only takes into account the current page (in it's initial state, obviously if you have a pop-out menu it won't gather the CSS for that).
Think of it more as a guideline of making sure you don't send the whole of Bootstrap just for the grid and column layouts for example.
Overall this is very difficult to fix, just use the coverage section on the performance tab in Developer tools to make sure you don't have any massively bloated CSS files and you will be fine.
Obviously reduce your unused CSS if it is easy to do so.
The only other thing that this point covers (in it's description, not as part of it's monitoring) is deferring non-essential CSS.
You should defer any Style Sheets that are not required for rendering 'above the fold' content (and inline your 'above the fold' CSS).
This point is also covered in 'Eliminate Render Blocking Resources' so I never quite get why they add the suggestion under this part as well but I have added it for completeness.
I find this rule was good at guiding me when designing a theme from the ground up as it made me seperate global CSS and page CSS more effectively.
Unless your site is scoring 98 / 100 (or you have hundreds of kilobytes of CSS) and you want to squeeze that last little bit of performance out of the site, simply minify and combine your CSS files and ignore this point.
Google's audit tool compares the entire stylesheet against the current URL and then tells you how much of it is actually not used by the browser.
The browser however still needs to download the entire file and then match all CSS selectors that apply to the current URL.
There are many ways to deal with this, but I find it the easiest to use an external API tool like Splitcss that does this for you on URL basis.
If you have only a few URL patterns in your web application, you can use some CLI tools like purgecss or uncss.
I have a massive CSS file that is applied to several pages. I'm hoping to break it down to a common CSS file and several page-level CSS files, since it is becoming difficult to work with. Unfortunately, it's not easy to tell what exactly is common. I was hoping there was a way to quickly see what lines/selectors were being used on a given page. Does anyone know of a tool that can do this? I don't want to use developer tools and go through the DOM elements one by one. I'd like to look at the CSS file and see unused selectors grayed out or something. Thanks!
You can use, at least in Chrome, the Audits tab in the developer tools. Once you run it, it says you which styles aren't used in the current page.
Testing it on this site:
And for Firefox there an add-on called CSS Usage – might be worth a look too.
After many fruitless days of trying to get JQuery Mobile and AngularJS routing to work together, I'm considering my alternative options..
Is there a way to use the JQM CSS without relying on JQuery's javascript?
Or is there a substitute CSS package that are recommended? something with all header/footers and lists that is available in JQM?
Of course, there is an CSS file in the package you downloaded. But all the sites functionality and the mobile adaption will be broken. You can rename the classes and the id's or directly use the classes from the css file.
Greets
There are quite a few jQueryMobile functionalities that rely solely on the CSS fole, eg. the grids. You won't get the interactions, but all the buttons looks, shapes and colors are totally useful without the JS.
Still - depends on your expectations.
And when using it like that you need to understand a bit how JQM works to know the classes and html structure that's expected, because some of these are generated by javascript.
[kind of digression]
But maybe you just dislike how big jquerymobile is?
Then you probably want to use: http://jquerymobile.com/download-builder/ to get only stuff you need, and also use tte themeroller here: http://jquerymobile.com/themeroller/index.php to create only one theme (global) and remove other themes (A,B,C)
That's how you get it a lot smaller.
You can reuse the CSS file inside he downloaded JQM package. The file jquery.mobile-1.x.x.css can be included, but make sure to include the images folder as well and have it at the same location at the destination.
If you aren't sure of which classes to include for which purpose, you can simply find it out by inspecting a JQM demo page to find out (View source will not work due to the JQM javascript).
JQS provides support for ui animations and user experience enhancement. Removing libraries will dispart you from accessing css contents created and used by javascript in order to 'manage' a front-end design. –
Yes you can use jquery mobile theme and adapt it to your needs.
Just reading there was adapter releases for your situation : https://groups.google.com/forum/?fromgroups#!topic/angular/oIxRxpkn3L0
Perhaps substitutes to css packages are documented. About heavier JQM templating and using, there are some introduction to what you'll need to take a look at like adobe theme-control-jquery-mobile.html ..
We're currently generating reports for our web application using html5 / css3, and they look good on screen, but obviously when the user hits print who knows what is going to come out of the printer. So, what I would like to know is what is the best way to convert these reports to PDF for download / printing while maintaining the same visual quality of the on screen reports.
Update 2010-10-26 16:01: We're using both .NET and Perl
The only think I can think of that might work is wkHTMLtoPDF. It's a QT app that sits on top of WebKit to generate its PDF.
The good news is that it even evaluates JS so just about anything goes.
The other good news is that QT is available across a wide selection of platforms. Whatever you might be using, chances are you can use QT.
Try Prince XML, the results are pretty to look at.
If you are using some of the new HTML5 elements like Canvas, then probably even the popular PDF converter wont help you.
I suggest you to put suitable print-friendly version of your CSS. This could be achieved by using media="print" attribute in the <link rel="stylesheet"... tag of a separate CSS file, which is containing the definitions for print version.
Some options (all proprietary):
Aspose.Pdf for .NET: Expensive, very good though.
Winnovative HTML to PDF Converter: I've already use their tool, gets the job done.
ExpertPDF: Another good one.
For open-source alternatives, please see here:
Open Source HTML to PDF Renderer with Full CSS Support
ExpertPdf (www.html-to-pdf.net) supports html5 / css3.
You can try the online demo here:
http://www.html-to-pdf.net/free-online-pdf-converter.aspx
There is a node module html5-to-pdf that works pretty well.
Is free and open source.
It runs on Electron. There are some bugs (for example anchor tags render the hyperlink as well) - but it might be an easy fix.
Could someone give me a link, a tutorial or an already made css template for styling code snippet to add that feature to my blog ?
I seen examples in numerous blogs, but, now that i am searching for one, i can't put hands on it !
I want to be able to post a code snippet with keyword coloration, line numbers etc..
Many thanks in advance.
EDIT : i know there are some solution like prettify (thanks Developer Art) or SyntaxHighliter but i am on a platform and i can't use Javascript
Prettify is what you're looking for.
You include a bunch of JavaScript and CSS files to your pages and mark page sections that need to be prettified. Pretty much it.
manoli.net offers an online copy/paste syntax highlighter:
This tool allows you to format your
C#, VB, HTML, XML, T-SQL or MSH (code
name Monad) code for publishing on a
web site or in a blog.
The output conforms to the HTML 4.01
specification and is color-coded to
make it easier to read. The colors can
be changed by modifying the CSS style
sheet. See a sample.
And you may want to check out the Syntax Highlighter project on CodePlex (not sure how much activity it still has, though):
Syntax highlighter converts code text
to HTML where common language elements
are formatted using style sheet
classes such that the coloring scheme
can be switched or altered as simple
as replacing a CSS file. The primary
release ships as an extension for
BlogEngine.NET.
There are server side solutions for this as well, which of course depend on your server language. PHP is the ever popular choice for blogs, in which case you could use the equally popular GeSHi library.