Jump to main content
Cartoon of snippets, adapted from an illustration by illustrations.co.

Snippets

Snippets are simply ready-made components. Often comprising of HTML, CSS and Javascript code. They are designed to be copied into websites, from where they will instantly add useful design or functionality; all editable using WebYep. Each is expertly coded, mobile responsive and cross-browser compatible. Plus they fully comply with all stringent accessibility and privacy law requirements. Making them perfect for building modern websites.

Finding your way around

Use the links on this page to navigate between the various snippets. Each snippet has its own page. For every snippet, you'll see a description about what it does, a real working example of it, and the code ready for you to copy and paste into your own websites.

Compatibility

All the snippets work with both WebYep 2 and WebYep 3. In addition to bridging these two major versions of WebYep, care has also been taken to ensure they are always compatible with both the free opensource and paid commercial versions of WebYep. The commercial version of WebYep is the same as the free version, except it has the addition of the 'Redactor' rich text editor and a file manager for images and other assets.

Most snippets use the standard WebYep elements; like short text, long text, rich text, markup text, image, attachment and loop. If you've used WebYep before, then you should feel comfortable with using all these snippets. Some have really basic markup, so they're a good learning aid if you're new to web design or development. Of course, they are all opensource and 'hackable'; meaning you can extensively modify and expand them, as needed.

Where to stick yer' code

The location you paste the code into varies greatly, depending on what platform you are using. Your average Atom, Sublime or VS Code editor is likely going to differ to a drag-and-drop page builder. As a rough guide...

  • Most commonly, HTML goes in the main body of the document, where other content already exists.
  • CSS is used for styling things, and either goes between 'style' tags, in the head section of the page, or in separate files ending in a .css file extension.
  • Likewise Javascript either goes between 'script' tags towards the bottom of the page, or in separate files ending in a .js file extension.

Before the snippets can be tested or used in your website, you must ensure the webyep-system directory has been added, with a username and password set in the config-inc.php file. The official WebYep documentation provides an excellent place to learn about setting up WebYep.