Kategoriarkiv: CSS

Box-sizing är en räddare i nöden

Postat av
Svara

CSS har sin box model, som man behöver känna till för att verkligen få ihop responsiv desig. Ibland gå man på pumpen och då finns en räddare i nöden, Box sizing. Men det lilla css undret kan du på ett enkelt sätt ändra hur box model fungerar, och till exempel flytta på marginaler så att de istället placeras inne i boxen istället för utanför.

Tänk dig till exempel ett input-fält där du vill ha 4px padding inne i fältet men du vill kunna ha fältets totala bredd till 100% (för att flöda responsivt). Ett tänkbart sätt är att välja 2% padding och 96% bredd, vilket resulterar i att paddingen varierar mellan olika enheter vilket kan vara osnyggt. Men med box-sizing kan man enkelt vända på steken och lägga sin padding inne i boxen, och lungt kunna använda 100% för den totala bredden.

textarea, input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="search"] {
@include box-sizing;
padding: 4px;
width: 100%;
}

och en box-sizing mixin kan se ut på detta sätt.

/*
* Box-sizing
*
*
* Usage:
* @include box-sizing;
* @include box-sizing($type = "border");
*
* Acceptable values are border, content, and padding - content is the default W3C model
*
*/

@mixin box-sizing($type: border) {
box-sizing: #{$type}-box;
-webkit-box-sizing: #{$type}-box;
-moz-box-sizing: #{$type}-box;
}

Kompilera Lesscss med WordPress – och tillbaka på Jayway

Postat av
Svara

Jag har blivit smått förälskad i {less}. Det är helt enkelt sjukt bra och användbart. Att det inte redan finns variabler i css är en gåta men som tur är är det enkelt att använda {less} i WordPress, och man kan göra ungefär såhär.

Först en helt vanlig registrering av style.

wp_register_style('less', get_bloginfo( 'template_directory', 'display' ) . '/style.less', false, '1.0');
wp_enqueue_style('less');

Och därefter behöver man se till att

rel="stylesheet"

skrivs om till

rel="stylesheet/less"

Vilket man kan lösa med ett filter

function filter_less($tag){
 if(strpos($tag,'.less') && strpos($tag,'stylesheet')){
 $tag = str_replace('stylesheet','stylesheet/less',$tag);
 }
 return $tag;
 }
 add_filter( 'style_loader_tag', 'filter_less' );

Det hela parsar du sedan med less.js som inkluderas som vanligt.

wp_enqueue_script('less', get_bloginfo( 'template_directory', 'display' ) . '/js/less-1.3.0.min.js', false, '1.3.0', false);

Själva parsningen går snabbat och resultatet cachas bra av browsern. Dock känns det kanske lite knasigt att parsa i klienten så nu har jag istället tittat lite på hur man kan sköta detta lokalt och skicka ut en klar .css istället.

Det kan man lösa på lite olika sätt och ett väldigt enkelt är att installera WP-less som i sin tur wrappar lessphp. Det har fungera bra för mig med undantag av @import. Lessphp skapar en cachead fil och skapar en ny om orginalet ändras. Sweet, men det fungerar inte om man använder @import, för då ser inte kompilatorn att källfilen blivit ändrad. Minst sagt opraktiskt.

Jo, förresten – jag är tillbaka på Jayway, det känns som att de roligaste och duktigaste konsulterna finns där . Jag är väldigt glad att kunna vara tillbaka igen!

Poetfreak.com är top 15 av världens inspirerande sajter enligt .net Magazine

Postat av
Svara

För en tid sedan blev jag kontaktad av .net magazine som ville prata responsiv design. Jag trodde det var ett skämt, tidningen är baserad i england och världen bäst säljande magasin för designers och webbutvecklare. Vad vill de mig?

Nu visar det sig dock att det inte var ett skämt. Mitt projekt Poetfreak har blivit utvald till en av väldens mest insprirerande responsiva sajter, wow! I deras artikel 15 fabulous responsive sites for your inspiration visas sajten vid sidan av storheter som till exempel Sony och Smashing Magazine.

.net skriver följande, vilket känns riktigt bra och inspirerande! Glad och stolt är bara förnamnet.

Made up of two core views – a list of poems, and a detailed view containing the creation, plus any comments or related writings – on both mobile and desktop, the site maintains a calm air of simplicity. On the iPhone, you sometimes get a strong feeling of Readability or Safari’s Reader function, minimalising the on-screen content in an effective way.

LESS för WordPress

Status

Svara

Dynamisk CSS (LESS) är riktigt intressant. För visst har även du velat kunna sätta variabler i ett stylesheet, för att sedan använda rakt igenom och därmed bara få ett ställa att ändra på. Det finns flea olika sätt att implementera Less på i WordPress. Artikeln ”How to implement LESS in WordPress, first approach” beskriver hur man gör det ”för hand”, men man kan även använda en färdig plugin, till exempel denna, Less.js for WordPress.

Poetfreak.com visas på Mediaqueri.es, fantastiskt!

Status

Svara

I veckan dök mitt projekt Poetfreak.com upp på sajten Mediaqueri.es. Väldigt roligt att bli uppmärksammad utifrån ett rent designperspektiv. Mediaqueri.es är en sajt där man fullt ut fokuserar på att visa goda exempel av responsiv design så det känns givetvis fantastiskt kul! Som grädde på moset kommer ett all time high för Poetfreak.com och februari stannade vid 30 939 besök (trots att det är en kort månad).