Skip to content

Commit

Permalink
Merge pull request #95 from arc42/grid
Browse files Browse the repository at this point in the history 
Grid
  • Loading branch information
@Per-Starke
Per-Starke authored Sep 9, 2024
2 parents 3865d04 + b4d601f commit 71fa565
Show file tree
Hide file tree
Showing 3 changed files with 263 additions and 13 deletions.
172 changes: 159 additions & 13 deletions _pages/overview.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,35 +150,181 @@ arc42 answers the following two questions in a pragmatic way and can be tailored
* _How_ should you document/communicate?


![overview of arc42 volume 8](/images/arc42-overview-V8.png)




<div class="grid-container arc42-architecture">

<a href="#introduction-goals" class="part introduction-goals">
<div class="flex row space-between">
<div class="flex column">
<strong>1. Introduction & Goals</strong><br>
<small>Fundamental requirements, esp. quality goals</small>
</div>
</div>
</a>

<a href="#constraints" class="part constraints">
<div class="flex row space-between">
<div class="flex column">
<strong>2. Constraints</strong><br>
<small>External systems & interfaces</small>
</div>
</div>
</a>

<a href="#context-scope" class="part context-scope">
<div class="flex row space-between">
<div class="flex column">
<strong>3. Context & Scope</strong><br>
<small>Core ideas and solution approaches</small>
</div>
</div>
</a>

<a href="#solution-strategy" class="part solution-strategy">
<div class="flex row space-between">
<div class="flex column">
<strong>4. Solution Strategy</strong><br>
<small>Structure of source code, modularization (hierarchical)</small>
</div>
</div>
</a>

<a href="#building-block-view" class="part building-block-view larger-cell">
<div class="flex row space-between">
<div class="flex column">
<strong>5. Building Block View</strong><br>
<small>Structure of source code, modularization (hierarchical)</small>
</div>
</div>
</a>

<a href="#runtime-view" class="part runtime-view">
<div class="flex row space-between">
<div class="flex column">
<strong>6. Runtime View</strong><br>
<small>Important runtime scenarios</small>
</div>
</div>
</a>

<a href="#deployment-view" class="part deployment-view">
<div class="flex row space-between">
<div class="flex column">
<strong>7. Deployment View</strong><br>
<small>Hardware, infrastructure & deployment</small>
</div>
</div>
</a>

<a href="#crosscutting-concepts" class="part crosscutting-concepts larger-cell">
<div class="flex row space-between">
<div class="flex column">
<strong>8. Crosscutting Concepts</strong><br>
<small>Cross-cutting topics, often very technical and detailed</small>
</div>
</div>
</a>

<a href="#architectural-decisions" class="part architectural-decisions">
<div class="flex row space-between">
<div class="flex column">
<strong>9. Architectural Decisions</strong><br>
<small>Important decisions (not described elsewhere)</small>
</div>
</div>
</a>

<a href="#quality-requirements" class="part quality-requirements">
<div class="flex row space-between">
<div class="flex column">
<strong>10. Quality Requirements</strong><br>
<small>Quality tree, quality scenarios</small>
</div>
</div>
</a>

<a href="#risks-technical-debt" class="part risks-technical-debt">
<div class="flex row space-between">
<div class="flex column">
<strong>11. Risks & Technical Debt</strong><br>
<small>Known problems and risks</small>
</div>
</div>
</a>

<a href="#glossary" class="part glossary">
<div class="flex row space-between">
<div class="flex column">
<strong>12. Glossary</strong><br>
<small>Important and specific terms ("ubiquitous language")</small>
</div>
</div>
</a>

</div>








<hr>

# More details

{% include lazyloading_feature_row id="feature_row1" type="left" %}
<div id="introduction-goals">
{% include lazyloading_feature_row id="feature_row1" type="left" %}
</div>

{% include lazyloading_feature_row id="feature_row2" type="right" %}
<div id="constraints">
{% include lazyloading_feature_row id="feature_row2" type="right" %}
</div>

{% include lazyloading_feature_row id="feature_row3" type="left" %}
<div id="context-scope">
{% include lazyloading_feature_row id="feature_row3" type="left" %}
</div>

{% include lazyloading_feature_row id="feature_row4" type="right" %}
<div id="solution-strategy">
{% include lazyloading_feature_row id="feature_row4" type="right" %}
</div>

{% include lazyloading_feature_row id="feature_row5" type="left" %}
<div id="building-block-view">
{% include lazyloading_feature_row id="feature_row5" type="left" %}
</div>

{% include lazyloading_feature_row id="feature_row6" type="right" %}
<div id="runtime-view">
{% include lazyloading_feature_row id="feature_row6" type="right" %}
</div>

{% include lazyloading_feature_row id="feature_row7" type="left" %}
<div id="deployment-view">
{% include lazyloading_feature_row id="feature_row7" type="left" %}
</div>

{% include lazyloading_feature_row id="feature_row8" type="right" %}
<div id="crosscutting-concepts">
{% include lazyloading_feature_row id="feature_row8" type="right" %}
</div>

<div id="architectural-decisions">
{% include lazyloading_feature_row id="feature_row9" type="left" %}
</div>

{% include lazyloading_feature_row id="feature_row9" type="left" %}
<div id="quality-requirements">
{% include lazyloading_feature_row id="feature_row10" type="right" %}
</div>

{% include lazyloading_feature_row id="feature_row10" type="right" %}
<div id="risks-technical-debt">
{% include lazyloading_feature_row id="feature_row11" type="left" %}
</div>

{% include lazyloading_feature_row id="feature_row11" type="left" %}
<div id="glossary">
{% include lazyloading_feature_row id="feature_row12" type="right" %}
</div>

{% include lazyloading_feature_row id="feature_row12" type="right" %}

<hr>

Expand Down
103 changes: 103 additions & 0 deletions assets/css/grid.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 2 columns */
grid-template-rows: repeat(7, auto); /* 7 rows */
grid-gap: 10px;
}

.part {
padding: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.247);
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.part:hover, .part:link, .part:visited, .part:active {
text-decoration: none !important;
color: #132c15;
}

.part:hover {
transform: scale(1.02);
transition: transform 0.3s ease-in-out;
}

/* Custom colors */
.introduction-goals, .context-scope, .building-block-view, .runtime-view, .crosscutting-concepts {
background-color: rgb(143, 228, 180); /* Green */
}

.constraints, .architectural-decisions, .risks-technical-debt {
background-color: rgb(255, 199, 198); /* Red */
}

.solution-strategy, .quality-requirements {
background-color: rgb(148, 215, 239); /* Blue */
}

.deployment-view, .glossary {
background-color: rgb(255, 235, 159); /* Yellow */
}

/* Positioning for grid items */
.introduction-goals {
grid-column: 1;
grid-row: 1;
}

.constraints {
grid-column: 1;
grid-row: 2;
}

.context-scope {
grid-column: 1;
grid-row: 3;
}

.solution-strategy {
grid-column: 1;
grid-row: 4;
}

.building-block-view {
grid-column: 1;
grid-row: 5 / span 2;
}

.runtime-view {
grid-column: 1;
grid-row: 7;
}

.deployment-view {
grid-column: 2;
grid-row: 1;
}

.crosscutting-concepts {
grid-column: 2;
grid-row: 2 / span 2;
}

.architectural-decisions {
grid-column: 2;
grid-row: 4;
}

.quality-requirements {
grid-column: 2;
grid-row: 5;
}

.risks-technical-debt {
grid-column: 2;
grid-row: 6;
}

.glossary {
grid-column: 2;
grid-row: 7;
}
1 change: 1 addition & 0 deletions assets/css/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
@import 'ukraine.css';
@import 'button.css';
@import 'arc42-org.css';
@import 'grid.css';

/*
fontawesome
Expand Down

0 comments on commit 71fa565

Please sign in to comment.