diff --git a/doc/styleguide/item-flexblock-activity.html b/doc/styleguide/item-flexblock-activity.html new file mode 100644 index 0000000..5318c82 --- /dev/null +++ b/doc/styleguide/item-flexblock-activity.html @@ -0,0 +1,218 @@ + + + + + WebSlides + + + + + + + + + + + +
+
+

WebSlides

+
+ +
+
+ +
+ +
+

+ + + 2.1 + + #Flexblock.Activity + + + Activity + +

+ +
+

Bla bla bla

+ +
+ +
+ +
+
+ Example +
+ + +
+ +
+
+ +
+ +
+ + Markup + + 
<ul class="flexblock activity">
+  <li>
+    <a href="#" title="UX Designer at ACME">
+      <div>
+        <p class="year">
+          2016
+        </p>
+        <p class="title">
+          UX Designer at ACME
+        </p>
+        <p class="summary">
+          This is a job description for the UX Designer role at ACME. Be concise. Content like a tweet: 2-3 lines recommended.
+        </p>
+      </div>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="14 world famous buildings to inspire you">
+      <p class="year">
+        2 mins ago
+      </p>
+      <p class="title">
+        14 world famous buildings to inspire you
+      </p>
+      <p class="summary">
+        From the Colosseum to the Chrysler building, get a dose of inspiration from 14 of the world's most famous buildings.
+      </p>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="Co-Founder of GAMMA">
+      <p class="year">
+        2013
+      </p>
+      <p class="title">
+        Co-Founder of GAMMA
+      </p>
+      <p class="summary">
+        The culture within an organization is an essential part for success. This is a job description. Be concise. 2-3 lines recommended.
+      </p>
+    </a>
+  </li>
+</ul>
+
+ +
+ Source: modules/_flexblock-activity.scss, line 5 +
+ +
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-flexblock-blink.html b/doc/styleguide/item-flexblock-blink.html index 5828477..80e4975 100644 --- a/doc/styleguide/item-flexblock-blink.html +++ b/doc/styleguide/item-flexblock-blink.html @@ -57,7 +57,7 @@

- 2.1 + 2.2 #Flexblock.Blink diff --git a/doc/styleguide/item-flexblock-clients.html b/doc/styleguide/item-flexblock-clients.html index b5e84f0..b589105 100644 --- a/doc/styleguide/item-flexblock-clients.html +++ b/doc/styleguide/item-flexblock-clients.html @@ -57,7 +57,7 @@

- 2.2 + 2.3 #Flexblock.Clients diff --git a/doc/styleguide/item-flexblock-features.html b/doc/styleguide/item-flexblock-features.html index d892e61..646f248 100644 --- a/doc/styleguide/item-flexblock-features.html +++ b/doc/styleguide/item-flexblock-features.html @@ -57,7 +57,7 @@

- 2.3 + 2.4 #Flexblock.Features diff --git a/doc/styleguide/item-flexblock-gallery-overlay.html b/doc/styleguide/item-flexblock-gallery-overlay.html index 7453e8d..01bb229 100644 --- a/doc/styleguide/item-flexblock-gallery-overlay.html +++ b/doc/styleguide/item-flexblock-gallery-overlay.html @@ -57,7 +57,7 @@

- 2.4.1 + 2.5.1 #Flexblock.Gallery.Overlay diff --git a/doc/styleguide/item-flexblock-gallery.html b/doc/styleguide/item-flexblock-gallery.html index e1f309b..d0d933b 100644 --- a/doc/styleguide/item-flexblock-gallery.html +++ b/doc/styleguide/item-flexblock-gallery.html @@ -57,7 +57,7 @@

- 2.4 + 2.5 #Flexblock.Gallery diff --git a/doc/styleguide/item-flexblock-metrics.html b/doc/styleguide/item-flexblock-metrics.html index 07a0e1a..24f33aa 100644 --- a/doc/styleguide/item-flexblock-metrics.html +++ b/doc/styleguide/item-flexblock-metrics.html @@ -57,7 +57,7 @@

- 2.5 + 2.6 #Flexblock.Metrics diff --git a/doc/styleguide/item-flexblock-plans.html b/doc/styleguide/item-flexblock-plans.html new file mode 100644 index 0000000..3150dd8 --- /dev/null +++ b/doc/styleguide/item-flexblock-plans.html @@ -0,0 +1,240 @@ + + + + + WebSlides + + + + + + + + + + + +
+
+

WebSlides

+
+ +
+
+ +
+ +
+

+ + + 2.7 + + #Flexblock.Plans + + + Plans + +

+ +
+

Bla bla bla

+ +
+ +
+ +
+
+ Examples +
+ +
+ Default styling +
+ +
+ +
+
+ +
+ .blink +
+
+ block linkable +
+
+ +
+
+
+ +
+ + Markup + + 
<ul class="flexblock plans [modifier class]">
+  <li>
+    <a href="#" title="Purchase">
+      <h2>Basic</h2>
+      <div>
+        <span class="price">Free</span>
+        <p>Good karma. Just the essential features. 100% customizable. Make it yours.</p>
+        <span class="button">Select</span>
+      </div>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="Purchase">
+      <h2>Medium</h2>
+      <div>
+        <span class="price"><sup>$</sup>4,99 <sup>/month</sup></span>
+        <p>Clean markup with popular naming conventions. Minimum effort.</p>
+        <span class="button">Buy Now</span>
+      </div>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="Purchase">
+      <h2>Premium <sup>(save 20%)</sup></h2>
+      <div>
+        <span class="price"><sup>$</sup>40 <sup>/year</sup></span>
+        <p>Prototype faster. Create landings and portfolios. Unlimited projects.</p>
+        <span class="button">Select</span>
+      </div>
+    </a>
+  </li>
+</ul>
+
+ +
+ Source: modules/_flexblock-plans.scss, line 5 +
+ +
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-flexblock-reasons.html b/doc/styleguide/item-flexblock-reasons.html new file mode 100644 index 0000000..5ded118 --- /dev/null +++ b/doc/styleguide/item-flexblock-reasons.html @@ -0,0 +1,152 @@ + + + + + WebSlides + + + + + + + + + + + +
+
+

WebSlides

+
+ +
+
+ +
+ +
+

+ + + 2.8 + + #Flexblock.Reasons + + + Reasons + +

+ +
+

Bla bla bla

+ +
+ +
+ +
+
+ Example +
+ + +
+
    +
  • +

    Why WebSlides? Work better, faster.

    +

    Designers and marketers can now focus on the content. Simply choose a demo and customize it in minutes. Be memorable!

    +
    • +
  • +

    Good karma. Just the essentials and using lovely CSS.

    +

    WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.

    +
    • +
+
+
+ +
+ +
+ + Markup + + 
<ul class="flexblock reasons">
+  <li>
+    <h2>Why WebSlides? Work better, faster.</h2>
+    <p>Designers and marketers can now focus on the content. Simply <a href="/demos/" title="WebSlides Demos">choose a demo</a> and customize it in minutes. Be memorable! </p>
+  </li>
+  <li>
+    <h2> Good karma. Just the essentials and using lovely CSS.</h2>
+    <p>WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.</p>
+  </li>
+</ul>
+
+ +
+ Source: modules/_flexblock-reasons.scss, line 5 +
+ +
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-flexblock-specs.html b/doc/styleguide/item-flexblock-specs.html new file mode 100644 index 0000000..343fd71 --- /dev/null +++ b/doc/styleguide/item-flexblock-specs.html @@ -0,0 +1,172 @@ + + + + + WebSlides + + + + + + + + + + + +
+
+

WebSlides

+
+ +
+
+ +
+ +
+

+ + + 2.9 + + #Flexblock.Specs + + + Specs + +

+ +
+

Bla bla bla

+ +
+ +
+ +
+
+ Example +
+ + +
+
    +
  • +
    +

    Ultra-Fast WiFi

    + Simple and secure file sharing. +
    +
    • +
  • +
    +

    All day battery life

    + Your battery worries may be over. +
    +
    • +
  • +
    +

    Lifetime Warranty

    + We'll fix it or if we can't, we'll replace it. +
    +
    • +
+
+
+ +
+ +
+ + Markup + + 
<ul class="flexblock specs">
+    <li>
+      <div>
+        <h2>Ultra-Fast WiFi</h2>
+        Simple and secure file sharing.
+      </div>
+    </li>
+    <li>
+      <div>
+        <h2>All day battery life</h2>
+        Your battery worries may be over.
+      </div>
+    </li>
+    <li>
+      <div>
+        <h2>Lifetime Warranty </h2>
+        We'll fix it or if we can't, we'll replace it.
+      </div>
+    </li>
+    </ul>
+
+ +
+ Source: modules/_flexblock-specs.scss, line 5 +
+ +
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-flexblock-steps.html b/doc/styleguide/item-flexblock-steps.html new file mode 100644 index 0000000..9669e1b --- /dev/null +++ b/doc/styleguide/item-flexblock-steps.html @@ -0,0 +1,184 @@ + + + + + WebSlides + + + + + + + + + + + +
+
+

WebSlides

+
+ +
+
+ +
+ +
+

+ + + 2.10 + + #Flexblock.Steps + + + Steps + +

+ +
+

Bla bla bla

+ +
+ +
+ +
+
+ Example +
+ + +
+
    +
  • +

    01. Passion

    +

    When you're really passionate about your job, you can change the world.

    +
    • +
  • +
    +

    02. Purpose

    +

    Why does this business exist? How are you different? Why matters?

    +
    • +
  • +
    +

    03. Principles

    +

    Leadership through usefulness, openness, empathy, and good taste.

    +
    • +
  • +
    +

    04. Process

    +
      +
    • Useful
      • +
    • Easy
      • +
    • Fast
      • +
    • Beautiful
      • +
    +
    • +
+
+
+ +
+ +
+ + Markup + + 
<ul class="flexblock steps">
+  <li>
+    <h2>01. Passion</h2>
+    <p>When you're really passionate about your job, you can change the world.</p>
+  </li>
+  <li>
+    <div class="process step-2"></div>
+    <h2>02. Purpose</h2>
+    <p>Why does this business exist? How are you different? Why matters?</p>
+  </li>
+  <li>
+    <div class="process step-3"></div>
+    <h2>03. Principles</h2>
+    <p>Leadership through usefulness, openness, empathy, and good taste.</p>
+  </li>
+  <li>
+    <div class="process step-4"></div>
+    <h2>04. Process</h2>
+    <ul>
+      <li>Useful</li>
+      <li>Easy</li>
+      <li>Fast</li>
+      <li>Beautiful</li>
+    </ul>
+  </li>
+</ul>
+
+ +
+ Source: modules/_flexblock-steps.scss, line 6 +
+ +
+
+ + + + + + + + + + + + + + + diff --git a/doc/styleguide/item-flexblock.html b/doc/styleguide/item-flexblock.html index 58c46b1..c858b58 100644 --- a/doc/styleguide/item-flexblock.html +++ b/doc/styleguide/item-flexblock.html @@ -37,41 +37,71 @@
  • diff --git a/doc/styleguide/section-flexblock.html b/doc/styleguide/section-flexblock.html index 02a52e2..9e991e5 100644 --- a/doc/styleguide/section-flexblock.html +++ b/doc/styleguide/section-flexblock.html @@ -37,41 +37,71 @@
  • @@ -110,13 +140,144 @@ +
    + +
    +

    + + + 2.1 + + #Flexblock.Activity + + + Activity + +

    + +
    +

    Bla bla bla

    + +
    + +
    + +
    +
    + Example +
    + + +
    + +
    +
    + +
    + +
    + + Markup + + 
    <ul class="flexblock activity">
+  <li>
+    <a href="#" title="UX Designer at ACME">
+      <div>
+        <p class="year">
+          2016
+        </p>
+        <p class="title">
+          UX Designer at ACME
+        </p>
+        <p class="summary">
+          This is a job description for the UX Designer role at ACME. Be concise. Content like a tweet: 2-3 lines recommended.
+        </p>
+      </div>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="14 world famous buildings to inspire you">
+      <p class="year">
+        2 mins ago
+      </p>
+      <p class="title">
+        14 world famous buildings to inspire you
+      </p>
+      <p class="summary">
+        From the Colosseum to the Chrysler building, get a dose of inspiration from 14 of the world's most famous buildings.
+      </p>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="Co-Founder of GAMMA">
+      <p class="year">
+        2013
+      </p>
+      <p class="title">
+        Co-Founder of GAMMA
+      </p>
+      <p class="summary">
+        The culture within an organization is an essential part for success. This is a job description. Be concise. 2-3 lines recommended.
+      </p>
+    </a>
+  </li>
+</ul>
    +
    + +
    + Source: modules/_flexblock-activity.scss, line 5 +
    + +

    - 2.1 + 2.2 #Flexblock.Blink @@ -270,7 +431,7 @@

    - 2.2 + 2.3 #Flexblock.Clients @@ -399,7 +560,7 @@

    - 2.3 + 2.4 #Flexblock.Features @@ -525,7 +686,7 @@

    - 2.4 + 2.5 #Flexblock.Gallery @@ -640,7 +801,7 @@

    - 2.4.1 + 2.5.1 #Flexblock.Gallery.Overlay @@ -743,7 +904,7 @@

    - 2.5 + 2.6 #Flexblock.Metrics @@ -845,6 +1006,406 @@

    +
    + +
    +

    + + + 2.7 + + #Flexblock.Plans + + + Plans + +

    + +
    +

    Bla bla bla

    + +
    + +
    + +
    +
    + Examples +
    + +
    + Default styling +
    + +
    + +
    +
    + +
    + .blink +
    +
    + block linkable +
    +
    + +
    +
    +
    + +
    + + Markup + + 
    <ul class="flexblock plans [modifier class]">
+  <li>
+    <a href="#" title="Purchase">
+      <h2>Basic</h2>
+      <div>
+        <span class="price">Free</span>
+        <p>Good karma. Just the essential features. 100% customizable. Make it yours.</p>
+        <span class="button">Select</span>
+      </div>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="Purchase">
+      <h2>Medium</h2>
+      <div>
+        <span class="price"><sup>$</sup>4,99 <sup>/month</sup></span>
+        <p>Clean markup with popular naming conventions. Minimum effort.</p>
+        <span class="button">Buy Now</span>
+      </div>
+    </a>
+  </li>
+  <li>
+    <a href="#" title="Purchase">
+      <h2>Premium <sup>(save 20%)</sup></h2>
+      <div>
+        <span class="price"><sup>$</sup>40 <sup>/year</sup></span>
+        <p>Prototype faster. Create landings and portfolios. Unlimited projects.</p>
+        <span class="button">Select</span>
+      </div>
+    </a>
+  </li>
+</ul>
    +
    + +
    + Source: modules/_flexblock-plans.scss, line 5 +
    + +
    +
    + +
    +

    + + + 2.8 + + #Flexblock.Reasons + + + Reasons + +

    + +
    +

    Bla bla bla

    + +
    + +
    + +
    +
    + Example +
    + + +
    +
      +
    • +

      Why WebSlides? Work better, faster.

      +

      Designers and marketers can now focus on the content. Simply choose a demo and customize it in minutes. Be memorable!

      +
      • +
    • +

      Good karma. Just the essentials and using lovely CSS.

      +

      WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.

      +
      • +
    +
    +
    + +
    + +
    + + Markup + + 
    <ul class="flexblock reasons">
+  <li>
+    <h2>Why WebSlides? Work better, faster.</h2>
+    <p>Designers and marketers can now focus on the content. Simply <a href="/demos/" title="WebSlides Demos">choose a demo</a> and customize it in minutes. Be memorable! </p>
+  </li>
+  <li>
+    <h2> Good karma. Just the essentials and using lovely CSS.</h2>
+    <p>WebSlides is about telling the story, and sharing it in a beautiful way. Hypertext and clean code as narrative elements.</p>
+  </li>
+</ul>
    +
    + +
    + Source: modules/_flexblock-reasons.scss, line 5 +
    + +
    +
    + +
    +

    + + + 2.9 + + #Flexblock.Specs + + + Specs + +

    + +
    +

    Bla bla bla

    + +
    + +
    + +
    +
    + Example +
    + + +
    +
      +
    • +
      +

      Ultra-Fast WiFi

      + Simple and secure file sharing. +
      +
      • +
    • +
      +

      All day battery life

      + Your battery worries may be over. +
      +
      • +
    • +
      +

      Lifetime Warranty

      + We'll fix it or if we can't, we'll replace it. +
      +
      • +
    +
    +
    + +
    + +
    + + Markup + + 
    <ul class="flexblock specs">
+    <li>
+      <div>
+        <h2>Ultra-Fast WiFi</h2>
+        Simple and secure file sharing.
+      </div>
+    </li>
+    <li>
+      <div>
+        <h2>All day battery life</h2>
+        Your battery worries may be over.
+      </div>
+    </li>
+    <li>
+      <div>
+        <h2>Lifetime Warranty </h2>
+        We'll fix it or if we can't, we'll replace it.
+      </div>
+    </li>
+    </ul>
    +
    + +
    + Source: modules/_flexblock-specs.scss, line 5 +
    + +
    +
    + +
    +

    + + + 2.10 + + #Flexblock.Steps + + + Steps + +

    + +
    +

    Bla bla bla

    + +
    + +
    + +
    +
    + Example +
    + + +
    +
      +
    • +

      01. Passion

      +

      When you're really passionate about your job, you can change the world.

      +
      • +
    • +
      +

      02. Purpose

      +

      Why does this business exist? How are you different? Why matters?

      +
      • +
    • +
      +

      03. Principles

      +

      Leadership through usefulness, openness, empathy, and good taste.

      +
      • +
    • +
      +

      04. Process

      +
        +
      • Useful
        • +
      • Easy
        • +
      • Fast
        • +
      • Beautiful
        • +
      +
      • +
    +
    +
    + +
    + +
    + + Markup + + 
    <ul class="flexblock steps">
+  <li>
+    <h2>01. Passion</h2>
+    <p>When you're really passionate about your job, you can change the world.</p>
+  </li>
+  <li>
+    <div class="process step-2"></div>
+    <h2>02. Purpose</h2>
+    <p>Why does this business exist? How are you different? Why matters?</p>
+  </li>
+  <li>
+    <div class="process step-3"></div>
+    <h2>03. Principles</h2>
+    <p>Leadership through usefulness, openness, empathy, and good taste.</p>
+  </li>
+  <li>
+    <div class="process step-4"></div>
+    <h2>04. Process</h2>
+    <ul>
+      <li>Useful</li>
+      <li>Easy</li>
+      <li>Fast</li>
+      <li>Beautiful</li>
+    </ul>
+  </li>
+</ul>
    +
    + +
    + Source: modules/_flexblock-steps.scss, line 6 +
    + +
    diff --git a/src/scss/modules/_flexblock-activity.scss b/src/scss/modules/_flexblock-activity.scss index 7b163e8..182a4bf 100644 --- a/src/scss/modules/_flexblock-activity.scss +++ b/src/scss/modules/_flexblock-activity.scss @@ -2,7 +2,56 @@ 6.9 Block Activity