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!
  

  View DemoDownload
• 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 ...
  

  View DemoDownload
• 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.

  View DemoDownload
• 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 DemoDownload
• 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.

  View DemoDownload
• 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.
  

  View DemoDownload
• 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.
  

  View DemoDownload
• 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.
  

  View DemoDownload
• 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.
  

  View DemoDownload
• 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.

  View DemoDownload
• 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.
  

  View DemoDownload
• 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.

  View DemoDownload
• 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. 
  

  View DemoDownload
• 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.

  View DemoDownload
• 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.

  View DemoDownload
• 3d_rotation

  3D, Perspective and Transformation
  

  Some threedimensional, colored containers.
  
  Used CSS-properties: position, perspective, transform, transform-style and transition.
  

  View DemoDownload
• 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.
  
  

  View DemoDownload
• 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.
  

  View DemoDownload

• 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.