STYLE-GUIDE
Detta är en huvudrubrik
Huvudrubriker skrivs ut med: <h1>Detta är en huvudrubrik</h1>
Huvudrubrikerna ska ha färgen svart och en bakgrundsfärg.
Detta anpassas i CSS genom följande:
h1 { color: black;
text-align: center;
letter-spacing: 5px;
font-family: roboto;
background-color: lightblue;
font-size: 3em;
}
Detta är en underrubrik
Den skrivs ut med: <h2>Detta är en underrubrik</h2>
Och i CSS:
h2 } color: black;
font-family: roboto;
font-size: 1em;
}
Typsnitt:
Utöver rubriker presenteras övrig text på sidan med typsnittet
Roboto och färgen svart. Det skrivs i CSS:
body {
font-family: roboto;
font-size: 1em;
color: black;
}
Gridsystem
Gridsystemet omfattar hela denna webbsida. Exemplet nedan visar 1 box inklusive Header och Footer. I html-dokumentet skrivs detta ut:
<div class="grid-container">
<div class="item0">
--Innehållet i din Header placeras här--
</div>
<div class="item1">
--Här placeras det du vill att boxen ska innehålla--
</div> <div class="item7">
--Här placeras innehållet i footern--
</div>
Exemplet på gridsystemets CSS ser ut som följande:
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header header header header header header header'
'main1 main1 main1 main1 main1 main1 main1 main1 main1 main1 main1 main1'
'footer footer footer footer footer footer footer footer footer footer footer footer';
grid-gap: 0.5em;
background-color: white;
grid-column-gap: 0.5em;
}
.grid-container > div {
background-image: url(fjader.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
padding: 1em;
border-radius: 10px;
border-color: darkslategray;
border-style: ridge;
}
</div>
Bilder och grafik
Den bild som visas i denna ruta specifieras för just denna ruta i CSS med följande kod:
.item4 { grid-area: main4;
background-image: url(fjader.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
Bakgrundsbilden visas här, den ska visas endast en gång (no-repeat), vara centrerad (background-position) och är fast dvs. behåller sin position (background-attachment).
Detta är ett exempel på hur ett formulär ska se ut på denna sida. Textrutan ska ha en ljusblå border med stilen ridge.
Form-element:
I html skrivs den ut som följande:
<h2 id="form">Form-element:</h2>
<form action="" method="get"> Ett exempel på formulär.
<input type="text" name="exempel"/>
<input type="submit" id="submit" name="submit">
</form>
CSS för formuläret skrivs:
form {
font-size: 13px;
font-family: Georgia, serif;
}
input[type=text] {
border: 3px solid lightblue;
border-style: ridge;
width: 30%;
}
Länkar
Länkarna skrivs på följande sätt i html-dokumentet.
<a href="https://google.com">Denna länk tar dig till google.com</a>
Resultatet blir:
Denna länk tar dig till google.com
Länkarna ska ha färgen blå och även behålla den färgen om länken blivit besökt. Länkarna ska reagera när muspekaren förs över och har därmed tilldelats en annan färg vid den interaktionen (a:hoover). De följer även samma typsnitt men ska vara i fetstil (font-weight: bold)
Länkarnas CSS ser ut på följande vis.
a { text-decoration: none; }
a:link { color: blue }
a:visited { color: blue }
a:hover { color: lightblue }
a { font-weight: bold; }
a { font-family: roboto; }
Tabeller
| Kolumn 1 |
Kolumn 2 |
| Exempel1 |
Exempel2 |
| Exempel3 |
Exempel4 |
| Exempel5 |
Exempel6 |
| Exempel7 |
Exempel8 |
-Tabeller används när mycket information, listor eller stor mängd data ska presenteras. Genom Java-scriptet kan listorna sorteras.
HTML-koden ser ut som följande:
<table id="table_exempel" class="display">
<thead>
<tr>
<th>Kolumn 1</th>
<th>Kolumn 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Exempel1</td>
<td>Exempel2</td>
</tr>
<tr>
<td>Exempel3</td>
<td>Exempel4</td>
</tr>
</tbody>
</table>
Java-script ser ut som följande och återfinns i headern i index-filen:
<script> $(document).ready( function () {
$('#table_exempel').DataTable();
} );
</script>
I index-filen länkar vi till ett CSS-dokument, Java-script dokument och till jQuery i headern genom följande kod:
<script src="jquery-3.3.1.min.js"></script>
<script type="text/javascript"
src="DataTables/datatables.min.js"></script>
<link rel="stylesheet" type="text/css"
href="DataTables/datatables.min.css">
Ovanstående dokument som länkas har hämtats från (se länk):
jQuery download
Datatables.net