Bra css/jQuery/js trix

Smooth-scroll till en sektion

Gör smooth-scroll till en sektion.
Lägg till den här koden i din .js-fil. Och ankra sedan länkarna till deras ID. Ex. Koden är copypastad här.

<section id="portfolio-section">
</section>
$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

Fade in från vänster eller höger när man skrollar ner

Här finns filerna och dokumentationen.

Tekniker för att Centrera saker

Varje

https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
https://css-tricks.com/almanac/properties/a/align-content/
https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

Centrera saker i flexbox. Du sätter display å justify å sådant. Som jag skrivit nedan i en flexboxcontainer. Då kommer Sakerna som finns i den diven att centreras.

.flexboxcontainer{
width: 400px;
height: 400px;
display: flex;
flex-direction: row; /*Du kan välja mellan row och column */
justify-content: center;
align-items: center;
}

.box-inside-flexboxcontainer {
}

Horizontell centrering

Text-align

Text-align-tekniken är klassisk. Först skapar du en div-container. Denna container behöver ha en specificerad width för att det ska funka. Annars kommer den bara vara så står som innehållet i diven, å då går det ju inte att centrera.

Sedan behöver vi en div som ska centreras. Vi ger den en längd å bredd. Det viktigaste här är att komma ihåg att en div inte är en text, å en div är ett block-element, inte ett inline-element. Därför måste vi förvandla diven till ett inline-blocks-element. Det gör vi med display: inline-block. Då får diven inline-liknande egenskaper samtidigt som den är typ som ett block.

.container {
width: 500px;
text-align: center;
}

.box {
width: 100px;
height: 100px;
display: inline-block;
}

Margin-auto-tekniken

Det går helt enkelt ut på att du sätter marginalen på auto i innerdiven. Då justerar den sig automatiskt och blir därmed centrerad.

.container {
width: 500px;
}

.box {
width: 100px;
height: 100px;
margin-left: auto;
margin-right: auto;
}

Position-absolute-tekniken

Den här tekniken fungerar genom att sätta position absolute, å sedan sätta den på 50%. Detta innebär alltså att positionen är i mitten. Men eftersom diven i det här exemplet är 100px stor så innebär det att det är den vänstra sidan som är precis 50% in i container-diven. För att den ska bli helt centrerad måste vi därför justera marginalen med -50px (alltså hälften av diven storlek). Då blir den helt centrerad.

.container {
width: 500px;
}

.box {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
margin-left: -50px;
}

Vertical centering

Position-absolute-tekniken

Denna teknik är besläktad med tekniken ovan med samma namn. Men det finns några viktiga skillnader. För att innerdiven inte ska flyga iväg åt tjotahejti så måste vi göra .container till position: relative. Annars så flyger innerdiven upp å lägger sig med en margin på -50px från body. Å det vill vi inte.

.container {
width: 500px;
position: relative;
}

.box {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
margin-left: -50px;
top: 50%;
margin-top: -50px;
}

Hur man lägger till fler css-filer i en WordPress Child Theme

Du vill alltså lägga till flera css-filer i din wordpress child theme.


add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
        wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); //Detta är css-filen i ditt parent-theme.
        wp_enqueue_style( 'hittaPaEttNamn', get_stylesheet_directory_uri() . '/css/animations.css' );/*Där det står hittaPaEttNamn kan du själv skriva in ett namn på css-filen. Glöm inte att det ska vara get_stylesheet och inte template. Detta är för att filen finns i child-temat.*/
}

Gör statis bootstrap-sida wordpress-kompatibel

Det krävs en del knep å knåpande för att få en statisk html-sida att fungera i WordPress.

1. Skapa tema-mapp

Skapa en mapp i wp-content/themes/Saft. Jag har valt att kalla vårt låtsastema för Saft i den här övningen.

2. Skapa style.css

I mappen saft måste du lägga till filen style.css. Det smidigaste är att du tar din .css-fil som du har använt och helt enkelt byter namn på den till style.css. Därefter kopierar du in följande kod längst upp i style.css. Fast men din egen info såklart.

/*
Theme Name: Saft
Theme URI: http://www.saft.com
Author: Ditt namn
Author URI: https://www.saft.com
Description: Single page website. 
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: images, scroll
This theme is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

De flesta av de här uppgifterna tror jag är frivilliga. Det enda som är absolut nödvändigt är att ha Theme name.

3. Dela upp index.html-filen.

WordPress är konstruerat så att header och footer är desamma på alla sidor. Om du klickar på en bloggpost så kommer header och footer antagligen se likadana ut som på första sidan. Det är för att index-filen är uppdelad.

  • Eftersom vi kommer använda oss av programmeringsspråket php så behöver du ändra namn på dina filer. byt namn på index.html till index.php.
  • Klipper du ut alla rader i index.php som ingår i headern. Vanligtvis från html-taggen ner till efter menyn och din header. Klipp ut det och klistra in det i filen header.php. Filen måste heta exakt så för att wordpress ska förstå den.
  • Gör samma sak med footer-koden. Lägg all kod som hör till footern i footer.php
  • Om du har en sidebar så gör samma sak med den koden. Klipp ut den och lägg den i sidebar.php

4. Lägg upp det på din server.

Om du behöver hjälp med ftp-kommandon se här. Filerna ska ligga i mappen /wp-content/themes/Saft.

5. Aktivera temat

Sådär, nu kan du logga in på sidan via wordpress-loginen som vanligtvis är saft.com/wp-admin.

6. Knyt ihop.

Så, om du nu går in på din hemsida så ser du att din header och footer inte visas. För att visa den måste du redigera index.php-filen.

Precis i början av filen lägger du därför till.

<?php get_header(); ?>

I slutet av index.php lägger du till

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Man kan säga att dessa små koder är som länkar som binder samman filerna. Om du sprarar index.php å går till din hemsida kan du nu se header och footer.

7. Css

Sådär, nu är sidans innehåll på plats. Men sidan har ingen CSS. För att koppla in css måste du gå in i header.php och lägga till följande kod.

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

Såhär, om du nu går in på hemsidan så ska sidan ha fått sin css. I alla fall style.css. Men för att koppla ihop bootstrap-css måste du lägga till följande kod.


<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/bootstrap.min.css" type="text/css" media="screen" />

Bilder

Dina bilder har nu en ny plats på servern. Därför måste du ändra bildadresserna i din html-kod.

Om du har lagt till bilderna direkt i html-koden måste du ändra till följande adress:
wp-content/themes/saft/img/bild.jpg eller den korrekta adressen. Men bildens adress skall börja från wp-content.

Exempel:

<img src="wp-content/themes/butikboot/img/web.png" class"img-responsive" alt="Cinque Terre">

Om du däremot har lagt till bilderna från ditt stylesheet så blir adressen relativ i förhållande till ditt style.css-dokument. Därför ska adressen börja vara img/bild.jpg.
Det skall exempelvis se ut såhär:

background:url(img/28H.jpg) no-repeat center center fixed;

Om du skriver in adressen korrekt men det ändå inte händer något. Bilderna inte laddas, så kan det vara ett problem med att gamla css har cachats på servern. För att lösa det problemet, kolla min bloggpost om det här.

Skapa ett grid-system enligt Bootstrap-modellen

Den bästa förklaringen för hur ett grid-system bör byggas är av Udacity.

Det är inte helt enkelt att positionera element på en sida. Det bästa sättet för att få tydligt kontroll över elementens position är att skapa ett grid. Alltså ett nät av kolumner. Det vanligaste och bästa sättet är att skapa ett grid med tolv kolumner. Eftersom tolv är ett nummer som kan delas på många olika sätt 12/6, 12/4, 12/3, 12/2.

För att göra gridet responsivt bör det skrivas i procent och inte i pixel.

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title>Projekt 2</title>
        <link rel="stylesheet" href="css/style.css">
    </head>

    <body>

        <h1>Framework test page</h1>

        <div class="grid">
            <div class="row">
                <div class="col-2">Two columns</div>
                <div class="col-10">Ten columns</div>
            </div>
            <div class="row">
                <div class="col-3">Three columns</div>
                <div class="col-9">Nine columns</div>
            </div>
            <div class="row">
                <div class="col-4">Four columns</div>
                <div class="col-8">Eight columns</div>
            </div>
            <div class="row">
                <div class="col-6">Six columns</div>
                <div class="col-6">Six columns</div>
            </div>
            <div class="row">
                <div class="col-7">Seven columns</div>
                <div class="col-5">Five columns</div>
            </div>
            <div class="row">
                <div class="col-8">Eight columns</div>
                <div class="col-4">Four columns</div>
            </div>
        </div> 
    </body>
</html>

Och här är CSS


* {
    border: 1px solid red !important;
}
* {
    box-sizing: border-box;
}
.grid {
    margin: 0 auto;
}
.row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.col-1 {
    width: 8.33%;
}
.col-2 {
    width: 16.66%;
}
.col-3 {
    width: 25%;
}
.col-4 {
    width: 33.33%;
}
.col-5 {
    width: 41.66%;
}
.col-6 {
    width: 50%;
}
.col-7 {
    width: 58.33%;
}
.col-8 {
    width: 66.66%;
}
.col-9 {
    width: 74.99%;
}
.col-10 {
    width: 83.33%;
}
.col-11 {
    width: 91.66px;
}
.col-12 {
    width: 100%;
}
h1 {
    color: green;
}

Så gird-systemet består helt enkelt av en row och kolumner. Kolumnerna kan implementeras på många olika sätt. För att divvarna ska hamna bredvid varandra, och inte under varandra behöver man lägga till attributet display i elementet .row, och ge det värdet: flex; wrap-flex: wrap;. Se koden ovan.

Grundläggande CSS-attribut

CSS – Cascading Stylesheet

Det finns en anledning till att det heter cascading. Det är för att det går uppifrån och ner. Dokumentet läses alltså uppifrån och ner.
Klasser överskriver taggar. Och ID överskriver klasser. Och Inline-styling överskriver ID.
Klasser överskrider varandra om de ligger längre ner i dokumentet. Det är alltså klasserna längre ner som överskriver övriga klasser. Men ID kan ligga var som helst i dokumentet och det överskriver ändå klasser.
Något som överskrider alla andra taggar, klasser, ID, Inline-style är !important.

Så kom ihåg. klasser längre ner i dokumentet överskrider klasser längre upp.

Taggar. p, h1, header
Klasser – skriver över taggar
ID – skriver över klasser
Inline-style style=”” – skriver över ID
!important – skriver över inline-style

Lista och förklaring på de viktigaste CSS-attributen.

Manipulera text

Det finns många sätt att manipulera text.

text-transformation: uppercase; /*Gör om bokstäverna till stora bokstäver.*/

Position

Här är en fenomenal artikel som förklarar de fyra olika modellerna.
Attributet position har fyra olika alternativ.

position: static; //Default inställningen. Den mest grundläggande.
position: relative;
position: fixed; //Fixerad på viewporten.
position: absolute; //Absolut i förhållande till sidan.

position: static;
Den mest grundläggande positionen. Den kan bara lägga block på varandra. Ställa divvar ovanpå varandra.Du kan inte använda några top, bottom, left, right-attribut här inte.

position: relative;
Den fungerar lika bra som static med att bara stapla boxarna. Men, den har speciellt krafter. Det kan även kombineras med left, right, top, bottom.
Exempel:

position: relative;
left: 200px;

I detta exempel så kommer boxen att röra sig 200px från vänster. Det betyder alltså 200px från vänsterkanten mot högerkanten. Om du skulle lägga till left: 200px; i en statisk så skulle ingenting hända.

position: absolute;

position: fixed;

Boxmodellen
Boxmodellen bör alla känna till. Varje DIV består av en margin, border, padding, content.
Margin är området utanför border.
Border är linjen som går runt objektet.
Padding är området mellan content och border.
Content är själva innehållet, t.ex. en text eller en bild.

Här är ett exempel

div {
margin: 0px;
border: 5px solid black; /*5px tjock, solid och färgen svart */
padding: 20px 10px 100px 50px; /*EN för varje sida */
}

Om du lägger til fyran värden till attributed padding så definerar du varje sida.

Box-sizing
Ett väldigt bra attribut att känna till är box-sizing. Det kan vara väldigt förvirrande att arbeta med boxar. Även om man sätter 100% så innebär det inte alltid 100%, och 100px är oftast inte 100px, utan extra beroende på border, och padding. Men om man skapar box-sixing attributet så betyder height och width precis det som man skriver. Height är alltså 100px och varken mer eller mindre. Kom ihåg dock att margin inte räknas in! Men kom ihåg att attributet är relativt nytt och inte fullt implementerat, så glöm inte browserspecifika attributen.

* {
-webkit-box-sizing: border-size;
-moz-box-sizing: border-size;
-ms-box-sizing: border-size;

box-sizing: border-size;
}

Browserspecifika attribut
Browserspecifika attribut är attribut som är specifika för vissa browsers. För attribut som inte är fullt implementerade, där det inte råder någon exakt definition av hur attributet ska implementeras i browser används dessa browserspecifika attribut. Det är ett sätt att säga: Så här vill FireFox implementera det, så här vill Chrome implementera det.
-webkit – Safari och Chrome
-mozMozilla Firefox
-ms – Internet Explorer
-o – Opera

För att veta om det är säkert att använda ett visst attribut kolla Can I Use. Ett exempel är attributet box-sizing: border-box;

Definera alla element i css
Något som kan vara effektivt ibland är att tillfoga alla element ett visst attribut. Till exempel om man håller på å bygger upp en struktur och vill att alla element ska ha en border-attribut då kan man göra det såhär.

* {
    border: 1px solid red;
}

Stjärnan i början indikerar att alla element på sidan får det attributet. En annan användbar situation är följande.

* {
    box-sizing: border-box;
}

Om du vill att alla boxar ska ha box-sixing attributet, som jag skrev om ovan, så kan stjärnan också vara användbar. Glöm inte de browserspecifika attributen.

Media Quieres
Ett av de viktigaste attributen för att göra en hemsida responsiv är med hjälp av media quieres. Det ser ut såhär:

@media

@media only screen and (max-width: 300px) {
    p {
        background-color: blue;
    }
}

Här ser vi ett exempel på en media querie. ordet only hjälper oss med äldre webbläsare. ordet screen betyder att media querien gäller alla slags skärmar, paddor, telefoner eller laptops. Du kan även använda ordet print för att göra om hemsidan till utskriftsformat. and är nödvändig för att binda ihop kommandona.
(max-width: 300px) betyder att reglerna kommer endast gälla för skärmar som är mindre än 300px.

 

Width: 100%

Om man sätter width 100%, och sedan sätter padding eller margin så kommer boxen att vara större än 100% vilket ju är störande. Så för att lösa det kan man lägga till css attributet:

div {
box-sizing: content-box; /*Detta gör att margin och padding räknas in i 100%*/
box-sizing: border-box; /*Detta gör att margin och padding inte räknas in*/
}