Modus as a UI style seems too foreign to the SketchUp overall GUI style.
I don’t see too many extensions using it. Any experiences with it in a real extension?
1 Like
You mean SketchUp for Desktop?
It’s closer to SketchUp for Web/Mobile atm. Desktop has a major rewamp coming up.
That being said, we found that the Modus style is a bit pale out of the box. For Extension Sources I had to apply some overrides to make the general appearance feature less white:
We had to do some similar treatment to our HtmlDialog example when we migrated that to modus:
We’ve seen some extensions migrating to it: (top-left: before)
Since it needs some massaging we haven’t pushed it that much yet. But overall we’re hoping to provide better resources for a consistent look and feel. But Modus is closer to where Trimble/SketchUp is going. Though it’s still a work in progress and a guide, not a rule.
2 Likes
Thanks, Thom. That looks better to me. I like the consistency across extensions look and feel and SketchUp. But I prefer simplicity of the SketchUp’s interface - Modus as of now has too much wasted space - big buttons, padding and etc. And I prefer no visual effects at all.
2 Likes
I do use Modus on my extension, you can check it on:
1- Its not 100% Modus, it has default inputboxes.
2- It doensn’t follows strictly the guidelines since Im not aware of all UI datails (yet).
But thats a real application already 
Agreed thats not compact, but many components has small class version such “class=‘btn btn-sm’” for buttons. And you could override padding if its rlly obstructing you.
I wonder if theres a way of defining a scale factor for a htmldialog while using modus, would be great I guess.
If theres too much input params I stay on inputbox,
but if I’m going to htmldialog no doubt I use Modus, its pretty and consistent.
I kinda have a plan to share/publish Modus presets here on forum, hopefully it would help devs to migrate and encourage new devs also.
But I’m not really good at Modus just yet, so would be spreading some bad practices unintentionally…
Btw, while we’re here talking about it…
Idk why its so hard to find the Modus dependencies, It took me so much time.
thanks a lot to Eneroth and Thom for posting it on:
There should be a big DOWNLOAD button on Homepage | SketchUp Developer
So we get them all (up to date) at once, also telling us the Modus version or smth.
For keeping it up to date, links can be found here: Getting Started | Trimble Modus Bootstrap Developer Guide
but its missing icons, any guide on how to get it? thanks.
1 Like
Thomas and I discussed this at length here:
1 Like
@ene_su Can you pls help me to implement those Modus icons locally/offline?
I can make it work by using the online reference:
<link rel='stylesheet' href='https://modus.trimble.com/assets/0.5.1/fonts/modus-icons.css'>
To download and use “modus-icons.css” isn’t working.
Am I skipping steps or its just not available?
Thanks 
It looks like the paths to the font files in “modus-icons.css” are relative to where the css file is opened from. So the font file(s) would also need to be downloaded (or their web urls edited to the full "https://modus.trimble.com/assets/0.5.1/fonts/" assets path.)
But for a SketchUp extension that only runs in a Chromium UI::HtmlDialog window, I do not think that you need all of them. (EDIT: The browser engine in use, would use the best choice for it from the @font-face rule’s src attribute resource list. The question is: which is best for our Chromium Embedded Framework dialogs ?)
Also some of the CSS rules in “modus-icons.css” for other browsers would not be needed for an extension.
1 Like
Thanks Dan!
So I’m aiming to download the font files so it can run all offline.
The full path is working except for SVG file:
https://modus.trimble.com/assets/0.5.1/fonts/modus-icons.svg?50783e4f41ce4a8b1c9426e5c9375829#modus-icons
I’m not sure how to download it yet.
Agreed I dont need all that stuff, but I think they ship it alltogether so…
I wont be digging inside files on what I rlly use or not since its lightweight.
I probly would break something anyways 
and I’m trying to understand those Chromium concepts, new thing to me.
Thanks for the full link idea.
I think I got all the files, but still no idea how to link them properly on css.
Never edited a css file in my life :l
also those are the first lines of SVG file:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
Dont those links means another online reference? would it work as is offline? (noob question)
You likely got it by now. But for any other readers, pasting the URL into a Chrome browser does not usually display anything. But right-clicking the document area and choosing “View page source” will render the document in plain text.
Then it’s just select all, copy and paste into a code editor and save locally.
Those are just the specification URLs for the document type identifiers which the rendering agent would use to know how to render the resource, in this case SVG elements.
It’s is not likely that CEF would need to look up these DTDs. All it really would need to recognize is the version of SVG used, ie here it is 1.1 as opposed to 2.0 or higher. There are changes with the 2.0 specification. Look up SVG on Wikipedia if you wish more info.
If the icons files are in the same local folder as the CSS file, then you would not likely need to edit them as the URLs point out onto the web, which you do not want.
Another consideration is that Chris has informed us that the recent releases of the Chrome Embedded Framework are enforcing stricter cross origin security. My reading into the specifications this morning indicates that web served font files may be subject to CO restrictions and might require the resource server to have certain settings.
So copying the resources locally with your extension is probably safer going forward.
3 Likes
True, forgot that. Thx.
To be even more specific, theres currently 5 icon files to download listed in “modus-icons.css”:
- .eot - link
- .woff2 - link
- .woff - link
- .ttf - link
- .svg - link
(svg) - To render file: Open link > right-click > “View page source”
(svg) - To download: Open link > right-click > “save as”
Good, -1 problem to solve hehe. Thx
Gonna do some tests, I return the results.
Yeah, I though it wouldnt impact me (cookies & CORS). ok, good to know.
Great news! thx
I’ll post details as soon as I manage to get it working locally. Thanks once again
And yey!!! Modus icons is finally working locally.
BASIC HOW TO:
My file structure:
Tax_Engineering/Dependencies/modus.css
Tax_Engineering/Dependencies/modus-icons.css
Tax_Engineering/Dependencies/jquery.js
Tax_Engineering/Dependencies/bootstrap.bundle.min.js
Tax_Engineering/Dependencies/modus-layout.css
Tax_Engineering/Dependencies/modus-layout.js
Tax_Engineering/Dependencies/Modus_Icons/modus-icons.eot
Tax_Engineering/Dependencies/Modus_Icons/modus-icons.svg
Tax_Engineering/Dependencies/Modus_Icons/modus-icons.ttf
Tax_Engineering/Dependencies/Modus_Icons/modus-icons.woff
Tax_Engineering/Dependencies/Modus_Icons/modus-icons.woff2
Link the Modus base files on html:
<link href='Tax_Engineering/Dependencies/modus.css' rel='stylesheet'>
<link href='Tax_Engineering/Dependencies/modus-icons.css' rel='stylesheet'>
<script src='Tax_Engineering/Dependencies/jquery.js'></script>
<script src='Tax_Engineering/Dependencies/bootstrap.bundle.min.js'></script>
<link rel='stylesheet' href='Tax_Engineering/Dependencies/modus-layout.css'>
<script src='Tax_Engineering/Dependencies/modus-layout.js'></script>
Edit “modus-icons.css” links:
src: url("Modus_Icons/modus-icons.eot") format("embedded-opentype"),
url("Modus_Icons/modus-icons.woff2") format("woff2"),
url("Modus_Icons/modus-icons.woff") format("woff"),
url("Modus_Icons/modus-icons.ttf") format("truetype"),
url("Modus_Icons/modus-icons.svg") format("svg");
Thanks Dan, u saved the day again 
3 Likes
Congrats!
2 Likes
Yea, that’s another issue, apart from the whiteness of the current bootstrap framework; padding and sizing is leaning more toward web-app. So also there we found it desirable to tweak.
Good point. We’ve also talked about providing a custom Modus package - refined for SketchUp usage.
Which icons?
This has been solved, see the above discussion.
The icons are shown here …
https://modus-bootstrap.trimble.com/foundations/icons/#icons
Doing a little testing, perhaps they should be available via …
modus_path = Sketchup.find_support_file("Modus","Support")
The “package” can be either in the binary path or the Program Data path and the method will still find it.
There could be versioned subfolders beneath the “Modus” folder. (I think y’all are using v1.0.0 at this time?)
2 Likes
Solved as Dan said but Github modus folder (html examples) is missing icons sources.
Modus version? not sure how to check, those links says “Bootstrap v4.6.2” tho. Im using them.
1 Like
There are several “editions” floating around that did not formally say what version the were …
For example … the edition at the HtmlDialog Examples repo extended Bootstrap v4.4.1.
This was likely Modus v0.9.2.
The Live Components configurator is using Modus v0.9.0 that encapsulates Bootstrap v4.3.1 and Modus all into a single CSS file. (Yet they are using bootstrap.js v4.4.1 ?)
There is a SketchUp project testing with Modus v1.0.0 that encapsulates bootstrap.css v4.5.3 and Modus all into a single CSS file, labeled modus-v1.0.0.
The edition you found at the Trimble "assets/0.5.1" path extends Bootstrap v4.6.2.
This is Modus v1.5.3 or v1.5.4.
Note that you still should use a matching version of
bootstrap.jsto go along with what versionbootstrap.cssthat Modus is using.
So, basically, there is a version number for the Modus edition (or package, whatever it’s called.)
Not sure how the “assets” version fits in to all this.
See the Modus version history here …
It seems as though the icons are versioned separately.
Gonna be hard to keep up adpating newer modus for sketchup 
on the other hand it shouldnt be hard to code an algorithm to automate it*
(*) since old params dont get changed, just added new stuff.
I’ve tried new modus version but just realized Thom have made a good work adpating the old one.
it changes padding, sliders, buttom sizes… messed my htmldialogs.
so for now its way better to stay with github versions and get only icons from official website.
Thanks Thom for adapting that
Great addition, thanks
Right and I think there are several “kinds” of Modus.
They have “Light” and “Basic” which I think are aimed at mobile platforms, cellphones and tablets.
Perhaps a normal full edition for large web applications like Trimble Connect ?
For use inside SketchUp dialogs and inspector panels I would think one of the two lightweight editions would be all that is needed.
1 Like