Skip to content

Commit

Permalink
docs(examples): update Orange Grid example
Browse files Browse the repository at this point in the history
  • Loading branch information
@ffoodd
ffoodd committed Dec 3, 2019
1 parent 7c6eec6 commit 1fcd954
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 198 deletions.
126 changes: 36 additions & 90 deletions site/docs/4.4/examples/orange-grid/index-fluid.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,102 +4,48 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Orange grid sample</title>

<link rel="stylesheet" href="../../dist/css/boosted.css" />
<link href="../../dist/css/orangeHelvetica.min.css" rel="stylesheet">
<link href="../../dist/css/boosted.min.css" rel="stylesheet"/>
<link href="styles.css" rel="stylesheet">
</head>

<body>

<div class="skiplinks" >
<div class="skiplinks-section sr-only">
<ul>
<li id="cdu-skiplink">
</li>
<li>
<a href="#mainNav" class="skiplinks-trigger">main navigation</a>
</li>
<li>
<a href="#content" class="skiplinks-trigger">content</a>
</li>
</ul>
<main role="main" id="content" class="container-fluid">
<div class="row">
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
</div>
</div>


<main role="main" id="content" class="container-fluid">
<div class="row">
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
</div>
<div class="row">
<div class="col-12"><div>12 cols alltime</div></div>
<div class="col-6"><div>6 cols alltime</div></div>
<div class="col-6"><div>6 cols alltime</div></div>
<div class="col-4"><div>4 cols alltime</div></div>
<div class="col-4"><div>4 cols alltime</div></div>
<div class="col-4"><div>4 cols alltime</div></div>
<div class="d-none d-md-block col-lg-3"><div>3 cols hidden&lt;960px</div></div>
<div class="d-none d-md-block col-lg-3"><div>3 cols hidden&lt;960px</div></div>
<div class="d-none d-md-block col-lg-3"><div>3 cols hidden&lt;960px</div></div>
<div class="d-none d-md-block col-lg-3"><div>3 cols hidden&lt;960px</div></div>
<div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden&lt;1380px</div></div>
<div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden&lt;1380px</div></div>
<div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden&lt;1380px</div></div>
<div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden&lt;1380px</div></div>
<div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden&lt;1380px</div></div>
<div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden&lt;1380px</div></div>
</div>
</main><!--/.container-fluid-->


<!-- Boosted core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/vendor/jquery-slim.min.js"></script>
<script src="../../assets/js/vendor/popper.min.js"></script>
<!-- Include all compiled plugins bootstrap, bootstrap accessibility plugin and boosted specific components (below), or include individual files as needed -->
<script src="../../dist/js/boosted.js"></script>

<script>
// Surcharge des valeurs du script de la toolbar
accessibilitytoolbar_custom={
idLinkModeContainer:"id-for-cdu-link",
cssLinkModeClassName:"nav-item-cdu",
idSkipLinkIdLinkMode:"cdu-skiplink",
cssSkipLinkClassName: "skiplinks-trigger",
callback:skiplinksAfterLoad
};


$(".skiplinks-trigger").focus(function(){
$(".skiplinks-section").addClass("skiplinks-show").removeClass("sr-only")
});
$(".skiplinks-trigger").blur(function(){
$(".skiplinks-section").removeClass("skiplinks-show").addClass("sr-only")
});

function skiplinksAfterLoad(){
$(".skiplinks-trigger").focus(function(){
$(".skiplinks-section").addClass("skiplinks-show").removeClass("sr-only")
});
$(".skiplinks-trigger").blur(function(){
$(".skiplinks-section").removeClass("skiplinks-show").addClass("sr-only")
});
}

</script>
<div class="row">
<div class="col-12"><div>12 cols all time</div></div>
<div class="col-6"><div>6 cols all time</div></div>
<div class="col-6"><div>6 cols all time</div></div>
<div class="col-4"><div>4 cols all time</div></div>
<div class="col-4"><div>4 cols all time</div></div>
<div class="col-4"><div>4 cols all time</div></div>
<div class="d-none d-md-block col-lg-3"><div>3 cols hidden &lt; <var>960px</var></div></div>
<div class="d-none d-md-block col-lg-3"><div>3 cols hidden &lt; <var>960px</var></div></div>
<div class="d-none d-md-block col-lg-3"><div>3 cols hidden &lt; <var>960px</var></div></div>
<div class="d-none d-md-block col-lg-3"><div>3 cols hidden &lt; <var>960px</var></div></div>
<div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden &lt; <var>1380px</var></div></div>
<div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden &lt; <var>1380px</var></div></div>
<div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden &lt; <var>1380px</var></div></div>
<div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden &lt; <var>1380px</var></div></div>
<div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden &lt; <var>1380px</var></div></div>
<div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden &lt; <var>1380px</var></div></div>
</div>
</main><!--/.container-fluid-->

<script src="https://cdn.jsdelivr.net/npm/focus-visible@5.0.2/dist/focus-visible.min.js" integrity="sha256-sz9/xSAM6mrw3l6hJWDgc7nEbzUeO5e8CXwYoECOEKI=" crossorigin="anonymous"></script>
</body>
</html>

129 changes: 36 additions & 93 deletions site/docs/4.4/examples/orange-grid/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,104 +4,47 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Orange grid sample</title>

<link href="../../dist/css/orangeHelvetica.css" rel="stylesheet">
<link href="../../dist/css/orangeIcons.css" rel="stylesheet">
<link rel="stylesheet" href="../../dist/css/boosted.css" />
<link href="../../dist/css/orangeHelvetica.min.css" rel="stylesheet">
<link href="../../dist/css/boosted.min.css" rel="stylesheet"/>
<link href="styles.css" rel="stylesheet">
</head>

<body>

<div class="skiplinks" >
<div class="skiplinks-section sr-only">
<ul>
<li id="cdu-skiplink">
</li>
<li>
<a href="#mainNav" class="skiplinks-trigger">main navigation</a>
</li>
<li>
<a href="#content" class="skiplinks-trigger">content</a>
</li>
</ul>
<main role="main" id="content" class="container">
<div class="row">
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
</div>
</div>


<main role="main" id="content" class="container">
<div class="row">
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
<div class="col-1"><div>1 col</div></div>
</div>
<div class="row">
<div class="col-12"><div>12 cols alltime</div></div>
<div class="col-6"><div>6 cols alltime</div></div>
<div class="col-6"><div>6 cols alltime</div></div>
<div class="col-4"><div>4 cols alltime</div></div>
<div class="col-4"><div>4 cols alltime</div></div>
<div class="col-4"><div>4 cols alltime</div></div>
<div class="d-none d-md-block col-lg-3"><div>3 cols hidden&lt;960px</div></div>
<div class="d-none d-md-block col-lg-3"><div>3 cols hidden&lt;960px</div></div>
<div class="d-none d-md-block col-lg-3"><div>3 cols hidden&lt;960px</div></div>
<div class="d-none d-md-block col-lg-3"><div>3 cols hidden&lt;960px</div></div>
<div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden&lt;1380px</div></div>
<div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden&lt;1380px</div></div>
<div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden&lt;1380px</div></div>
<div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden&lt;1380px</div></div>
<div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden&lt;1380px</div></div>
<div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden&lt;1380px</div></div>
</div>
</main><!--/.container-->


<!-- Boosted core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/vendor/jquery-slim.min.js"></script>
<script src="../../assets/js/vendor/popper.min.js"></script>
<!-- Include all compiled plugins bootstrap, bootstrap accessibility plugin and boosted specific components (below), or include individual files as needed -->
<script src="../../dist/js/boosted.js"></script>

<script>
// Surcharge des valeurs du script de la toolbar
accessibilitytoolbar_custom={
idLinkModeContainer:"id-for-cdu-link",
cssLinkModeClassName:"nav-item-cdu",
idSkipLinkIdLinkMode:"cdu-skiplink",
cssSkipLinkClassName: "skiplinks-trigger",
callback:skiplinksAfterLoad
};


$(".skiplinks-trigger").focus(function(){
$(".skiplinks-section").addClass("skiplinks-show").removeClass("sr-only")
});
$(".skiplinks-trigger").blur(function(){
$(".skiplinks-section").removeClass("skiplinks-show").addClass("sr-only")
});

function skiplinksAfterLoad(){
$(".skiplinks-trigger").focus(function(){
$(".skiplinks-section").addClass("skiplinks-show").removeClass("sr-only")
});
$(".skiplinks-trigger").blur(function(){
$(".skiplinks-section").removeClass("skiplinks-show").addClass("sr-only")
});
}

</script>
<div class="row">
<div class="col-12"><div>12 cols all time</div></div>
<div class="col-6"><div>6 cols all time</div></div>
<div class="col-6"><div>6 cols all time</div></div>
<div class="col-4"><div>4 cols all time</div></div>
<div class="col-4"><div>4 cols all time</div></div>
<div class="col-4"><div>4 cols all time</div></div>
<div class="d-none d-md-block col-lg-3"><div>3 cols hidden &lt; <var>960px</var></div></div>
<div class="d-none d-md-block col-lg-3"><div>3 cols hidden &lt; <var>960px</var></div></div>
<div class="d-none d-md-block col-lg-3"><div>3 cols hidden &lt; <var>960px</var></div></div>
<div class="d-none d-md-block col-lg-3"><div>3 cols hidden &lt; <var>960px</var></div></div>
<div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden &lt; <var>1380px</var></div></div>
<div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden &lt; <var>1380px</var></div></div>
<div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden &lt; <var>1380px</var></div></div>
<div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden &lt; <var>1380px</var></div></div>
<div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden &lt; <var>1380px</var></div></div>
<div class="d-none d-xl-block col-xxl-2"><div>2 cols hidden &lt; <var>1380px</var></div></div>
</div>
</main><!--/.container-->

<script src="https://cdn.jsdelivr.net/npm/focus-visible@5.0.2/dist/focus-visible.min.js" integrity="sha256-sz9/xSAM6mrw3l6hJWDgc7nEbzUeO5e8CXwYoECOEKI=" crossorigin="anonymous"></script>
</body>
</html>

23 changes: 8 additions & 15 deletions site/docs/4.4/examples/orange-grid/styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,11 @@
.container{
background-color: #f00;
[class*="col-"],
[class*="col-"] > div {
min-height: calc((100vh - 12 * .625rem) / 6);
background-color: rgba(75, 180, 230, .5);
}

.row{
background-color: #00f;
}

[class*="col-"]{
min-height: 100px;
background-color: #0f0;
}

[class*="col-"] > div{
min-height: 100px;
background-color: #ddd;
border: 1px solid #f00;
[class*="col-"] > div {
margin: .625rem 0;
line-height: calc((100vh - 12 * .625rem) / 6);
text-align: center;
}

0 comments on commit 1fcd954

Please sign in to comment.