HCC - CSS-style guide

CSS-style guide

Styleguide ten behoeve van de nieuwe website. Dit document is levend en zal gaande weg de ontwikkeling van de nieuwe website worden aangevuld. Eerst volgende toevoegingen:

(Favicon blijft gelijk aan huisige site)
- Formulier stijlen

{Logo-gebruik}

Full-color logo (SVG)

Standaard logo (breedte 60px):

Medium logo (breedte 90px):

Medium+ logo (breedte 120px):

Groot logo (breedte 150px):

Wit logo (SVG)

Standaard logo (breedte 60px):

Medium logo (breedte 90px):

Medium+ logo (breedte 120px):

Groot logo (breedte 150px):

{Kleurgebruik}

Primare kleur:

Rood: #da001a

Grijs tinten:

#1: #eae5da	#2: #d8d3c9
#3: #c0bcb3	#4: #a09c95
#5: #7e7b75	#6: #62605b
#7: #4c4b47	#8: #393835
#9: #252423	#10: #161615

10%	20%
30%	40%
55%	65%
75%	85%
95%	100% #161410

Secundaire kleuren:

Blauw #1: #5cb2c0

Blauw #2: #6f9a94

Groen: #d0d53b

Oranje: #f79020

{Tekstopmaak}

H1 kop: Roboto Condensed 26px, font-weight: 700, line-height: 30px, letter-spacing: 0.02em

Lead-text: Roboto 15px, line-height: 23px, font-weight: 400 letter-spacing: 0.02em

Body-text: Noto Sans 14px, line-height: 23px, letter-spacing: 0.02em. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque gravida, turpis quis congue interdum, est neque semper metus.

H2 kop: Roboto Condensed 18px, font-weight: 700, line-height: 23px letter-spacing: 0.08em

H3 kop: Roboto Condensed 18px, font-weight: 400, line-height: 23px letter-spacing: 0.02em

Onderschrift
Roboto Condensed 14px font-weight: 300
line-height: 26px letter-spacing: 0.02em

Voorbeeld artikel

Op donderdag 31 maart is het World Backup Day en dat betekent vooral: uitgebreid ingaan op het belang van back-ups voor het behoud van je digitale leven.

World Backup Day als aandachttrekker voor het belang van een regelmatige back-up is geen overbodige luxe. Op de site van World Backup Day is te zien dat 30% van de mensen geen backups maakt, er 113 telefoons per minuut kwijtraken en dat elke maand 1 op de 10 computers besmet raakt met een virus. Het belang van een goede backup wordt dus nog altijd zwaar onderschat.

Vergeten te back-uppen

Veel mensen die geen back-up maken, geven als belangrijkste excuus dat ze het vergeten. Ze willen wel een back-up maken maar denken er gewoon niet regelmatig genoeg aan. Gelukkig bestaan er voldoende producten en online diensten om een back-up dagelijks automatisch te laten uitvoeren. Je kunt kiezen voor een lokale backup op een harde schijf, waarbij software wordt meegeleverd om de back-up dagelijks op een vast tijdstip te laten plaatsvinden. Je kunt ook voor een cloud back-up kiezen, zoals bijvoorbeeld Microsoft OneDrive of Dropbox. Of je kiest voor een combinatie, waarbij je dagelijkse lokale back-up wordt gesynchroniseerd met je cloud back-up.

Geschreven door Charlotte van Berne

Knop licht

{Containers}

Standaard container

Met BackupMyPC voorkom je dat je bestanden verliest als je computer bijvoorbeeld een virus of technisch probleem heeft. De back-up van je bestanden staat namelijk veilig in de cloud.

Er zijn vele variaties van passages van Lorem Ipsum beschikbaar maar het merendeel heeft te lijden gehad van wijzigingen in een of andere vorm, door ingevoegde humor of willekeurig gekozen woorden die nog niet half geloofwaardig ogen.

Knop basis

Actie container

Special iPad voor Senioren
Van € 12,95 nu voor maar € 9,95
(incl. verzendkosten)
Let op: deze aanbieding is alleen voor HCC-leden

Knop groen

{Messages}

actie geslaagd (#00e000/#00c900)

actie mislukt (#ff0000/#cc0000)

waarschuwing (#ff6600/#e55c00)

{Styles}

----------------------------------------------
Tekst:
----------------------------------------------
p{
     font-family:"Noto Sans",Arial,helvetica,sans-serif;
     font-size: 14px;
     line-height: 23px;
     letter-spacing: 0.02em;
}

.lead{
     font-family:"Roboto",Arial,helvetica,sans-serif;
     font-size: 15px;
     font-weight: 500;
     line-height: 23px;
     letter-spacing: 0.02em;
}

H1{
     font-family:"Roboto Condensed",Arial,helvetica,sans-serif;
     font-size: 26px;
     font-weight: 700;
     line-height: 30px;
     margin: 25px 0px 20px 0px;
     letter-spacing: 0.02em;
}

H2{
     font-family:"Roboto Condensed",Arial,helvetica,sans-serif;
     font-size: 17px;
     font-weight: 700;
     line-height: 23px;
     margin: 25px 0px 10px 0px;
     letter-spacing: 0.06em;
}

H3{
     font-family:"Roboto Condensed",Arial,helvetica,sans-serif;
     font-size: 18px;
     font-weight: 400;
     line-height: 23px;
     margin: 25px 0px 10px 0px;
     letter-spacing: 0.02em;
}

.onderschrift{
     font-family:"Roboto Condensed",Arial,helvetica,sans-serif;
     font-size: 14px;
     line-height: 26px;
     letter-spacing: 0.02em;
     font-weight: 300;
}

----------------------------------------------
Container:
----------------------------------------------
.box{
    border: #ccc 1px solid;
    color: #333;
    background-color: #fff;
    border-radius: 10px 10px 10px 10px;
    width: 276px;
    margin: 0px 0px 25px 0px;
    padding: 0px 0px 5px 0px;
}

.actie{
    border: #9be9a0 1px solid;
    background-color: #f3fcf4;
}

.afbeelding{
     width: 276px;
     margin: 0px 0px 0px 0px;
     border-radius: 9px 9px 0px 0px;
}

----------------------------------------------
Knop:
----------------------------------------------
.button {
font-family:"Roboto",Arial,helvetica,sans-serif;
font-size:15px;
font-weight: 400;
padding:5px 9px;
cursor:pointer;background:none repeat scroll 0 0 #585959;
color:#fff;border:0;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-transition:all 300ms ease;
-moz-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
transition:all 300ms ease;
-webkit-appearance:none;
border: #4b4b4b 1px solid;
     -webkit-box-shadow: 2px 2px 2px -1px #ccc;
     -moz-box-shadow: 2px 2px 2px -1px #ccc;
     box-shadow: 2px 2px 2px -1px #ccc;
}

.button:hover {
background-color:#4b4b4b;
}

.licht{
    border: #999 1px solid;
    background-color: #fff;
    color:#777;
    -webkit-box-shadow: 2px 2px 2px -1px #ddd;
    -moz-box-shadow: 2px 2px 2px -1px #ddd;
    box-shadow: 2px 2px 2px -1px #ddd;
}

.licht:hover {
    background-color:#f6f6f6;
}

.groen{
border: #038d05 1px solid;
background-color: #35b737;
}

.groen:hover {
background-color:#34a035;
}

----------------------------------------------
Message:
----------------------------------------------
.message_nieuw {
    font-family:"Roboto Condensed",Arial,helvetica,sans-serif;
    font-size: 18px;
    font-weight: 400;
    background-color: #00e000;
    border: #00c900 1px solid;
    padding:5px 10px;
    margin: 15px 0px;
    color:#fff;
    letter-spacing: 0.03em;
}

.waarschuwing{
    background-color: #ff6600;
    border: #e55c00 1px solid;
}

.fout{
    background-color: #ff0000;
    border: #cc0000 1px solid;
}

.icoon{
    width: 30px;
    height: 30px;
    float: left;
}

Actueel