Jump to content

Search the Community

Showing results for tags 'design'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Categories

There are no results to display.

Forums

  • Welcome to Smart Mobile Studio
    • News and Information
    • Pre-Sales Questions
    • Smart In the Media
    • Smart Contests
    • Meta
  • Smart Mobile Studio Discussion
    • General
    • IDE
    • RTL
    • Code
    • Client Server
    • Platform
    • Graphics
    • Deployment
    • Suggestion box
  • Smart Mobile Studio support
    • Support
    • Bug report
  • General Discussion
    • Pascal
    • Delphi
    • Javascript
    • HTML/HTML5
    • CSS
  • Resources
    • Website
    • Download Smart Mobile Studio

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Location


Interests


Company name


Position

Found 6 results

  1. lynkfs

    styling

    Styling of visual elements. There are some 280 separate css properties which can be used to style each and every visual dom element. The following statement produces such a list var styles := browserapi.window.getComputedStyle(Panel.handle); (280 entries) If we disregard the properties which have a vendor prefix (-webkit, -moz etc) we still end up with some 230 properties for each visual element. And although many of these have default property values, the complexity is just too great to do styling on this level. Each and every css framework (including Smart) tries to reduce the complexity by a number of measures group css properties into meaningful categories, give these groups meaningful names and possibly also rename individual properties connect groups to visual components making sure that all groups adhere to application wide values (i.e. primaryBlue is set to "#ebf8ff" in all groups) eliminate annoying differences in how browsers interpret universal css do this either static and/or dynamic in code The way the above is implemented varies wildly across frameworks. Two examples : Smart does its standard styling mainly by grouping classes on the level of components (1), giving them component names like .TW3Button (2,4). Every visual component gets this class on creation with 2 additional classes for background and border (4). So the resulting styling of a button gets defined by <button class="TW3Button TW3ButtonBackground TW3ButtonBorder" ... The supplied css templates in the Templates directory have a feature which implements application wide setting (5), so f.i. const 'EdgeRounding' will be set to "4px" in all components which use 'EdgeRounding (3)'. There also some settings which standardise browser behaviour (6) Furthermore the rtl has methods to manipulate all classes, groups, properties and stylesheets in code (SmartCL.Css.Classes, SmartCL.Css.Stylesheet (7) Tailwind CCS. This framework is sort of on the other side of the spectrum. It groups css properties in a large numer of very small groups (1,2,3). These groups are almost atomic in nature, so f.i. the 'm-0' class is specified as { margin: 0 }. It basically does not do any of 4,5,6 or 7 So implementing a button using Tailwind involves many classes : <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" which gives a light blue button with rounded corners, becomes a bit darker on hover, has its caption in bold white and has specific values for top/bottom and left/right padding. Nevertheless people build beautifully styled apps and websites using Tailwind. And it is readily accessible through code (7) Thinking about how to merge the best features of the above into a styling design mechanism, I would look at doing this : 1- define a (limited) number of atomic groups. An atomic group combines and names simple css properties which can be used in more complex structures. Candidates are : colors, borders, backgrounds and fonts to start off with. The font-category f.i could be sub-grouped in 'families', 'sizes', 'weights', 'letterSpacings' and 'lineHeights'. As an example the 'lineSpacings' subgroup could then be specified as "letterSpacings": { "tighter": "-0.05em", "tight": "-0.025em", "normal": "0", "wide": "0.025em", "wider": "0.05em", "widest": "0.1em" } 2- define generic building blocks or component groups, i.e a generic button, using as many of the atomic groupings from 1) as possible "button": { "cursor": "pointer", "fontSize": "100%", "lineHeight": "inherit", "backgroundColor": { "colors" : "primary" }, "border": "none", "color": "white", "fontWeight": "bold", "borderRadius": { "radii" : "default" }, ":hover": { "backgroundColor": { "colors" : "primaryHover"}, } This uses the atomic 'colors' group, which will have entries like "primary": "#2b6cb0", "primaryHover": "#2c5282" which then will be substituted in the above, so f.i. the 'backgroundColor' entry will become "backgroundColor": "#2b6cb0" This way all groups who use 'colors:primary' will have the same colour value, application-wide. 3- define descendants from the component groups from 2), f.i. a rounded pill button, which only has those properties different from its parent "buttons": { "pill": { "borderRadius": "full", } } So far the above examples boil down to something like this after substitution (2) and child creation (3) theme01.colors.primary: #2b6cb0 theme01.colors.primaryHover: #2c5282 theme01.buttons.generic.cursor: pointer theme01.buttons.generic.fontSize: 100% theme01.buttons.generic.lineHeight: inherit theme01.buttons.generic.backgroundColor: #2b6cb0 theme01.buttons.generic.border: none theme01.buttons.generic.color: white theme01.buttons.generic.fontWeight: bold theme01.buttons.generic.borderRadius: 0.25rem theme01.buttons.generic.hover.backgroundColor: #2c5282 theme01.buttons.generic.pill.borderRadius: 9999px and a class invocation like <button class="buttonPill ..." (or even TW3Button) 4- generate this into a regular css template and include the modernize.css entries to harmonize across browsers as well. 5- integrate this in the visual designer Actually the style generation should closely follow the hierarchy in the visual designer. So if there is a rounded-button on a panel on a form on the <body> element, then the css property values should reflect the #body, #form, #panel, #generic-button and #rounded-button properties (and nothing more). just an idea, but doable
  2. lynkfs

    design templates

    I'm sharing some links below to app-demo's, based on design templates. I'm a big fan of these types of templates as they provide essential design guidance on navigation, styling and the use of animation. And since I'm not a graphic designer, that all helps tremendously. The demo's below are recreated in Smart, using elements of the 'famous' design templates (https://famous.co) Retail shop demo couple of slides of a business presentation demo's optimised for laptop only (also the background video's on the first forms may take a couple of seconds to load) On the animation side : the animation framework in these demo's is based on waapi (web animation api) and consists of an extension of the standard form handling. Basically every form and every component on a form can enable web-animation events. These events are triggered by the phase a form is in : coming into focus going forward, going out of focus going forward, coming into focus going backwards and going out of focus going backwards. These phases not only trigger screen events, but also all component animation events Procedure Traverse(phase: string; screen: string; direction: string); begin var z : variant := new JObject; z := browserapi.document.getElementById('Component2').getElementsByTagName("*"); //all children of TDisplayView for var i := 0 to z.length-1 do begin if z[i].dataset.screen then begin if (phase = 'init') and (screen = z[i].dataset.screen) then begin if (direction = 'forward') then begin if z[i].dataset.initforwardanim then z[i].animate(json.parse(z[i].dataset.initforwardanim),z[i].dataset.initforwardtime); end; if (direction = 'reverse') then begin if z[i].dataset.initreverseanim then z[i].animate(json.parse(z[i].dataset.initreverseanim),z[i].dataset.initreversetime); end; end; if (phase = 'exit') and (screen = z[i].dataset.screen) then begin if (direction = 'forward') then begin if z[i].dataset.exitforwardanim then z[i].animate(json.parse(z[i].dataset.exitforwardanim),z[i].dataset.exitforwardtime); end; if (direction = 'reverse') then begin if z[i].dataset.exitreverseanim then z[i].animate(json.parse(z[i].dataset.exitreverseanim),z[i].dataset.exitreversetime); end; end; end; end; end;
  3. lynkfs

    visual design

    I've been following this company for a while. They went from a startup promising a contemporary development product to a web design template producer. And I must say, I really like their designs. When I need some inspiration for app design, I do have a look at what they're offering https://famous.co/
  4. lynkfs

    Responsive Design

    Responsive design in essence consists of 2 measures : style all components as best as possible depending on screen size (larger buttons on mobile, proportional font sizing etc) tweak the layout of forms so that it works best on any given screen size 1) Screen size dependent styling can be done in code and/or is done as other frameworks do by including media queries in the stylesheet. Media queries basically activate different parts of a stylesheet depending on the actual screen size. Smart doesn't implement this in its shipped stylesheets, but there is no reason it can't be done. Just a bit of work. 2) Tweaking the form layout in Smart is possible by doing it in code depending on screensize and orientation - a bit of a pain really using the Layout Manager using some css grid framework or ui kit. For website development I've used the Frow framework quite a bit, but there are many others. using anchors and the CSS grid (which is basically the topic of this post) The new anchors are fantastic, but don't really help in responsive design. Browser window resizing doesn't proportionally resize anchored components. That is unless they are dimensioned depending on screen size beforehand : var W3Panel0 : TW3Panel := TW3Panel.Create(self); W3Panel0.Left := trunc(browserapi.window.innerWidth*0.05); W3Panel0.Top := trunc(browserapi.window.innerHeight*0.05); W3Panel0.Width := trunc(browserapi.window.innerWidth*0.9); W3Panel0.Height := trunc(browserapi.window.innerHeight*0.10); W3Panel0.Anchors := [akLeft, akRight, akTop]; // var W3Panel1 : TW3Panel := TW3Panel.Create(self); W3Panel1.Left := trunc(browserapi.window.innerWidth*0.05); W3Panel1.Top := trunc(browserapi.window.innerHeight*0.15); W3Panel1.Width := trunc(browserapi.window.innerWidth*0.9); W3Panel1.Height := trunc(browserapi.window.innerHeight*0.70); W3Panel1.Anchors := [akLeft, akRight, akTop, akBottom]; W3Panel1.NativeScrolling := true; // var W3Panel2 : TW3Panel := TW3Panel.Create(self); W3Panel2.Left := trunc(browserapi.window.innerWidth*0.05); W3Panel2.Top := trunc(browserapi.window.innerHeight*0.85); W3Panel2.Width := trunc(browserapi.window.innerWidth*0.9); W3Panel2.Height := trunc(browserapi.window.innerHeight*0.10); W3Panel2.Anchors := [akLeft, akRight, akBottom]; As an example the code above produces a header (always on top), a footer (always on the bottom) and a scrollable body inbetween with some proportional margins. The good thing is it works well on all screen sizes, and even on orientation changes, without having to code anything else. Instead of using a grid system with media queries, or doing it in code, it is also possible to use the built-in css grid to get a responsive design. Much easier, see article. If I just plonk the css and html of the first example in that article into the structure above, this is how it ends up looking : Demo Resize browser window to see this in effect (or see it in the responsinator) Not the end-all of all possible responsive design options, but it may fit the bill sometimes. Note : the built-in chrome browser doesn't understand the css grid, so execute from file or server.
  5. Reading up a bit on web design systems Basically web design systems are a collection of rules, components, tools etc helping developers to create a consistent look and feel for the websites or apps they are developing. This link links to the design system of the us gov. Whether or not one likes this system, it is certainly comprehensive. As an example I quite like f.i this site which conforms to these rules.
  6. lynkfs

    design surface

    @lennarthas been working on a design surface component (TW3DesignSurface) see https://jonlennartaasenden.wordpress.com/2016/11/07/ Could the code for this component be shared ?
×
×
  • Create New...