Ever feel like this when trying to get your CSS to work?
You’ll find the Flexbox control is a big help.
Here’s a good article telling even more about how to use Flexbox…
Flexbox promises to save us from the evils of plain CSS (like vertical alignment).
Well, Flexbox does deliver on that goal. But mastering its new mental model can be challenging.
So let’s take an animated look at how Flexbox works, so we can use it to build better layouts.
Flexbox’s underlying principle is to make layouts flexible and intuitive.
Plus, there’s a follow up article.
Ever try to center a button on a form? Dead center, from top to bottom, from right to left, no matter how the size of the form changes?
You can’t put a number like 100 into the left or top property. It won’t respond to different screen sizes.
You can’t put a percentage (like 50%): it will align the top or left of the button at 50%, not the center of the button.
There’s a handy calc() function you can use instead.
Continue reading “Using calculations in bounds properties”
Vertical and horizontal centering is hard. Here, from CommitStrip.com:
Here’s a good resource with suggestions on vertical and horizontal centering:
Let’s work through an example. Continue reading “Responsive Design: Centering a button vertically”
When designing an app for mobile devices, you need to consider what happens if the device is rotated. You can just put up a message asked the user to rotate back, or you can design your app so it looks good in both portrait and landscape modes.
AppStudio 5 introduced Responsive Web Design as a way to layout your forms. RWD is a design approach for making apps size themselves to varying sizes of screens.
In this blog post, we’ll use Responsive Design to handle rotation in a simple layout with three buttons. The techniques can be used for much more complex layouts, of course.
Continue reading “Responsive Design: Rotating Your Device”
Styles are a powerful tool for shaping the appearance of your controls. To a large extent, AppStudio lets you avoid having to learn a lot about them: it just handles them for you. But if you want to do something special, it’s easy to add extra styling of your own.
The most common place to put a simple style rule is in the ‘style’ property of a control. This is very specific: it will only apply to that specific control. Where the concept of styles gets powerful is the ability to have style rules apply to groups of controls.
Continue reading “Project CSS: Advanced Styling”
Here’s a great question from the web board. What is it with the $(“# you will sometimes see in the code?
It’s a jQuery thing. Valid function names can start with a letter or certain special characters. “$” is a valid character to use in a function name. In this case, it’s the entire function name: $().
(jQuery is a utility library which is included in AppStudio apps)
jQuery’s $() function is a selector. It looks for elements in your app. It has a lot of different ways to select them:
You may see something like
The # means to look for an element with the id of “Button1”. What follows is the function to perform on the selected elements. There are a lot of functions that can be called:
By the way, you can also do the above as follows:
Rather than using a selector, we reference the control directly.