Summary: I have seemingly hit a limitation in Figma when trying to make the columns behave akin to a CSS grid system. I would like to know if I have misunderstood Figma's built in capabilities, if there is a plug-in that solves the problem, if I have to create one Figma frame per CSS breakpoint (undesirable), or if there are other solutions.
Background: As an interaction/ UX designer, I would like to specify the responsiveness of a web based application, so that the front end developers know how the interface should appear at all browser widths. They implement in a CSS-based grid system similar to Bootstrap
So far, I failed in achieving what I want, and the most knowledgeable UX'ers in the company think I have hit a limitation in Figma's capabilities, but they are not certain.
Basically, what I want is this basic responsiveness, but column based. But as shown in this video, none of my experiments work.
I wonder if it boils down to this: If a Figma child element has:
horisontal constraint set to “Scale” and
vertical constraint set to “Hug contents”
Then the parent element cannot have:
vertical constraint set to “Hug contents”
Is this is a known limitation in Figma? If yes, are there plugins that solve this problem, or is it outside Figma's scope to offer this type of alignment with CSS-based grid systems? Obviously, it would be very beneficial if the solution also supports breakpoints.
P.S. I have asked which SE site that was most suitable for this question, and SO was the suggested site. The question was closed on UX.SE.
No, according to an answer on Figma's own forum, Figma's columns cannot behave akin to a CSS grid system, even though “several threads [have] requested [this] evolution”.
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
Community!
I know, these questions shouldn't be opinion-based and I'm certainly not asking "What's the best CMS???". I'm just at a point of having tried out so many different CMS that I want to know if there does exist one which meets the following criteria:
Very flexible template system, content elements, content columns
I don't really like the complexity of designing with Fluid in TYPO3. I'm not a complete newbie in this area but it strikes me as being pretty complex, you have to know all these functions and knowledge in TypoScript doesn't have much use outside of TYPO3.
On the other hand, I feel the templating is with Fluid is done pretty well. You have your backend layouts where you define your content columns (name and number), where in your fluid layouts you specify which content column (here, the number is used) is rendered where. Inside the backend you apply your backend layout to your root page (it is inherited which I love because it makes changes easier than having to change the template of every single page!) and you can add your content to the column defined in this backend layout. I love this idea!
The point I like is that content can exist outside this structure - you can create a content element and have it just not being rendered because it has no layout column specified. Also if you ever want to change your layout, you can do so by provoding the same column numbers in a new backend layout. The name of the columns can be changed without problems - that's the problem with Concrete5.
In Concrete5, all content resided inside of the "areas" (quasi content columns) on the individual pages. But because Concrete5 has only inline-editing, you can't just change your area names (and they're visible for your editors so maybe you want to change them to a better name, even though there are some standards like 'main' this doesn't fit for Non-English speaking people who just edit content in their language). If you do, you can't access your content inside these areas anymore because it is coupled with the area names (I wonder why there's no ID-system and just a public visibly area name).
Another point is crappy code - I really don't like the output of some CMS very much, even if you can control it somehow, sometimes there are things like many lines of whitespace - really weird. Concrete5's inline-editing-feature is pretty cool, especially the ability to work with Bootstrap and visually layout your blocks to have two thirds to one third width or something like that. But on the other hand you have to have these header- and footer-includes to use Concrete5, so you HAVE to change the output on your site and have to use the div-wrapper to use inline-editing. I don't really have anything against it as long as it doesn't clutter the final output too much (and I think, Concrete5 is pretty ok in this regard).
I LOVE ModX in this regard because after experimenting just a little bit I actually got ONLY my html and the things I put in the page editor in the final source code. The problem with ModX is: there are no content elements/blocks, there are no content columns/areas - all you have is one big editor field. I know, you can adjust that pretty heavily, but in the end as far as I think it's not really meant to offer you the ability to define multiple areas where you can put different kind of elements inside, is it? Like "Header", "Text & Media" or "Slider" in TYPO3/Concrete5, which you can hide (at least in TYPO3) and move on their own.
(And if there is some good kind of version control, that would be great as well, but that's just a thing I like in TYPO3 and I don't like that much in Concrete5 because you can't really roll back changes to individual elements, just to the whole site - and you can't hide part of your content (hide some blocks like you hide content elements in TYPO3) to "save" an alternative version of, say, a header or a normal text element.)
Long story short, I'm looking for a very flexible template system which let's me design the way I want. It should have individual content elements (elements of different types, which I can create on my own as well) and content areas (/columns), so that I can place my content in different places which I can style individually. It should output only my code if possible (like ModX) and be open to changes (like renaming content columns/areas).
Just to recap my problems I have with the named CMS:
TYPO3: too complex to enjoy layouting with Fluid in my regard
Concrete5: too tightly coupled (content is gone when you rename the
areas in your layout, you can't access it anymore at all)
ModX: Not
really built for multiple content elements which reside in multiple
content columns
To not counteract the purpose of stackoverflow, I want to clarify that I'm not looking for every CMS in which the named things are POSSIBLE. Someone might say "You can totally do that in Drupal, just install these 200 modules and you're good to go!") but are actually intended (like content columns and content elements in TYPO3/Concrete5, especially in Concrete5 it feels very natural to work that way, you don't get a sense of having to hack the system for days just to have a good base for developing your site.
I'm asking if there's a CMS available (it should be open-source/free) that actually supports these developing principles by it's nature. I hope you can help me and everyone looking for a CMS which supports this style of working! Thank you! :)
Coming from the TYPO3 world and not knowing other systems well enough to really compare: if you got complex layouts with multiple grids you will have always some complexity for editing as well.
I don't see a real complexity for fluid using fluid_styled_content as fluid is really simple, nice phpstorm plugins exist which do autoocmplete for you for partials, viewhelper,...
Imo you tried the most used cms in php world and stick to the one which fits best for you. Of course the core team and extension authors are always happy to get feedback. So if some specific thing is too complex for you, please let us know!
Area names in concrete5 are completely up to you (although "Main" is fairly standard). If you won't be switching themes there would be no problem.
You are free to create your own theme/page layouts and name Areas however your want.
The basic content in concrete5 are Blocks not Areas. Sounds like you should look into Stacks, which allow you to put as many blocks/types into each for as many as you want. They do not have to be displayed anywhere.
There are many ways to retrieve Pages, Areas, Blocks and Stacks (including Global) programmatically without a name, such as:
$someBlock = Block::getByID(5); // get your Block by bID #5
Not to mention you can create custom View Templates or override the core files to output however you want (not restricted to HTML).
concrete5 can even be ran at the command line.
Sounds like a little time with the Block documentation would completely change your mind...
jasteele12 # concrete5.org
I cant wrap my head around properly creating a responsive design using foundation 5 when dealing with grid systems.
Is it imperative that everything be set the column width using the grid system?
To be more clear, does every element on the page require a number of columns for each width (small, medium, large) for the site to be considered truly responsive? Or is it sufficient to set width in % and ems and simple explicit media queries to achieve that goal?
I don't know anything about Foundation 5, but in principle, no, you do not even need a grid system at all to be responsive. As you rightly suspected, media queries used to rearrange the elements you want to move for different size screens will make any page responsive. And yes, set things in em units or %ages - especially the media query breakpoints.
Grids are of use if your page content naturally needs to be displayed in a grid like fashion.
By the way, you would probably have had an answer much earlier if you had tagged it correctly. Responsive design makes it a CSS question, so it needs a CSS tag! I just happened to see this because I was searching for something else.
we're maintaining some Qt applications which are running on Linux and Windows desktops. Now, we want to make the applications more attractive by adding customized forms and reports for each customer or at least groups of customers. There may be 10 or more different versions needed.
As we come from Qt, we are wondering how to manage so many configurations and if there already is a framework/development system that would help us here. We were looking at QML/Qt Quick, WT Toolkit or even NC Reports for the reporting part.
Managing configurations and deriving different versions from a base is not a feature which is discussed or promoted.
There should be a clean distinction between Display and Application Logic (Model/View)
Nice would be a textual GUI description, which enables us to release changes in forms or reports without the need to reinstall the whole applications (like QML seems to have that)
Also nice would be a kind of report generator, that helps to create forms and reports for new customers without the need to code them (and so releases our core developers from boring work)
Has somebody experience with such kind of customer based configurations? It would be nice to have a hint what's the best way to do this in the Qt surrounding.
I know comparisons like http://qt-project.org/doc/qt-5.1/qtdoc/topics-ui.html#comparison, but the specific questions that I have are not mentioned.
best regards
I guess you need to differentiate applications in three aspects:
1. appearance - if the application only differs in button color, icon image and background themes, qt's style sheet is light and convenient, you can choose to deploy different qss file and load different ones without recoding. if the variance among customers concerns layouts or available widgets (some has buttons, some use combo boxes, .etc), style sheet cannot meet the requirement, QML seems promising in such case.
business logic - i'm not sure how "generating reports" differs for different customers, if the reports need to be printed, or saved as document, i don't think qt provides good toolkit (QXXXDocument is not suitable to generate / display large amount of document), html? maybe. And i agree with #hyde that loading different plugins or dynamic libraries can solve this.
What I learnt from 8 month qt:
Model/View Architecture is there, for example a tree view that we fill with voyage data. the data is gatheres from several db tables, so we have a good logical distinction.
We hadn't the time to work us into qml, so we stuck with qt designer. It's quite easy, so we're fine with that. Delivering changes in customer forms without recompile will be a feature for a bigger future rework.
Same with report generators...
I am working with MFC code that I believe was developed in the early 90's. I've been given the great task of bringing the software into the 21st century, getting it to work on the likes of Windows 7/8. The application targets numerous platforms, of which one is Windows XP. The original software had a fixed window size and looks terrible on certain OS. I have managed to overcome this but sizing the dialog leaves a lot of grey space. I need to incorporate anchors and docking, similar to .NET.
As always, time is limited, so I need quick, "dirty" solutions, until I get time to rewrite the UI layer. The application contains a number of "screens", each following a similar format. Banner at the top, content consisting of copyright, help on the LHS and task buttons on the RHS and a kind of footer control containing "hotkeys".
As a quick fix, I am thinking that resizing the dialog should cause the following.
Banner is anchored left and right
LHS/RHS content is split say 60/40
Footer is as per the banner
This is made more difficult as different controls are used for different target operating systems/platforms. Basically, the OnInitDialog, uses conditional compilation to to add controls, dynamically, depending on the platform.
To implement this I am guessing I need something like the following...
Each control "remembers" its bounds
I expect this to be tricky as no WM_CREATE message for dialog child controls.
Possibly use OnParentNotify.
Sizing the dialog "remembers" its last size and calculates differences in width and height.
The dialog sends a parent resize message to its immediate children so they can re-calculate layout.
My question, finally, is what is the best way to approach this?
One idea I have...
Introduce a new Widget class that extends CWnd and returns anchor details via a virtual method.
Create controls such as CBanner, CCopyright, CFooter etc that implement Widget
Create a RowWidget for content that sizes LHS and RHS content appropriately.
Now that was hard to put into words!
Any help appreciated.
Thanks
Karl
Actually a very common question and your reasoning is sound, but rather than reinventing the wheel, it might be better to first look at some freely available implementations along the lines you describe.
For example this CodeProject article does what I think you need.
I have a django app and I would like to display some graphical data visualization to my users. I am looking for an easy-to-use package that would allow me to add graphs and widgets.
The kind of widget I want to build is a kind of speedometer dial that is red at one end and green at the other. As a user completes their job over the day, the graphic/widget adjusts itself. The dial moves from red to green.
I also want an S-curve graphic that shows the cumulative amount of work accomplished against planned. That is kind of an x/y line plot.
My question are: How easy is this to implement? Are there any add-ins libraries or packages that do this already? I am trying to keep my entire application open-source. I've seen a couple subscription services that do this type of thing, but I can't stomach the cost.
I don't mind using ajax or jquery to implement such a thing, but I would like the most elegant and maintainable solution.
Any advice or examples on how to tackle this project?
There are lots of good javascript libraries these days, but all require some effort to learn how to use. I have not found one that really is easy to use, I guess because everyone wants something different. My general experience has been the more effort you put into learning them, the more you get out.
Google has gauges: http://code.google.com/apis/chart/interactive/docs/gallery/gauge.html
Also
http://www.flotcharts.org/
http://philogb.github.com/jit/
http://www.highcharts.com/
http://www.jqplot.com/
Or really take control:
http://mbostock.github.com/protovis/
As first, see the following grid (https://www.djangopackages.com/grids/g/dashboard-applications/) on djangopackages.
Not sure if that's exactly what's asked for, but you might take a look at django-dash (https://pypi.python.org/pypi/django-dash).
It allows each user to make his own dashboard (from plugins available). Those dashboards can be made public.
Some screenshots (http://pythonhosted.org/django-dash/#screenshots).
It's modular and plugin based, so you need to make a plugin and widgets for every specific feature (in this particular case - the speedometer plugin and widgets for it). Each plugin/widget can include own JS/CSS when being rendered.
See the following chart usage examples:
D3.js integration examples (https://github.com/barseghyanartur/django-dash/tree/master/example/example/d3_samples).
Polychart2.js integration example (https://github.com/barseghyanartur/django-dash/blob/master/example/example/bar/).
protovis is no longer under active development, but they started a new poject: http://d3js.org/
You may choose from these packages:
https://www.djangopackages.com/search/?q=dash