Skip to content
Snippets Groups Projects
Commit f2c7a47a authored by Martin Leblanc's avatar Martin Leblanc Committed by Eric Bremner
Browse files

ISTWCMS-5596: Addition of base - aspect ratio, shadows, sizes, borders,... 

ISTWCMS-5596: Addition of base - aspect ratio, shadows, sizes, borders, typography - for base elements display
parent 4463dbbe
No related branches found
No related tags found
1 merge request!8ISTWCMS-5596: Addition of patterns for base elements.
Hide whitespace changes
Inline Side-by-side
Showing
with 346 additions and 30 deletions
src/patterns/02-base/aspects/aspects.twig 0 → 100644
+ 13
− 0
View file @ f2c7a47a
<section class="pl-aspect-ratio">
<div class="just-for-gap">
<h3>Aspect Ratios</h3>
<article class="aspect-demo">
<div style="aspect-ratio: var(--ratio-square)">box</div>
<div style="aspect-ratio: var(--ratio-landscape)">landscape</div>
<div style="aspect-ratio: var(--ratio-portrait)">portrait</div>
<div style="aspect-ratio: var(--ratio-widescreen)">widescreen</div>
<div style="aspect-ratio: 1.6180/1">golden ratio</div>
<div style="aspect-ratio: 18/5">ultrawide</div>
</article>
</div>
</section>
src/patterns/02-base/borders/borders.twig 0 → 100644
+ 24
− 0
View file @ f2c7a47a
<section class="pl-borders">
<div class="just-for-gap">
<h3>Border Size</h3>
<article class="border-demo">
<div style="border-width: var(--border-size-1);">1</div>
<div style="border-width: var(--border-size-2);">2</div>
<div style="border-width: var(--border-size-3);">3</div>
<div style="border-width: var(--border-size-4);">4</div>
<div style="border-width: var(--border-size-5);">5</div>
</article>
</div>
<div class="just-for-gap">
<h3>Border Radius</h3>
<article class="border-demo">
<div style="border-radius: var(--radius-1);">1</div>
<div style="border-radius: var(--radius-2);">2</div>
<div style="border-radius: var(--radius-3);">3</div>
<div style="border-radius: var(--radius-4);">4</div>
<div style="border-radius: var(--radius-5);">5</div>
<div style="border-radius: var(--radius-round);">round</div>
</article>
</div>
</section>
src/patterns/02-base/colors/colors.js deleted 100644 → 0
+ 0
− 14
View file @ 4463dbbe
// var p = $("body");
//
// p.blinker();
//
// p.bind({
// // pause blinking on mouseenter
// mouseenter: function(){
// $(this).data("blinker").pause();
// },
// // resume blinking on mouseleave
// mouseleave: function(){
// $(this).data("blinker").blinkagain();
// }
// });
src/patterns/02-base/headings/headings.twig deleted 100644 → 0
+ 0
− 12
View file @ 4463dbbe
<h1>h1. Heading Level 1</h1>
<h2>h2. Heading Level 2</h2>
<h3>h3. Heading Level 3</h3>
<h4>h4. Heading Level 4</h4>
<h5>h5. Heading Level 5</h5>
<h6>h6. Heading Level 6</h6>
<h1><a href="{{ url }}">h1. Heading Level 1 Link</a></h1>
<h2><a href="{{ url }}">h2. Heading Level 2 Link</a></h2>
<h3><a href="{{ url }}">h3. Heading Level 3 Link</a></h3>
<h4><a href="{{ url }}">h4. Heading Level 4 Link</a></h4>
<h5><a href="{{ url }}">h5. Heading Level 5 Link</a></h5>
<h6><a href="{{ url }}">h6. Heading Level 6 Link</a></h6>
src/patterns/02-base/media/media.twig 0 → 100644
+ 14
− 0
View file @ f2c7a47a
<section class="pl-media">
<div class="just-for-gap">
<h3>Audio</h3>
<article class="media-demo">
<audio controls="">audio</audio>
</article>
</div>
<div class="just-for-gap">
<h3>Video</h3>
<article class="media-demo">
<video controls="">video</video>
</article>
</div>
</section>
src/patterns/02-base/shadows/shadows.twig 0 → 100644
+ 24
− 0
View file @ f2c7a47a
<section class="pl-shadows">
<div class="just-for-gap">
<h3>Box Shadow</h3>
<article class="shadow-demo">
<div style="box-shadow: var(--shadow-1);">Shadow 1</div>
<div style="box-shadow: var(--shadow-2);">Shadow 2</div>
<div style="box-shadow: var(--shadow-3);">Shadow 3</div>
<div style="box-shadow: var(--shadow-4);">Shadow 4</div>
<div style="box-shadow: var(--shadow-5);">Shadow 5</div>
<div style="box-shadow: var(--shadow-6);">Shadow 6</div>
</article>
</div>
<div class="just-for-gap">
<h3>Inner Shadow</h3>
<article class="shadow-demo">
<div style="box-shadow: var(--inner-shadow-0);">Inner Shadow 1</div>
<div style="box-shadow: var(--inner-shadow-1);">Inner Shadow 2</div>
<div style="box-shadow: var(--inner-shadow-2);">Inner Shadow 3</div>
<div style="box-shadow: var(--inner-shadow-3);">Inner Shadow 4</div>
<div style="box-shadow: var(--inner-shadow-4);">Inner Shadow 5</div>
</article>
</div>
</section>
src/patterns/02-base/sizes/sizes.twig 0 → 100644
+ 22
− 0
View file @ f2c7a47a
<section class="pl-sizes">
<table class="sizes-demo">
<thead>
<tr>
<th>Size</th>
<th>REM</th>
<th>PX</th>
<th>Example</th>
</tr>
</thead>
<tbody>
{% for item in spacing %}
<tr>
<td>{{ item.size }}</td>
<td>{{ item.rem }}</td>
<td>{{ item.px }}</td>
<td><div style="block-size:{{ item.rem }}; background-color: gray;"></div></td>
</tr>
{% endfor %}
</tbody>
</table>
</section>
src/patterns/02-base/sizes/sizes.yml 0 → 100644
+ 47
− 0
View file @ f2c7a47a
---
spacing:
- size: --size-xs
px: 1px
rem: 0.063rem
- size: --size-sm
px: 2px
rem: 0.125rem
- size: --size-05
px: 4px
rem: 0.25rem
- size: --size-1
px: 8px
rem: 0.5rem
- size: --size-105
px: 12px
rem: 0.75rem
- size: --size-2
px: 16px
rem: 1rem
- size: --size-205
px: 20px
rem: 1.25rem
- size: --size-3
px: 24px
rem: 1.5rem
- size: --size-4
px: 32px
rem: 2rem
- size: --size-5
px: 40px
rem: 2.5rem
- size: --size-6
px: 48px
rem: 3rem
- size: --size-7
px: 56px
rem: 3.5rem
- size: --size-8
px: 64px
rem: 4rem
- size: --size-9
px: 72px
rem: 4.5rem
- size: --size-10
px: 80px
rem: 5rem
src/patterns/02-base/typography/typography.twig 0 → 100644
+ 184
− 0
View file @ f2c7a47a
<section class="pl-typography">
<div class="gap">
<h3>Headings</h3>
<article class="typography-demo">
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
<h1><a href="{{ url }}">Heading Level 1 Link</a></h1>
<h2><a href="{{ url }}">Heading Level 2 Link</a></h2>
<h3><a href="{{ url }}">Heading Level 3 Link</a></h3>
<h4><a href="{{ url }}">Heading Level 4 Link</a></h4>
<h5><a href="{{ url }}">Heading Level 5 Link</a></h5>
<h6><a href="{{ url }}">Heading Level 6 Link</a></h6>
</article>
</div>
<div class="gap">
<h3>Paragraphs</h3>
<article class="typography-demo">
<p>A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
<p>This is what a successive paragraph looks like. Some people prefer a space between paragraphs, while others prefer sucessive paragraphs indented with no margins between them.</p>
</article>
</div>
<div class="gap">
<h3>Blockquotes</h3>
<article class="typography-demo">
{% block blockquote %}
{% include "@components/blockquote/blockquote.twig" with {
'text': blockquote.text,
'attribution': blockquote.attribution
}%}
{% endblock %}
</article>
</div>
<div class="gap">
<h3>Lists</h3>
<article class="typography-demo">
<h4>Definition List</h4>
<dl>
<dt>Definition List Title</dt>
<dd>A number of connected items or names written or printed consecutively, typically one below the other.</dd>
<dt>This is a term.</dt>
<dd>This is the definition of that term, which both live in a dl.</dd>
</dl>
<h4>Ordered List</h4>
<ol>
<li>This is a list item in an ordered list</li>
<li>An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.</li>
<li>
Lists can be nested inside of each other
<ol>
<li>This is a nested list item</li>
<li>This is another nested list item in an ordered list
<ol>
<li>This is a nested list item</li>
<li>This is another nested list item in an ordered list
<ol>
<li>This is a nested list item</li>
<li>This is another nested list item in an ordered list</li>
</ol>
</li>
</ol>
</li>
</ol>
</li>
<li>This is the last list item</li>
</ol>
<ol>
<li>
<p>This is a paragraph within a list item in a different ordered list.</p>
<p>This is another paragraph in this list item.</p>
</li>
<li><p>This is a new paragraph within a different list item in the same ordered list.</p></li>
</ol>
<h4>Unordered List</h4>
<ul>
<li>This is a list item in an unordered list</li>
<li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line. </li>
<li>
Lists can be nested inside of each other
<ul>
<li>This is a nested list item</li>
<li>
This is another nested list item in an unordered list
<ul>
<li>This is a nested list item</li>
<li>
This is another nested list item in an unordered list
<ul>
<li>This is a nested list item</li>
<li>This is another nested list item in an unordered list</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>This is the last list item</li>
</ul>
<ul>
<li>
<p>This is a paragraph within a list item in a different unordered list.</p>
<p>This is another paragraph in this list item.</p>
</li>
<li><p>This is a new paragraph within a different list item in the same unordered list.</p></li>
</ul>
</article>
</div>
<div class="gap">
<h3>Details</h3>
<article class="typography-demo">
{% block details%}
{% include "@components/details/details.twig" with {
'is_open' : details.is_open,
'details_classes': details.details.classes,
'details_content': details.details_content,
'details_description': details.details_description,
'details_summary': details.details_summary,
}%}
{% endblock %}
</article>
</div>
<div class="gap">
<h3>Horizontal rules</h3>
<article class="typography-demo">
<hr>
</article>
</div>
<div class="gap">
<h3>Code</h3>
<article class="typography-demo">
<p>Keybord input: <kbd>Cmd</kbd></p>
<p>Inline code:<code>&lt;div&gt;code&lt;/div&gt;</code></p>
<p>Sample output: <samp>This is sample output from a computer program</samp></p>
</article>
</div>
<div class="gap">
<h3>Pre-formatted text</h3>
<article class="typography-demo">
<pre>
P R E F O R M A T T E D T E X T
! " # $ % &amp; ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; &lt; = &gt; ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~
</pre>
</article>
</div>
<div class="gap">
<h3>Inline elements</h3>
<article class="typography-demo">
<p><a href="{{ url }}">This is a text link</a></p>
<p><strong>Strong is used to indicate strong importance</strong></p>
<p><em>This text has added emphasis</em></p>
<p>The <b>b element</b> is stylistically different text from normal text, without any special importance</p>
<p>The <i>i element</i> is text that is set off from the normal text</p>
<p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation</p>
<p><del>This text is deleted</del> and <ins>This text is inserted</ins></p>
<p><s>This text has a strikethrough</s></p>
<p>Superscript<sup>®</sup></p>
<p>Subscript for things like H<sub>2</sub>O</p>
<p><small>This small text is small for for fine print, etc.</small></p>
<p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>
<p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation</q></p>
<p><cite>This is a citation</cite></p>
<p>The <dfn>dfn element</dfn> indicates a definition.</p>
<p>The <mark>mark element</mark> indicates a highlight</p>
<p>The <var>variable element</var>, such as <var>x</var> = <var>y</var></p>
<p>The <time>time element</time>, such as <time>10:00pm</time></p>
</article>
</div>
src/patterns/02-base/typography/typography.yml 0 → 100644
+ 10
− 0
View file @ f2c7a47a
blockquote:
text: '<p>This is some text from the yml file</p><p>This is some text from the yml file2. This is some text from the yml file. This is some text from the yml file. This is some text from the yml file</p><p>This is some text from the yml file3</p><p>This is some text from the yml file4. This is some text from the yml file. This is some text from the yml file. This is some text from the yml file. This is some text from the yml file. This is some text from the yml file</p><p>This is some text from the yml file5</p>'
attribution: 'This is the attribution'
details:
is_open: true
details_classes: 'uw-pattern-lab'
details_summary: 'Details summary title here'
details_description: 'Details description'
details_content: |-
<p>Details content can be anything you want it to be</p>
src/patterns/04-components/details/details.twig
+ 7
− 3
View file @ f2c7a47a
<details class="uw-details" {% if is_open %} open{% endif %}>
<details class="uw-details {{ details_classes }}" {% if details.is_open %} open{% endif %}>
<summary class="details__summary">
{% block details_summary %}
Summary
{{ details_summary }}
{% endblock %}
</summary>
<div class="details__content">
{% block details_content %}
Content
{{ details_content }}
{% endblock %}
</div>
</details>
src/patterns/04-components/tag-list/tag-list.twig
+ 1
− 1
View file @ f2c7a47a
{% import '@base/macros/uw.macro.twig' as macros %}
{% import '@base/macros/_uw.macro.twig' as macros %}
<ul class="tag-list {{ modifier_classes }}">
{% for item in items %}
<li class="tag-list__item {% if item.faculty %}{{ item.faculty }}{% endif %}">
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment