Webdesign with SD5

A few goodies

  • check_circle
    Collapsible Accordion

    This element you just clicked on is the collapsible accordion from the Materialize Framework.
    Under Download you will find a installable component for Site Designer 4.

    You can add new items to the collapsible list by duplicating the list item container .
    This component uses icons from Google instead of the standard Coffeecup glyph icons. To change an icon you have to change the value of the <i> tag in the html element and set it to a valid icon name. You can find this name on Googles website on material design.
    To load the Google icons, you need to add this link to the head of your HTML Document:
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    For more information, visit the website of materialize.
    The button "View Demo" does not do much. You are watching a live "demo" of this element right now!

  • text_fields
    HTML Table

    SD4 does not offer us HTML table tags. Instead, it only gives us the display properties necessary to create such a table using CSS. This downloadable component utilizes these properties. It defines several classes with which an HTML table can be created. The names of these classes are the same as the corresponding tag names (for example: the tag <tr> has a corresponding class "tr").
    To use this component, add it to a blank page in your SD4 project. You can then create your table on any other page by adding div elements and assigning the correct class to it. You start by creating a div with the class "table". And if you need a new table row, add a div with the class "tr" and so on ...

  • font_download
    CSS @font-face Rule

    One way to use any font in your project is to use the font-face rule.
    You need to define your new font through the font-face rule in a separate CSS file by naming it and setting a path to the font file.
    To use this new font, set the font-family property in a class.

    The demo can be downloaded as a .rsd file.

  • style
    Pseudo Classes

    The "Element State Selector" allows us to define different pseudo classes. After one or more pseudo classes have been selected, they can be activated for different elements in the pop-up list "In State", which also contains the standard pseudo class "hover".These pseudo classes can be used for further refinement of the styling.
    SD4 does not support Pseudo-Elements.

    The demo can be downloaded as a .rsd file.

  • view_column
    Sticky Columns

    This example shows a two-column layout, each of which can in turn be sticky or scrolling.
    As the right column scrolls, the left column stays in place. And if the left column scrolls, the right column stays in place.

    The demo can be downloaded as a .rsd file.

  • school
    Onesided Skew (shapes)

    These examples show two different ways to create a one-sided oblique image.
    The first two example uses the CSS property 'clip-path', once to shape an image and once to shape a container with a background-image.

    The third example consists of three interlocking containers. The property overflow of the first is "hidden". The second gets a skew in one direction. The third is provided with a background image and gets a skew of the same amount as the second, but in the opposite direction. The third container is then slid over the edge of the first.

    The demo can be downloaded as a .rsd file.

  • donut_large
    Resize on Scroll

    The size of several elements in this demo is changed in height when scrolling.
    This behavior is implemented with a Javascript function. The function accepts three parameters. The first indicates the number of pixels the user must scroll before resizing begins. The second contains the ID of the element whose size you want to change. And the third sets the new height of this element.

    The demo can be downloaded. The script and other instructions can be found in the .rsd file.

  • cloud_upload
    Upload Files

    This demo shows how in princip an upload of files to your webserver could work.
    The PHP script comes from W3School. I have almost completely commented out, while I do not want anybody to upload things to my server. And it is far from perfect. There are some security-issues to solve. So use it at your own risk (actually, that applies to everything you find on this page).

    The .rsd file also contains a small javascript that enables us to use the SD4 submit button together with this PHP-script.

  • speed
    Slow Scroll

    Here I added, in a separate file, a small function for smooth scrolling. Such functionality is not new, but in my version the function uses the SD4's local jQuery files. So no extra call to another version is needed. In addition, any element in your HTML file that calls the "scrollSmooth" function in its click-event can activate this function.

    The demo can be downloaded as a .rsd file.

  • flip
    Session Data

    Dynamically changing the content of a web page when using SD4 is a bit of a challenge.
    In this example, clicking one of the two buttons changes the photo on the second page. This change is made by using the browser Session Storage.
    The first page will write the location of the photo in the storage.
    The second page checks if a location has been set and in that case loads the photo from this location. If no location is set, the default image is displayed.
    Note that this only works if session storage is both supported and available.

  • videocam
    SVG Animation

    Thanks to CSS, some parts in these Scalable Vector Graphics can move. However, it is something that goes beyond the capabilities of SD4. You have to code for this yourself.

    The SVG is the content of an HTML Element. Some parts in this SVG are grouped together and provided with an identifier. In an extra CSS file, these groups are animated using key frames and transformations.

  • wysiwyg
    Mega Menus (all frameworks)

    Three different versions of a large menu.
    The submenu appears on hovering.

    The demo shows one, based on the Foundation Framework.
    The zip-file, available under download, contains examples for Bootstrap 4, Foundation and Materialize.

  • grid_on
    Grid in action

    The menu in this demo is built only with a grid and some anchor elements.

    The multicolored part shows a different grid.
    Most of the elements on that grid are placed with named areas.
    However, elements associated with such named areas can not overlap.
    To accomplish that, the line-based method must be used. That is how the three transparent elements are placed on this second grid.

    The layout of both grids changes at a breakpoint at 993px

    A fallback-solution is not implemented. So, don't use IE. 

  • select_all
    Selectors and Hover

    In this demo three independent elements are changing size or color when hovering one of them.
    The hover-effect is implemented with css only.

    Hierarchically the two container and the H1 element are on the same level.
    On the page the H1 element comes before the hoverable div. This order of things makes selecting the H1 to a challenge.
    This selection-problem is solved by making the parent container a flexbox and setting the flex-order of the H1-element to -1. This results in a changed visual order of the elements on the page. Now it is possible to combine different selectors to implement the desired behavior.

  • gradient
    Broken Text, Stroke and Gradient

    Three times a transparent text.
    The first with a stroke and a gradient. The second with only a gradient. Because the display is set to inline, the gradient is only as long as the text is. When the text wraps to a new line the gradient follows. 
    The third text has an image as background (which also wraps to the next line).

    The fourth text seems broken because of the polygons on the span-elements and the text shadows.

  • 3d_rotation
    3D, Perspective and Transformation

    Some threedimensional, colored containers.

    Used CSS-properties: position, perspective, transform, transform-style and transition.

  • read_more
    Reading text from file

    The demo shows a title, a text and an image. The content of text-files is dynamically read from the server and shown in a H2-element and a paragraph. For reading the text files a webserver is needed, while the jQuery load-function uses AJAX.
    If this demo is run locally on your computer without a webserver only the image is loaded correctly into the HTML page.

  • play_circle_filled
    Video element with custom controls

    The controls of the HTML Video Element are styled by the web browser. Each browser has it's own method of doing that. So, if you want to change the style of the video-controls you have to build your own custom controls. On MDN is an example on how to do that. In the attached file you find an implementation of this example built with Site Designer.

  • book
    Read this before downloading

    The software found on this website is for educational purposes only. It is not intended for commercial use or for use in production environments. The software is provided "as-is" and all warranties, expressed or implied, are disclaimed.
    Learn from it, enjoy the challenge of improving it, use it as you please, but use it at your own risk.

More to come ...