Epicor

key: Epicor Cloud ERP Technology Trends Solution

Technology Trends with Cloud ERP -- epicor.com

Epicor Solution Overview -- epicor.com

---

InforPath

key: Sharepoint InfoPath future replacement PowerApps

Microsoft on the Future of InfoPath -- blog.formotus.com

PowerApps Replacing InfoPath: 3 Things to Know -- blog.formotus.com

The Future of InfoPath - Edge Pereira

What is the Replacement for InfoPath? - social msdn
PowerApps is the replacement for InfoPath until it's retired. It continues to work with current functionality in SharePoint 2016 and Office 365.
Flow is the next generation of workflow's in SharePoint and across the Office 365/Microsoft ecosystem. It does a great job of integrating information across a lot of applications.
Steve Pucelik - Microsoft Sr Premier Field Engineer
Proposed as answer by spucelikMicrosoft employee Wednesday, May 31, 2017 3:35 PM

Five reasons why you need to migrate your infopath forms - skybow.com
XML forms data
Finally, for more complex scenarios, including master–detail relations and relational data, it is not possible to create InfoPath forms on top of SharePoint lists. In such scenarios, the only possibility is to create forms on top of SharePoint form libraries, where the data is stored in XML files. The problem with this approach is that the data is effectively locked in those files, making the automated transfer or migration of that data impossible. None of the standard third-party migration tools supports migration from InfoPath XML forms into any other format, which leaves the development of custom PowerShell scripts as the only option to get that data out of the forms libraries. By continuing to use the form libraries and InfoPath XML forms, more and more ‘locked’ data will be collected, making the inevitable final death of InfoPath a migration nightmare.

Depending on your requirements and timeframes, Microsoft PowerApps, Microsoft Flow and even the new Office forms might meet your requirements. https://techcommunity.microsoft.com/t5/SharePoint/InfoPath-alternative/td-p/83803

---

MS Flow and PowerApps

key: Microsoft Flow, MS PowerApps, replacement for InfoPath

introducing Microsoft Flow and announcing the public preview of PowerApps -- micorsoft.com

---

#4

IT Business Analysts Look Beyond One Project

A fourth way that IT Business Analyst roles are expanding is by working on more than one project at a time. Historically, projects were larger in scope and fragile systems required full-time focus on analyzing and specifying requirements for one system inside one project. With the introduction of more fully-featured out-of-the-box systems, scope can be handled in different ways. And with the introduction of more agile processes, more organizations are breaking down big projects so that they can be delivered incrementally.

For the IT Business Analyst, this means you might work on many projects at one time or have the opportunity to participate in pre-project analysis work that helps enable informed decision-making about what investments to make in technology. In this way, you are involved in a more strategic role in addition to your tactical role on projects.

---

Link to the original article

In a business-focused role, the responsibilities are:

• Understanding the needs of multiple stakeholders
• Facilitating the negotiation of requirements amongst multiple stakeholders
• Identifying the current- and future-state business processes
• Helping the business stakeholders envision the future and how their work will need to change to support the future

In a technology-focused role, the responsibilities are:

• Creating, analyzing, and validating detailed functional specifications
• Facilitating design sessions with the implementation team to define the solution
• Delivering elements of systems design, including data migration rules, business rules, wireframes, or other detailed deliverables

Link to the original article
Any requirement which specifies how the system performs a certain function.
In other words, a non-functional requirement will describe how a system should behave and what limits there are on its functionality.
Non-functional requirements generally specify the system’s quality attributes or characteristics, for example: “Modified data in a database should be updated for all users accessing it within 2 seconds.”

1. Security
2. Data Integrity
3. Usability
4. Performance – for example: response time, throughput, utilization, static volumetric
5. Scalability
6. Capacity
7. Availability
8. Reliability
9. Recoverability
10. Maintainability
11. Serviceability
12. Interoperability
13. Manageability
14. Regulatory
15. Environmental

Interdum adipiscing odio

Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent fringilla quis tincidunt felis sagittis eget tempus euismod. Ante ipsum primis vestibulum.

Non faucibus ornare mi ut ante

Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent fringilla quis tincidunt felis sagittis eget tempus euismod. Ante ipsum primis vestibulum.

Felis amet dolore viverra

Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent fringilla quis tincidunt felis sagittis eget tempus euismod. Ante ipsum primis vestibulum.

Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent fringilla quis tincidunt felis sagittis eget tempus euismod. Ante ipsum primis vestibulum.

i = 0;

while (!deck.isInOrder()) {
    print 'Iteration ' + i;
    deck.shuffle();
    i++;
}

print 'It took ' + i + ' iterations to sort the deck.';

Style #1

• Twitter
• Facebook
• Instagram
• Github
• Dribbble

Style #2

• Twitter
• Facebook
• Instagram
• Github
• Dribbble

• Special
• Default

• Big
• Default
• Small

• Fit
• Fit
• Fit
• Fit

• Fit + Small
• Fit + Small
• Fit + Small
• Fit + Small

• Icon
• Icon

• Special
• Default

Default

• Default
• Default

Small

• Small
• Small

Vertical

• Default
• Default

Vertical + Small

• Small
• Small

Vertical + Fit

• Default
• Default

Vertical + Small + Fit

• Small
• Small

Name

Email

Department

- Category - Manufacturing Shipping Administration Human Resources

Low Priority

Normal Priority

High Priority

Message

Email me a copy of this message

I am a human and not a robot

Default

Alternate

Fit

Left

Lorem ipsum dolor sit accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Vestibulum ante ipsum primis in faucibus magna blandit adipiscing eu felis iaculis volutpat lorem ipsum dolor sit amet dolor consequat.

Right

Lorem ipsum dolor sit accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Vestibulum ante ipsum primis in faucibus magna blandit adipiscing eu felis iaculis volutpat lorem ipsum dolor sit amet dolor consequat.

HTML

<section class="banner style(N) (optional modifiers)">
  <div class="content">
    (content)
  </div>
  <div class="image">
    <img src="(image URL)" alt="Alternate text" />
  </div>
</section>

---

banner style1

A 50/50 vertical split between content and an image. Supports these modifiers:

fullscreen	Fills the height of the screen.
orient-left	Shows content on the left, image on the right.
orient-right	Shows content on the right, image on the left.
content-align-left	Left-aligns content.
content-align-center	Center-aligns content.
content-align-right	Right-aligns content.
image-position-left	Left-positions image.
image-position-center	Center-positions image.
image-position-right	Right-positions image.
onload-content-fade-up	Fades content up on page load.
onload-content-fade-down	Fades content down on page load.
onload-content-fade-left	Fades content left on page load.
onload-content-fade-right	Fades content right on page load.
onload-content-fade-in	Fades in content on page load.
onload-image-fade-in	Fades in image on page load.
onscroll-content-fade-up	Fades content up on page scroll.
onscroll-content-fade-down	Fades content down on page scroll.
onscroll-content-fade-left	Fades content left on page scroll.
onscroll-content-fade-right	Fades content right on page scroll.
onscroll-content-fade-in	Fades in content on page scroll.
onscroll-image-fade-in	Fades in image on page scroll.
invert	Inverts the color scheme.
color1	Uses background color #1.
color2	Uses background color #2.
color3	Uses background color #3.
color4	Uses background color #4.
color5	Uses background color #5.
color6	Uses background color #6.
color7	Uses background color #7.

---

banner style2

Boxed-in content set against an image background, and attached to either side of the screen or centered. Supports these modifiers:

fullscreen	Fills the height of the screen.
orient-left	Attaches the content box to the left edge of the screen.
orient-center	Places the content box in the center of the screen.
orient-right	Attaches the content box to the right edge of the screen.
content-align-left	Left-aligns content.
content-align-center	Center-aligns content.
content-align-right	Right-aligns content.
image-position-left	Left-positions image.
image-position-center	Center-positions image.
image-position-right	Right-positions image.
onload-content-fade-up	Fades content up on page load.
onload-content-fade-down	Fades content down on page load.
onload-content-fade-left	Fades content left on page load.
onload-content-fade-right	Fades content right on page load.
onload-content-fade-in	Fades in content on page load.
onload-image-fade-in	Fades in image on page load.
onscroll-content-fade-up	Fades content up on page scroll.
onscroll-content-fade-down	Fades content down on page scroll.
onscroll-content-fade-left	Fades content left on page scroll.
onscroll-content-fade-right	Fades content right on page scroll.
onscroll-content-fade-in	Fades in content on page scroll.
onscroll-image-fade-in	Fades in image on page scroll.
invert	Inverts the color scheme.
color1	Uses background color #1.
color2	Uses background color #2.
color3	Uses background color #3.
color4	Uses background color #4.
color5	Uses background color #5.
color6	Uses background color #6.
color7	Uses background color #7.

---

banner style3

An image within a circular frame placed to the side of content. Supports these modifiers:

fullscreen	Fills the height of the screen.
orient-left	Places the content on the left, image on the right.
orient-right	Places the content on the right, image on the left.
content-align-left	Left-aligns content.
content-align-center	Center-aligns content.
content-align-right	Right-aligns content.
image-position-left	Left-positions image.
image-position-center	Center-positions image.
image-position-right	Right-positions image.
onload-content-fade-up	Fades content up on page load.
onload-content-fade-down	Fades content down on page load.
onload-content-fade-left	Fades content left on page load.
onload-content-fade-right	Fades content right on page load.
onload-content-fade-in	Fades in content on page load.
onload-image-fade-up	Fades image up on page load.
onload-image-fade-down	Fades image down on page load.
onload-image-fade-left	Fades image left on page load.
onload-image-fade-right	Fades image right on page load.
onload-image-fade-in	Fades in image on page load.
onscroll-content-fade-up	Fades content up on page scroll.
onscroll-content-fade-down	Fades content down on page scroll.
onscroll-content-fade-left	Fades content left on page scroll.
onscroll-content-fade-right	Fades content right on page scroll.
onscroll-content-fade-in	Fades in content on page scroll.
onscroll-image-fade-up	Fades image up on page scroll.
onscroll-image-fade-down	Fades image down on page scroll.
onscroll-image-fade-left	Fades image left on page scroll.
onscroll-image-fade-right	Fades image right on page scroll.
onscroll-image-fade-in	Fades in image on page scroll.
invert	Inverts the color scheme.
color1	Uses background color #1.
color2	Uses background color #2.
color3	Uses background color #3.
color4	Uses background color #4.
color5	Uses background color #5.
color6	Uses background color #6.
color7	Uses background color #7.

---

banner style4

An image within a phone-shaped frame placed to the side of content. Supports these modifiers:

fullscreen	Fills the height of the screen.
iphone	Uses iPhone styling for image frame.
android	Uses Android styling for image frame.
orient-left	Places the content on the left, image on the right.
orient-right	Places the content on the right, image on the left.
content-align-left	Left-aligns content.
content-align-center	Center-aligns content.
content-align-right	Right-aligns content.
image-position-left	Left-positions image.
image-position-center	Center-positions image.
image-position-right	Right-positions image.
onload-content-fade-up	Fades content up on page load.
onload-content-fade-down	Fades content down on page load.
onload-content-fade-left	Fades content left on page load.
onload-content-fade-right	Fades content right on page load.
onload-content-fade-in	Fades in content on page load.
onload-image-fade-up	Fades image up on page load.
onload-image-fade-down	Fades image down on page load.
onload-image-fade-left	Fades image left on page load.
onload-image-fade-right	Fades image right on page load.
onload-image-fade-in	Fades in image on page load.
onscroll-content-fade-up	Fades content up on page scroll.
onscroll-content-fade-down	Fades content down on page scroll.
onscroll-content-fade-left	Fades content left on page scroll.
onscroll-content-fade-right	Fades content right on page scroll.
onscroll-content-fade-in	Fades in content on page scroll.
onscroll-image-fade-up	Fades image up on page scroll.
onscroll-image-fade-down	Fades image down on page scroll.
onscroll-image-fade-left	Fades image left on page scroll.
onscroll-image-fade-right	Fades image right on page scroll.
onscroll-image-fade-in	Fades in image on page scroll.
invert	Inverts the color scheme.
color1	Uses background color #1.
color2	Uses background color #2.
color3	Uses background color #3.
color4	Uses background color #4.
color5	Uses background color #5.
color6	Uses background color #6.
color7	Uses background color #7.

---

banner style5

Content set directly against an image background. Supports these modifiers:

fullscreen	Fills the height of the screen.
content-align-left	Left-aligns content.
content-align-center	Center-aligns content.
content-align-right	Right-aligns content.
image-position-left	Left-positions image.
image-position-center	Center-positions image.
image-position-right	Right-positions image.
onload-content-fade-up	Fades content up on page load.
onload-content-fade-down	Fades content down on page load.
onload-content-fade-left	Fades content left on page load.
onload-content-fade-right	Fades content right on page load.
onload-content-fade-in	Fades in content on page load.
onload-image-fade-in	Fades in image on page load.
onscroll-content-fade-up	Fades content up on page scroll.
onscroll-content-fade-down	Fades content down on page scroll.
onscroll-content-fade-left	Fades content left on page scroll.
onscroll-content-fade-right	Fades content right on page scroll.
onscroll-content-fade-in	Fades in content on page scroll.
onscroll-image-fade-in	Fades in image on page scroll.
invert	Inverts the color scheme.
color1	Uses background color #1.
color2	Uses background color #2.
color3	Uses background color #3.
color4	Uses background color #4.
color5	Uses background color #5.
color6	Uses background color #6.
color7	Uses background color #7.

HTML

<section class="spotlight style(N) (optional modifiers)">
  <div class="content">
    (content)
  </div>
  <div class="image">
    <img src="(image URL)" alt="Alternate text" />
  </div>
</section>

---

spotlight style1

A 30/70 (or 70/30, depending on orientation) vertical split between content and an image. Supports these modifiers:

orient-left	Shows content on the left, image on the right.
orient-right	Shows content on the right, image on the left.
content-align-left	Left-aligns content.
content-align-center	Center-aligns content.
content-align-right	Right-aligns content.
image-position-left	Left-positions image.
image-position-center	Center-positions image.
image-position-right	Right-positions image.
onload-content-fade-up	Fades content up on page load.
onload-content-fade-down	Fades content down on page load.
onload-content-fade-left	Fades content left on page load.
onload-content-fade-right	Fades content right on page load.
onload-content-fade-in	Fades in content on page load.
onload-image-fade-in	Fades in image on page load.
onscroll-content-fade-up	Fades content up on page scroll.
onscroll-content-fade-down	Fades content down on page scroll.
onscroll-content-fade-left	Fades content left on page scroll.
onscroll-content-fade-right	Fades content right on page scroll.
onscroll-content-fade-in	Fades in content on page scroll.
onscroll-image-fade-in	Fades in image on page scroll.
invert	Inverts the color scheme.
color1	Uses background color #1.
color2	Uses background color #2.
color3	Uses background color #3.
color4	Uses background color #4.
color5	Uses background color #5.
color6	Uses background color #6.
color7	Uses background color #7.

---

spotlight style2

An image within a circular frame placed to the side of content. Supports these modifiers:

orient-left	Places the content on the left, image on the right.
orient-right	Places the content on the right, image on the left.
content-align-left	Left-aligns content.
content-align-center	Center-aligns content.
content-align-right	Right-aligns content.
image-position-left	Left-positions image.
image-position-center	Center-positions image.
image-position-right	Right-positions image.
onload-content-fade-up	Fades content up on page load.
onload-content-fade-down	Fades content down on page load.
onload-content-fade-left	Fades content left on page load.
onload-content-fade-right	Fades content right on page load.
onload-content-fade-in	Fades in content on page load.
onload-image-fade-up	Fades image up on page load.
onload-image-fade-down	Fades image down on page load.
onload-image-fade-left	Fades image left on page load.
onload-image-fade-right	Fades image right on page load.
onload-image-fade-in	Fades in image on page load.
onscroll-content-fade-up	Fades content up on page scroll.
onscroll-content-fade-down	Fades content down on page scroll.
onscroll-content-fade-left	Fades content left on page scroll.
onscroll-content-fade-right	Fades content right on page scroll.
onscroll-content-fade-in	Fades in content on page scroll.
onscroll-image-fade-up	Fades image up on page scroll.
onscroll-image-fade-down	Fades image down on page scroll.
onscroll-image-fade-left	Fades image left on page scroll.
onscroll-image-fade-right	Fades image right on page scroll.
onscroll-image-fade-in	Fades in image on page scroll.
invert	Inverts the color scheme.
color1	Uses background color #1.
color2	Uses background color #2.
color3	Uses background color #3.
color4	Uses background color #4.
color5	Uses background color #5.
color6	Uses background color #6.
color7	Uses background color #7.

---

spotlight style3

An image within a phone-shaped frame placed to the side of content. Supports these modifiers:

orient-left	Places the content on the left, image on the right.
orient-right	Places the content on the right, image on the left.
content-align-left	Left-aligns content.
content-align-center	Center-aligns content.
content-align-right	Right-aligns content.
image-position-left	Left-positions image.
image-position-center	Center-positions image.
image-position-right	Right-positions image.
onload-content-fade-up	Fades content up on page load.
onload-content-fade-down	Fades content down on page load.
onload-content-fade-left	Fades content left on page load.
onload-content-fade-right	Fades content right on page load.
onload-content-fade-in	Fades in content on page load.
onload-image-fade-up	Fades image up on page load.
onload-image-fade-down	Fades image down on page load.
onload-image-fade-left	Fades image left on page load.
onload-image-fade-right	Fades image right on page load.
onload-image-fade-in	Fades in image on page load.
onscroll-content-fade-up	Fades content up on page scroll.
onscroll-content-fade-down	Fades content down on page scroll.
onscroll-content-fade-left	Fades content left on page scroll.
onscroll-content-fade-right	Fades content right on page scroll.
onscroll-content-fade-in	Fades in content on page scroll.
onscroll-image-fade-up	Fades image up on page scroll.
onscroll-image-fade-down	Fades image down on page scroll.
onscroll-image-fade-left	Fades image left on page scroll.
onscroll-image-fade-right	Fades image right on page scroll.
onscroll-image-fade-in	Fades in image on page scroll.
invert	Inverts the color scheme.
color1	Uses background color #1.
color2	Uses background color #2.
color3	Uses background color #3.
color4	Uses background color #4.
color5	Uses background color #5.
color6	Uses background color #6.
color7	Uses background color #7.

---

spotlight style4

Boxed-in content set against an image background, and attached to either side of the screen or centered. Supports these modifiers:

fullscreen	Fills the height of the screen.
halfscreen	Fills half the height of the screen.
orient-left	Attaches the content box to the left edge of the screen.
orient-center	Places the content box in the center of the screen.
orient-right	Attaches the content box to the right edge of the screen.
content-align-left	Left-aligns content.
content-align-center	Center-aligns content.
content-align-right	Right-aligns content.
image-position-left	Left-positions image.
image-position-center	Center-positions image.
image-position-right	Right-positions image.
onload-content-fade-up	Fades content up on page load.
onload-content-fade-down	Fades content down on page load.
onload-content-fade-left	Fades content left on page load.
onload-content-fade-right	Fades content right on page load.
onload-content-fade-in	Fades in content on page load.
onload-image-fade-in	Fades in image on page load.
onscroll-content-fade-up	Fades content up on page scroll.
onscroll-content-fade-down	Fades content down on page scroll.
onscroll-content-fade-left	Fades content left on page scroll.
onscroll-content-fade-right	Fades content right on page scroll.
onscroll-content-fade-in	Fades in content on page scroll.
onscroll-image-fade-in	Fades in image on page scroll.
invert	Inverts the color scheme.
color1	Uses background color #1.
color2	Uses background color #2.
color3	Uses background color #3.
color4	Uses background color #4.
color5	Uses background color #5.
color6	Uses background color #6.
color7	Uses background color #7.

---

spotlight style5

Boxed-in content set against an image background. Supports these modifiers:

fullscreen	Fills the height of the screen.
halfscreen	Fills half the height of the screen.
orient-left	Places the content box on the left of the screen.
orient-center	Places the content box in the center of the screen.
orient-right	Places the content box on the right side of the screen.
content-align-left	Left-aligns content.
content-align-center	Center-aligns content.
content-align-right	Right-aligns content.
image-position-left	Left-positions image.
image-position-center	Center-positions image.
image-position-right	Right-positions image.
onload-content-fade-up	Fades content up on page load.
onload-content-fade-down	Fades content down on page load.
onload-content-fade-left	Fades content left on page load.
onload-content-fade-right	Fades content right on page load.
onload-content-fade-in	Fades in content on page load.
onload-image-fade-in	Fades in image on page load.
onscroll-content-fade-up	Fades content up on page scroll.
onscroll-content-fade-down	Fades content down on page scroll.
onscroll-content-fade-left	Fades content left on page scroll.
onscroll-content-fade-right	Fades content right on page scroll.
onscroll-content-fade-in	Fades in content on page scroll.
onscroll-image-fade-in	Fades in image on page scroll.
invert	Inverts the color scheme.
color1	Uses background color #1.
color2	Uses background color #2.
color3	Uses background color #3.
color4	Uses background color #4.
color5	Uses background color #5.
color6	Uses background color #6.
color7	Uses background color #7.

HTML

<div class="gallery style(N) (optional modifiers)">
  <article>
    <a href="(full image URL)" class="image">
      <img src="(thumbnail image URL)" alt="Alternate text" />
    </a>
    <div class="caption">
      (caption)
    </div>
  </article>
  <article>
    <a href="(full image URL)" class="image">
      <img src="(thumbnail image URL)" alt="Alternate text" />
    </a>
    <div class="caption">
      (caption)
    </div>
  </article>
  <article>
    <a href="(full image URL)" class="image">
      <img src="(thumbnail image URL)" alt="Alternate text" />
    </a>
    <div class="caption">
      (caption)
    </div>
  </article>
  ...
</div>

---

gallery style1

A grid of thumbnails with optional lightbox support. Supports these modifiers:

small	Uses small thumbnails.
medium	Uses medium thumbnails.
big	Uses big thumbnails.
lightbox	Enables lightbox behavior.
onload-fade-in	Fades in thumbnails on page load.
onscroll-fade-in	Fades in thumbnails on page scroll.

---

gallery style2

A carousel of thumbnails with optional lightbox support. Supports these modifiers:

small	Uses small thumbnails.
medium	Uses medium thumbnails.
big	Uses big thumbnails.
lightbox	Enables lightbox behavior.
onload-fade-in	Fades in thumbnails on page load.
onscroll-fade-in	Fades in thumbnails on page scroll.

HTML

<div class="items style(N) (size modifier) (optional modifiers)">
  <section>
    (content)
  </section>
  <section>
    (content)
  </section>
  <section>
    (content)
  </section>
  <section>
    (content)
  </section>
  ...
</div>

---

items style1

A grid of items separated by borders.

small	Uses small items.
medium	Uses medium items.
big	Uses big items.
onload-fade-in	Fades in items on page load.
onscroll-fade-in	Fades in items on page scroll.

---

items style2

An outlined grid of items separated by borders.

small	Uses small items.
medium	Uses medium items.
big	Uses big items.
onload-fade-in	Fades in items on page load.
onscroll-fade-in	Fades in items on page scroll.

---

items style3

A borderless grid of items.

small	Uses small items.
medium	Uses medium items.
big	Uses big items.
onload-fade-in	Fades in items on page load.
onscroll-fade-in	Fades in items on page scroll.

HTML

<div class="wrapper (optional modifiers)">
  (content)
</div>

Modifiers