@drewbot/sass-flexbox-grid/app/scripts/content/overview.js

A responsive sass grid library built with flexbox

var overviewCollection = [
  {
    sectionId: 'responsive',
    codeBlockId: 'responsiveExample',
    title: 'Responsive and Fluid',
    description: 'Responsive modifiers let you define column sizes, offsets, alignment and distribution at xs, sm, md & lg viewport widths. Use the row class to define an outer row of columns and then place columns inside of rows.',
    hasLink: true,
    href: '/views/classes.html',
    linkContent: 'See all classes'
  },
  {
    sectionId: 'offsets',
    codeBlockId: 'offsetsExample',
    title: 'Offsets',
    description: 'Offset a column.',
    hasLink: false,
    href: '',
    linkContent: ''
  },
  {
    sectionId: 'autoWidth',
    codeBlockId: 'autoWidthExample',
    title: 'Auto Width',
    description: 'Add any number of auto sizing columns to a row. Let the grid figure it out.',
    hasLink: false,
    href: '',
    linkContent: ''
  },
  {
    sectionId: 'alignment',
    codeBlockId: 'alignmentExample',
    title: 'Alignment',
    description: 'Add classes to align elements to the start or end of a row as well as the top, bottom, or center of a column.',
    hasLink: true,
    href: '/views/classes.html',
    linkContent: 'See all classes'
  },
  {
    sectionId: 'distribution',
    codeBlockId: 'distributionExample',
    title: 'Distribution',
    description: 'Add classes to distribute the contents of a row or column.',
    hasLink: false,
    href: '',
    linkContent: ''
  },
  {
    sectionId: 'reorder',
    codeBlockId: 'reorderExample',
    title: 'Reordering',
    description: 'Add classes to reorder columns.',
    hasLink: false,
    href: '',
    linkContent: ''
  },
  {
    sectionId: 'reverse',
    codeBlockId: 'reverseExample',
    title: 'Reversing',
    description: 'Add a class to reverse columns or column content.',
    hasLink: false,
    href: '',
    linkContent: ''
  },
  {
    sectionId: 'eqHeight',
    codeBlockId: 'eqHeightExample',
    title: 'Column Height Equalizer',
    description: 'By default, flexbox stretches each flex item to match the height of it\'s sibling. The .natural-height row utility class will make each column\'s height match it\'s content, giving the developer control of the behavior.',
    hasLink: false,
    href: '',
    linkContent: ''
  },
  {
    sectionId: 'nested',
    codeBlockId: 'nestedExample',
    title: 'Nested Grids',
    description: 'Nest grids inside grids inside grids.',
    hasLink: false,
    href: '',
    linkContent: ''
  },
  {
    sectionId: 'visibility',
    codeBlockId: 'visibilityExample',
    title: 'Visibility',
    description: 'Visibility classes allow for responsive showing and hiding of content.',
    hasLink: true,
    href: '/views/classes.html',
    linkContent: 'See all classes'
  },
  {
    sectionId: 'variables',
    codeBlockId: 'variablesExample',
    title: 'Variables',
    description: 'Customizable Sass variables allow you to create a grid and responsive framework to meet your needs. You can easily change the number of columns in your grid from the default 12. Update your breakpoint ranges by adjusting these variables and all of the media queries, classes and mixins will update accordingly.',
    hasLink: true,
    href: '/views/variables.html',
    linkContent: 'See all variables'
  },
  {
    sectionId: 'mixins',
    codeBlockId: 'mixinsExample',
    title: 'Mixins',
    description: 'Mixins are available for every Sass Flexbox Grid set of delarations.',
    hasLink: true,
    href: '/views/mixins.html',
    linkContent: 'See all mixins'
  }
];

module.exports = overviewCollection;