CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-foundation-sites

The most advanced responsive front-end framework in the world with CSS components, JavaScript plugins, and Sass utilities.

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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;
}
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/foundation-sites@6.9.x
Publish Source
CLI
Badge
tessl/npm-foundation-sites badge