WITEFRAME is a mockup of a webpage or an app. It only shows basic building blocks. To see this site in WIREFRAME mode, flick the switch.
EL SAMPO Digital.

Javascript and CSS projects.

Older projects done during the years. Almost all available at TheSamp@Github.

sampSlider

  • Image 1
  • Image 2
  • Image 3
  • Image 4
  • Image 5
  • Image 6

jQuery plug-in, with a nifty little controller dot. Optimised for touch devices and is fully responsive. If you ask me, all the sliders in the internet should be like this one :). Cool controller indicator which won't be hidden under the finger when using the controller dot.

Default settings:

autosize: true,
width: 900,
height: 600, (Quite pointless setting as it height is calculated from width with aspectratio)
aspectratio: false, (Overrides autosize. If false it is calculated.)
autoplay: 0, (0 for no autoplay or delay in milliseconds)
dragonbar:false, (true to show drag-navigation)
arrows:true, (Show arrows)
loop: true, //Boolean, infinite loop
slidespeed: 500,
startslide: 1,// 1 and up
gototop: false, //boolean, if automatically scroll to top of slider
afterinit: call back function

Example configuration

Running example below.

var slida = jQuery('#ss-projects').sampSlider({
    aspectratio:1.8,
    autosize: true,
    autoplay: 4000,
    slidespeed: 500,
    dragonbar: true,
    startslide: 1
});

sampGallery

Image 1 Image 2 Image 3 Image 4 Image 5 Image 6 Image 7 Image 8

jQuery plug-in. Not really a gallery, simply an image viewer.

Default settings:

scrolltoitem: true, (Scroll page to opened image)
scrolloffset: {top:0}, (if needed to add top offset for example when having a fixed header)
animationspeed: 1000, (Scroll speed)
thumbscaled: true, (Use thumbs as background-images and scale them.)
afterinit: callback function after gallery is built.

Example configuration

Running example below.

jQuery('#sg-projects').sampGallery();

sampIcons

CSS/PNG icon system. Using a sprite.

  • CSS
  • SCSS
  • HTML
  • Adobe Illustrator
  • Git
  • PNG
  • Sprite

sampGrid

Ever needed just a simple CSS grid, something that doesn't include margins and paddings and other bloated stuff? Here you go. Just a grid without bells and whistles..

  • Grid
  • CSS
  • SCSS
  • HTML
  • CSS
  • SCSS
  • HTML
  • Adobe Illustrator
  • Git
  • PNG
  • Sprite
  • Grid
  • CSS
  • SCSS
  • HTML

sampCookie

Customisable cookie consent script.

  • Cookie
  • Consent
  • CSS
  • SCSS
  • HTML
  • Javascript
  • Git

sampElements

Prestyled CSS element collection for easy prototyping in browser.

  • CSS
  • SCSS
  • HTML
  • Git
  • Cookie
  • Consent
  • CSS
  • SCSS
  • HTML
  • Javascript
  • Git
  • CSS
  • SCSS
  • HTML
  • Git