Many of us have received an email giving insights to better our extensions. I like insights. Among them, one that interested me is about the look of the HTML dialog. So I downloaded modus.min.css and tried it following the exemples found at the linked site. Interesting indeed.
But is there a way to have a better view of that .css content ?
I tried opening it in different apps, the text has no line return, it is one long incomprehensible line. Pity.
1 Like
What code editor are you using? Chances are it has a way to pretty format that .css.
I am using BBEdit, Mac
Don’t know that, seems a bit limited after a first google search (one hit says it cannot format javascript, which is special for a tool that profiles itself as an html editor).
Might want to give Atom or Visual Studio Code a try, whereas the latter has my preference. Just hit option+f and your file is pretty formatted in so many formats.
It may be minified or uglified?
The reason it is all 1 line is because it has been minified, hence the ".min" in the name.
See if you can find a non-minified copy. It would be named "modus.css".
Now I wonder, how does one ugglify css?
Not true, JS is formatted well in Bbedit.
And your post made me curious and finally I did find a command in BBEdit to Format css properly.
Pretty thanks
2 Likes
A number of JS build systems offers such.
We have to check with the Modus team to see if there’s is a non-minimized version for development use.
I’d generally recommend using the Modus Bootstrap website to see what Modus can provide. Both the Component page and Foundation contains a lot of useful info.
Looking at the modus site, looks like it’s written in SASS, and you can use the npm packages to see the original SASS source: Getting Started | Trimble Modus Bootstrap Developer Guide
See “Customize using SASS”.
Well… minimizing yes. But uglifying? I do not think it is possible to uglify css, since properties names should match actual css property names.
Yes, this is what I’m studying these days. The components page is quite handy. I have yet to understand how to make a select “dropdown” showing default option.
And why class="position-absolute-left-5" does nothing. I did try many other combinations with or without hyphen at every spot. No luck.
Modus is based on HTML and CSS so i would expect a standars selected attribute to work. I haven’t tried myself though.
Hum… to be more precise, this is what I am using now in HTML:
> <p > Select
> <select style= 'position: absolute; left: 120px'>
> <option value=A >txt A</option>
> <option value=B >txt B </option>
> </select>
> </p>
Trying to find if 2 things are provided in Modus.
1- Select dropdown, (not button dropdown); this shows the default (1st) value
2- position absolute left, value.
Try this and the option B should be selected by default.
<p > Select
<select style= 'position: absolute; left: 120px'>
<option value=A >txt A</option>
<option selected value=B >txt B </option>
</select>
</p>
Sorry, I was asking about Modus. 
Anyway, not a big deal.
I don’t quite understand this distinction. Modus builds on top of HTML and CSS but doesn’t replace it. Whether a select option is selected or not is a basic DOM concept.
Regarding classes, Modus implements some generic and universally usable classes, like primary vs secondary buttons and a few different margins. These classes are named after what they are used for, not after the exact style implementation. Rather than looking for a position-absolute-left-5 class, you can ask yourself what you use it for (a header, navigation, a text field?) and look for a Modus element for that.
Yes, right. It is about Modus classes.
I do not find any exemple in there showing what is the proper syntax to use
position-absolute-left
All I see is Position | Trimble Modus Bootstrap Developer Guide
You also need to supplement with Bootstrap documentation, as Modus builds on top of that.