Input values and units

Author Posts

deanphillips1991 November 25, 2019 at 8:52 am

Heads up! this post was created when Microthemer was at version 6. The current version is 7. Some references to the interface may be out of date.

Hey!

I’m loving the suggestions field, really smart.

I’d love the ability to click and see a list of possible units though:

https://drive.google.com/file/d/1nXg96cg-2rKlTJYNKVETLGtoDMldbNW3/view?usp=sharing

I know we can type them, but having this option would be faster for me, to test things 🙂

Sebastian November 25, 2019 at 10:18 am

Hey Dean,

This is actually coming soon! The value suggestion menu with have another line of controls at the top:

– A slider
– plus / minus buttons
– Up/down keyboard adjustments that perform the same action as the plus/minus buttons
– A CSS unit dropdown menu. The current pixel suggestions will auto-convert to the equivalent rem/em unit etc when you adjust the unit. And MT will remember your preferred unit for a given CSS property.

Is that what you’re after?

Cheers,
Sebastian

deanphillips1991 November 25, 2019 at 4:43 pm

That’s exactly what I was thinking 🙂

A few ideas I also had are these: (hope you don’t mind suggestions)

Grid outline on the canvas so when we make adjustments in width etc it’s easier to see what we’re doing (I know we spoke about potentially one day allowing dragging things around on the canvas, but this would be a good substitute for now)

Dragging numbers up and down to adjust widths and heights faster (https://assets-global.website-files.com/55e67eeba2e73cb76514f165/5c90eca170f1f48af1d1ae9a_CdYEdrbcJoUEeLnhcQre56GDUcPs3QTkuhBmvSzNl_CU8AC0HT_60MK6GNVNa0CPBkIqSahePUUWdCGTZdKSLfgQnFiR2n5GVFYIj87tx7IS56AB799XnBQkspD39KiGsHEMTyuF.gif)

Transforms and filters (the ability to use more than one filter at a time)

Gradient/shadow wheel

Probably not possible, but in O2 and Yellowpencil we see the state we’re currently editing (aka the hover) instead


Sebastian November 25, 2019 at 6:00 pm

Suggestions are always welcome Dean. And you’ll be pleased to know that:

  • Grid highlighting is partly done already. I just didn’t have time to finish it before my deadline for the beta. It should be done by the end of next week.
  • I’ve already done the icons for transforms and filters, and adding the fields isn’t a massively big job because they will follow existing patterns (unlike grid which introduced many new UI patterns)
  • Gradient will be merged with the background group, and color stops will be configurable like the grid template row fields. Could you clarify what you mean by wheel?
  • Multiple text and box shadow layers will be supported along with multiple backgrounds.

All of this will follow tighter Oxygen integration, apart from grid highlight which is part of finalising the new grid implementation.

Cheers,
Sebastian

Oh and I’m still undecided about how to make it easier to apply pseudo state styles – a shortcut for creating a new and separate state selector – or having it as part of a single MT selector. I’m certainly going to do something in that area though!


deanphillips1991 November 26, 2019 at 1:01 am

Oh fantastic. Excited to see the grid highlighting! That’ll be a huge help. Between the Oxygen integration and that, I’ll hopefully be able to get close to my Webflow workflow. The new CSS grid is insane. Do you have any more ideas on things you plan to add to it?

Although we’ve got transforms inside of Oxygen, they’re missing transform origin and children/self-perspective. The fact that you also have to type numbers/press the up arrow vs dragging makes doing big transforms (to create 3D space) difficult to manage. I know you won’t do sliders, but I think it’ll still be a faster implementation from a UI perspective than theirs.

Opps meant to include some images for the wheel – it’s the best way imo to set angles for shadows and gradients (vs typing the degrees in)

https://drive.google.com/file/d/1bclQavCfdzgeFpPsgwMpF8qibEOGJICs/view?usp=sharing

Lastly, I meant to ask this the other day but is there any place/way to apply styles to the current page vs global vs template like this: https://drive.google.com/file/d/1vQHvj2KMhpDJZyg-g2A1apspgJ7OZxAT/view?usp=sharing

Thanks so much,

Sebastian November 26, 2019 at 1:23 pm

Hey,

You can make selectors page-specific during targeting mode: https://screencast-o-matic.com/watch/cFVIX4olWj

Thanks for sharing the angle widget – I’m on board that.

Regarding CSS grid updates, I will take the lead from user requests. You were missing the grid highlight feature, so I will add that before moving on to other things. If neither your or anyone else raised it I, I would have prioritised other updates 🙂

I’m going to make a few videos for CSS grid, and that may lead me to add some UI updates…

Cheers,
Sebastian

Oh and there will be sliders for all numeric fields soon

deanphillips1991 November 26, 2019 at 1:31 pm

Fab. That’s all great news.

I knew about the selector, I just didn’t know if there was a view to see global vs single vs template generated css. Regardless, not a deal-breaker at all. Absolutely loving this tool and grateful for everything you’ve done (the tutorials, support, and updates are top-notch and unlike anything else)

Sebastian November 26, 2019 at 1:51 pm

Oh I see, yeah there isn’t a convenient way to check at the moment. I recommend organising page-specific rules into separate folders – one folder per page. You can find them post creation by going to View > Generated CSS and then hit Ctrl + F and search for:

.mt-

This will find selectors that have .mt-123. The CSS comments show the folder / name of the selector in MT.

deanphillips1991 November 28, 2019 at 1:06 am

Hey man,

Loving seeing these often updates happening since the beta 🙂

I was wondering what your workflow would be for styling H1-H6, paragraphs all inside of MT vs just coding.

I have a stylesheet with them all in already, but I don’t have breakpoints set, and really need to add them.

Is there a way to:

1. Add multiple selectors at once (h1-6, paragraph etc)

2. Edit the overall css file for a folder/site so we could see:

H1 {
Code
}

H2 {
Code
}

Etc

I ask because I think seeing the other headlines css and being able to move between them rapidly would help for this particular job.

If I’m not making much sense, this might help:
https://www.loom.com/share/dc9916ad13274ac6b64c02ee7fdeeaf5

deanphillips1991 November 28, 2019 at 2:25 am

I’ve also had some issues with doing responsive paragraphs as I use custom classes for featured intros and subheadlines.

Any ideas on the best way to handle this: https://www.loom.com/share/1c0074c3468c4bbe9154b57dcc6d1564

Thanks so much

Sebastian November 28, 2019 at 1:52 pm

Hey Dean,

In answer to your first question about typography: http://somup.com/cqXuIHfTAO

For your second question, would you mind posting a link to the page with the selector not working on a given paragraph so I can see how the CSS rules are cascading? Or, if you don’t mind, send access to the site via our secure contact form? You can use this handy plugin to provide access temporarily without sharing login details: https://en-gb.wordpress.org/plugins/temporary-login-without-password/

I noticed two issues in your video. One is that something is overriding the toggle switches in MTs menu (making the too large, and purple). And the yellow error at the top right. That could be an issue with MT, a conflict with Oxygen, or a general error on your site. Regardless, it’s worth understanding and fixing.

Cheers,
Sebastian

You must login or register to reply to this topic.