CardWebComponents/static/index_grid-labs.html at 4fa9eb49bc5c02ddea1c49bccf443ac01bbf9321 · uPortal-Project/CardWebComponents · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!doctype html>
<html dir="ltr" lang="en-us">
  <head>
    <meta charset="UTF-8">
    <title>CSS Grid example with The "CardWebComponent" Web Component test page for uPortal</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="description" content="POC webcomponents"/>

    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.8.0/webcomponents-lite.js" as="script">
    <link rel="preload" href="https://unpkg.com/regenerator-runtime@0.12.1/runtime.js" as="script">
    <link rel="preload" href="my-card.umd.js" as="script">

    <link rel="stylesheet" href="css/01-009.css">
  </head>
  <body class="F index">


  <main role="main">
     <h1>CSS Grid example with with The "CardWebComponent" Web Component test page for uPortal</h1>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Paleo_food.jpg" alt="">
      <h2>1) All of These Headlines Are Not Exactly The Same</h2>
      <p>In the real world, you don't know how long the content will be. Writers will write what they need. Photos will be cropped to the shape that they should be. That's good. Make a system that allows this. You want it to be flexible and robust.</p>
    </article>
    <section>
      <!-- Beginning of the web component -->
        <my-card id="what-is-uportal-i18n" messagesPath="./" cssPath="css"></my-card>

        <script src='https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.8.0/webcomponents-lite.js' defer></script>
        <script src='https://unpkg.com/regenerator-runtime@0.12.1/runtime.js' defer></script>
        <script src="my-card.umd.js" defer></script>
        <!-- End of the web component -->
    </section>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Indian_bengali_food.jpg" alt="">
      <h2>2) Some Are Short</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus.</p>
    </article>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Food_in_Miyajima.jpg" alt="">
      <h2>3) Some Headlines Can Sometimes Be Quite Long, Because It Takes Time to Make A Point</h2>
      <p>Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis.</p>
    </article>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/P1-Food_with_love.jpg" alt="">
      <h2>4) Also, Why Are We Using Fake Content? Let's Make Some Real-ish Content.</h2>
      <p>By using real content, we can see the variation inherent in what this site might present. And we can design for those real world needs.
    </article>
    <section>
      <my-card id="what-is-uportal-i18n-3" messagesPath="./" cssPath="css"></my-card>

        <script src='https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.8.0/webcomponents-lite.js' defer></script>
        <script src='https://unpkg.com/regenerator-runtime@0.12.1/runtime.js' defer></script>
        <script src="my-card.umd.js" defer></script>
    </section>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Birds_on_stick_Shanghai_Qibao.jpg" alt="">
      <h2>6) See how this layout is broken?</h2>
      <p>That's because floats are really crap at handling layout. We've been using a screwdriver as a hammer. It sort of works, but badly.</p>
    </article>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Restaurant_food_Kunming_Yunnan.jpg" alt="">
      <h2>7) The New CSS Will Fix Things</h2>
      <p>Finally we get some real hammers.</p>
    </article>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Bunter_Teller.jpg" alt="">
      <h2>8) Several Kinds of Hammers</h2>
      <p>Grid, Flexbox, Alignment, Shapes.</p>
    </article>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/P3-Egyptian_food_Koshary.jpg" alt="">
      <h2>9) Size, Isn't That Magical!</h2>
      <p>Lorem ipsum dolor sit amet.</p>
    </article>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Mexican_food.jpg" alt="">
      <h2>10) All of These Headlines</h2>
      <p>Always three lines of text, which fits exactly in the available space. Describing where you will go when you click.</p>
    </article>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/P2-Arepitas_Food_Macro.jpg" alt="">
      <h2>11) Are Exactly the Same</h2>
      <p>Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. </p>
    </article>
    <article>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/Ravenna_food.jpg" alt="">
      <h2>12) Size, Isn't That Magical!</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris tindunt.</p>
    </article>

  </main>

  </body>
</html>