or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

css-components.mdform-validation.mdgrid-systems.mdindex.mdjavascript-components.mdscss-mixins.mdutility-functions.md
tile.json

index.mddocs/

Foundation Sites

Foundation Sites is the most advanced responsive front-end framework in the world. It provides a comprehensive toolkit for building modern websites and applications, including a fully customizable responsive grid system, extensive SCSS mixins and utilities, commonly used JavaScript plugins for interactive components, and built-in accessibility support.

Package Information

  • Package Name: foundation-sites
  • Package Type: npm
  • Language: JavaScript/TypeScript (with Sass/SCSS)
  • Installation: npm install foundation-sites

Core Imports

ES6 Modules:

import Foundation from 'foundation-sites';
// Or import specific components
import { Dropdown, Reveal, Tabs } from 'foundation-sites';

CommonJS:

const Foundation = require('foundation-sites');
// Initialize Foundation on the page
$(document).foundation();

CSS/SCSS:

@import 'node_modules/foundation-sites/scss/foundation';
@include foundation-everything;

Basic Usage

import Foundation, { Dropdown, Reveal } from 'foundation-sites';

// Initialize all Foundation components on the page
$(document).foundation();

// Or initialize specific components
new Foundation.Dropdown($('#my-dropdown'));
new Foundation.Reveal($('#my-modal'));

// Access utilities
Foundation.MediaQuery.current; // Get current breakpoint
Foundation.Box.GetDimensions($('#element')); // Get element dimensions

Architecture

Foundation Sites is built around several core systems:

  • CSS/SCSS Framework: Grid systems, typography, and component styling with extensive customization variables
  • JavaScript Plugin System: Modular components that can be initialized individually or collectively
  • Utility System: Helper functions for common tasks like positioning, media queries, and element manipulation
  • Responsive Design: Mobile-first approach with configurable breakpoints and responsive utilities
  • Accessibility: Built-in ARIA attributes, keyboard navigation, and screen reader support

Capabilities

Grid Systems

Foundation provides two flexible grid systems for responsive layouts - the standard Flexbox grid and the newer XY Grid system.

// XY Grid Classes
.grid-container { /* Container with max-width */ }
.grid-x { /* Horizontal grid wrapper */ }
.grid-y { /* Vertical grid wrapper */ }
.cell { /* Grid cell */ }
.auto { /* Auto-sizing cell */ }
.shrink { /* Shrink-to-content cell */ }
.small-*, .medium-*, .large-* { /* Responsive sizing */ }

Grid Systems

CSS Components

Comprehensive library of styled components including buttons, forms, navigation menus, cards, and more.

// Key Component Classes
.button { /* Button component */ }
.accordion { /* Accordion wrapper */ }
.callout { /* Callout component */ }
.card { /* Card component */ }
.dropdown-pane { /* Dropdown content */ }
.menu { /* Menu component */ }
.off-canvas { /* Off-canvas menu */ }
.reveal { /* Modal component */ }
.tabs { /* Tab navigation */ }
.tooltip { /* Tooltip styling */ }

CSS Components

JavaScript Components

Interactive components that add behavior to your HTML elements with extensive configuration options.

// Core Foundation Object
Foundation.plugin(plugin: Object, name: string): void;
Foundation.reInit(plugins?: string | Array<string>): void;
Foundation.reflow(elem: Object, plugins?: string | Array<string>): void;

// Component Classes
class Dropdown {
  constructor(element: JQuery, options?: IDropdownOptions);
  open(): void;
  close(): void;
  toggle(): void;
}

class Reveal {
  constructor(element: JQuery, options?: IRevealOptions);
  open(): void;
  close(): void;
  toggle(): void;
}

class Tabs {
  constructor(element: JQuery, options?: ITabsOptions);
  selectTab(element: JQuery | string): void;
}

class Orbit {
  constructor(element: JQuery, options?: IOrbitOptions);
  geoSync(): void;
  changeSlide(isLTR: boolean, chosenSlide?: JQuery, idx?: number): void;
}

class Tooltip {
  constructor(element: JQuery, options?: ITooltipOptions);
  show(): void;
  hide(): void;
  toggle(): void;
}

class Magellan {
  constructor(element: JQuery, options?: IMagellanOptions);
  calcPoints(): void;
  scrollToLoc(location: string): void;
  reflow(): void;
}

class OffCanvas {
  constructor(element: JQuery, options?: IOffCanvasOptions);
  open(event?: Event, trigger?: JQuery): void;
  close(cb?: Function): void;
  toggle(event?: Event, trigger?: JQuery): void;
  reveal(isRevealed: boolean): void;
}

class Sticky {
  constructor(element: JQuery, options?: IStickyOptions);
  _calc(checkSizes: boolean, scroll: number): boolean;
  _removeSticky(topOrBottom?: boolean): void;
  _setSizes(cb?: Function): void;
  _setSticky(): void;
}

class Slider {
  constructor(element: JQuery, options?: ISliderOptions);
  _setHandlePos($hndl: JQuery, location: number, noInvert?: boolean, cb?: Function): boolean;
  _setValues($handle: JQuery, location: number): void;
  _handleEvent(e: Event, $handle: JQuery, dimension: number): void;
}

class Toggler {
  constructor(element: JQuery, options?: ITogglerOptions);
  toggle(): void;
  _updateARIA(isOn: boolean): void;
}

class Accordion {
  constructor(element: JQuery, options?: IAccordionOptions);
  down($target: JQuery, firstTime: boolean): void;
  up($target: JQuery): void;
  toggle($target: JQuery): void;
}

class AccordionMenu {
  constructor(element: JQuery, options?: IAccordionMenuOptions);
  down($target: JQuery, firstTime: boolean): void;
  up($target: JQuery): void;
  toggle($target: JQuery): void;
  hideAll(): void;
  showAll(): void;
}

JavaScript Components

Form Validation

Robust form validation system with built-in patterns and custom validator support.

class Abide {
  constructor(element: JQuery, options?: IAbideOptions);
  validateForm(): boolean;
  validateInput(element: JQuery): boolean;
  resetForm(): void;
  enableValidation(): void;
  disableValidation(): void;
}

interface IAbideOptions {
  validateOn?: string | null;
  liveValidate?: boolean;
  patterns?: IAbidePatterns;
  validators?: any;
}

Form Validation

Utility Functions

JavaScript utilities for common tasks like positioning, media queries, keyboard handling, and element manipulation.

// Media Query Utilities
Foundation.MediaQuery.current: string;
Foundation.MediaQuery.atLeast(size: string): boolean;
Foundation.MediaQuery.get(size: string): string | null;

// Box Utilities  
Foundation.Box.GetDimensions(element: Object): Object;
Foundation.Box.ImNotTouchingYou(element: Object, parent?: Object): boolean;

// Keyboard Utilities
Foundation.Keyboard.parseKey(event: any): string;
Foundation.Keyboard.findFocusable(element: JQuery): Object;
Foundation.Keyboard.trapFocus(element: JQuery): void;

Utility Functions

SCSS Mixins and Functions

Powerful Sass mixins and functions for custom component creation and responsive design.

// Breakpoint System
@mixin breakpoint($value) { /* Responsive media queries */ }
@function breakpoint($val) { /* Get breakpoint value */ }

// Component Mixins
@mixin foundation-button; /* Include button styles */
@mixin foundation-grid; /* Include grid system */
@mixin foundation-everything($flex: true); /* Include all components */

// Utility Functions
@function rem-calc($values); /* Convert to rem units */
@function strip-unit($num); /* Remove unit from value */

SCSS Mixins and Functions

Global Types

interface Foundation {
  version: string;
  plugin(plugin: Object, name: string): void;
  registerPlugin(plugin: Object, name?: string): void;
  unregisterPlugin(plugin: Object): void;
  reInit(plugins?: Array<any>): void;
  reflow(elem: Object, plugins?: Array<string> | string): void;
  rtl(): boolean;
  GetYoDigits(length: number, namespace?: string): string;
  RegExpEscape(str: string): string;
  transitionend(element: JQuery): any;
  onLoad(elem: any, handler: any): string;
}

// jQuery Extension
interface JQuery {
  foundation(method?: string | Array<any>, ...args: any[]): JQuery;
}

// Common Option Interfaces
interface IDropdownOptions {
  hoverDelay?: number;
  hover?: boolean;
  vOffset?: number;
  hOffset?: number;
  position?: string;
  alignment?: string;
  closeOnClick?: boolean;
  trapFocus?: boolean;
  autoFocus?: boolean;
}

interface IRevealOptions {
  animationIn?: string;
  animationOut?: string;
  showDelay?: number;
  hideDelay?: number;
  closeOnClick?: boolean;
  closeOnEsc?: boolean;
  multipleOpened?: boolean;
  fullScreen?: boolean;
  overlay?: boolean;
  appendTo?: string;
}

interface ITabsOptions {
  deepLink?: boolean;
  autoFocus?: boolean;
  wrapOnKeys?: boolean;
  matchHeight?: boolean;
  activeCollapse?: boolean;
}

interface IOrbitOptions {
  bullets?: boolean;
  navButtons?: boolean;
  autoPlay?: boolean;
  timerDelay?: number;
  infiniteWrap?: boolean;
  swipe?: boolean;
  pauseOnHover?: boolean;
}

interface ITooltipOptions {
  hoverDelay?: number;
  fadeInDuration?: number;
  fadeOutDuration?: number;
  position?: string;
  alignment?: string;
  showOn?: string;
  template?: string;
  allowHtml?: boolean;
}

interface IMagellanOptions {
  animationDuration?: number;
  animationEasing?: string;  
  threshold?: number;
  activeClass?: string;
  deepLinking?: boolean;
  updateHistory?: boolean;
  offset?: number;
}

interface IOffCanvasOptions {
  closeOnClick?: boolean;
  contentOverlay?: boolean;
  contentId?: string | null;
  nested?: boolean;
  contentScroll?: boolean;
  transitionTime?: string;
  transition?: string;
  forceTo?: string | null;
  isRevealed?: boolean;
  revealOn?: string | null;
  inCanvasOn?: string | null;
  autoFocus?: boolean;
  revealClass?: string;
  trapFocus?: boolean;
}

interface IStickyOptions {
  container?: string;
  stickTo?: string;
  anchor?: string;
  topAnchor?: string;
  btmAnchor?: string;
  marginTop?: number;
  marginBottom?: number;
  stickyClass?: string;
  containerClass?: string;
  checkEvery?: number;
}

interface ISliderOptions {
  start?: number;
  end?: number;
  step?: number;
  initialStart?: number;
  initialEnd?: number;
  binding?: boolean;
  clickSelect?: boolean;
  vertical?: boolean;
  draggable?: boolean;
  disabled?: boolean;
  doubleSided?: boolean;
  decimal?: number;
  moveTime?: number;
  disabledClass?: string;
  invertVertical?: boolean;
  changedDelay?: number;
  nonLinearBase?: number;
  positionValueFunction?: string | Function;
}

interface ITogglerOptions {
  animate?: boolean;
  toggler?: string;
  input?: string;
  animationIn?: string;
  animationOut?: string;
  checkClass?: string;
}

interface IAccordionOptions {
  slideSpeed?: number;
  multiExpand?: boolean;
  allowAllClosed?: boolean;
  deepLink?: boolean;
  deepLinkSmudge?: boolean;
  deepLinkSmudgeDelay?: number;
  deepLinkSmudgeOffset?: number;
  updateHistory?: boolean;
}

interface IAccordionMenuOptions {
  parentLink?: boolean;
  slideSpeed?: number;
  submenuToggle?: boolean;
  submenuToggleText?: string;
  multiOpen?: boolean;
}