PInegrow countdown: Matjaz: CSS interface

Does the new CSS interface support multiple breakpoints?

See attached examples from Softpress Freeway: The popup at the bottom right is automatically populated with the breakpoints that have been set up in the document. To edit, start with the widest breakpoint. When you switch to the next widest, the styles applied to the larger are inherited. You can then tweak the font size, etc., for the current breakpoint. This inheriting is passed down to each breakpoint

Also note the plus buttons at the right. The interface only displays the styles in use. To add more attributes, you click on the plus button and add it. Thanks to this, the UI is not choked with all possible attributes. This approach, if applied across the board with the Pinegrow UI, would greatly simplify the interface. It only shows what is actually in use, instead of everything possible. To add something, just click on the plus button in the desired section.

The point is, that Pinegrow supports (and ever did) any breakpoint you want or better said need - you simply set it, adjust the required properties for the class (or ID) and done.

Freeway’s way making sites responsive is (and I know what I’m talking about) NOT the way, modern responsiveness works.

Responsive design is NOT about devices - it’s about design. Better said: In Freeway you’d need for any situation the DESIGN starts to suck a new tab (which stands there for breakpoint).



It shows it at the beginning of the video.

But as @Thomas stated, it already fully had this ability previously.


I think I understand better what your saying about:

You can then tweak the font size, etc., for the current breakpoint.

I suppose only @matjaz or one of the team could explain better. Whether if working with Media Queries / Breakpoints will be easily tied into the new CSS GUI Visual Editor, for using it to define specific properties of items easily across breakpoints and media queries.

For instance, when a Breakpoint is selected (toggled) as the active one, then any changes to an items CSS Properties are reflected and associated to that specific Media Query for each Breakpoint that changes are made to. I assume this or similar will be allowed from the GUI as part of the enhanced visual workflow? This type of approach is present in a few other apps I have seen. @matjaz #feature-request ?

I didn’t say anything about how Freeway handles responsive sites. And I never said that responsive is about devices. I always design as both responsive and relative. If Freeway wants to toss in some random label I could care less. I will design to the specific pixel widths that I am after, regardless of suggestions from a app. (I should note that this is a particular point for me, as my HTML 5 app scales up between breakpionts - which makes sense - whereas Freeway scales down, which is nonsense.)

I was talking about their CSS user interface.

One of the aspects of the PineGrow UI is that each section displays every option. The cool solution that Softpress came up with was to only display the options that you actually use for the style sheet. If you want to add a tag for, say, shift or word spacing, you click on the plus button to add the attribute, but you do not have to wade through a bunch of irrelevant fields to get to what you need. This eliminates a ton of UI clutter.

About multiple breakpoints, my comment had nothing to do with how Pinegrow sets up responsive.

I was talking about the CSS interface for specifying styles. As seen in the screen shots I provided, all the editing of a specific style for all breakpoints is handled from the control panel for that style. This is a very efficient design.

User Interface is matter of Pinegrow - it’s not to compare with any other application!!!
If you like to use Pinegrow - use it or leave it.



Oh by the way:

NO - it is not. It simply means, that you add the same property ever and ever to each element on your page. This means bloated code and is far away from efficiency. All it is is comfortable.