Tag: CSS

8 gru 2018

Mapowanie kolorów scss

Zaczynamy od deklaracji kolorów które będą nam potrzebne w projekcie.

$colors: (
  grey: (
    base: #4d4e55,
    light: #c8c8ce
  ),
  yellow: (
    base: #ffae00
  ),
  green: (
    base: #00ff15
  )
);

Oczywiście nic nie stoi na przeszkodzie aby modyfikować naszą deklarację dodając następne nazwy kolorów light, lighter, lightest, dark, darker, darkest
Mniej więcej wyglądało by tak.

$colors: (
  grey: (
    base: #4d4e55,
    light: xxxx,
    lighter: xxxx,
    lightest: xxxx,
    dark: xxxx
    darker: xxxx
    darkest: xxxx
  ),
  yellow: (
    base: #ffae00
  ),
  green: (
    base: #00ff15
  )
);
Czytaj dalej
27 kwi 2016

Wyśrodkowanie tabeli z danymi do rozmiaru okna

$(window).resize(function() {
var winW = $(window).width();
var conW = parseInt($('#container').css('width'));
var tabW = parseInt($('table.list').css('width'));

if(winW>conW) {
var margin_left = -((tabW - conW)/2)-10;
$('table.list').css({'margin-left':margin_left});
} else {
$('table.list').css({'margin-left':0});
}
});
$(window).resize();

Tabelka normalna:
tabela

Tabelka wyśrodkowana:
tabela wyśrodkowana

1 sty 2016

Optymalizacja wordpress

Poniżej kilka trików które pozwoliły mi przyspieszyć bloga z 32/22 w PageSpeed Insigth do 90/100 - oczywiście to zależy od strony, ilości zdjęć, szybkości serwera itp, wszystko ma znaczenie.
I to jest blog ze zdjęciami (blog.grzegorztomicki.pl), jak dla mnie bardzo zacnie 🙂

1. Będziemy potrzebować dostęp do .htaccess
W którym dodajemy (nie będę opisywał co dokładnie jest w nim robione bo wszystko można znaleźć opisane w internecie)

<ifmodule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
#</ifmodule>



<ifmodule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</ifmodule>

<ifmodule mod_expires.c>
  ExpiresActive on

# Perhaps better to whitelist expires rules? Perhaps.
  ExpiresDefault                          "access plus 1 month"

# cache.appcache needs re-requests in FF 3.6 (thx Remy ~Introducing HTML5)
  ExpiresByType text/cache-manifest       "access plus 0 seconds"



# Your document html
  ExpiresByType text/html                 "access plus 0 seconds"

# Data
  ExpiresByType text/xml                  "access plus 0 seconds"
  ExpiresByType application/xml           "access plus 0 seconds"
  ExpiresByType application/json          "access plus 0 seconds"

# RSS feed
  ExpiresByType application/rss+xml       "access plus 1 hour"

# Favicon (cannot be renamed)
  ExpiresByType image/x-icon              "access plus 1 week" 

# Media: images, video, audio
  ExpiresByType image/gif                 "access plus 1 month"
  ExpiresByType image/png                 "access plus 1 month"
  ExpiresByType image/jpg                 "access plus 1 month"
  ExpiresByType image/jpeg                "access plus 1 month"
  ExpiresByType video/ogg                 "access plus 1 month"
  ExpiresByType audio/ogg                 "access plus 1 month"
  ExpiresByType video/mp4                 "access plus 1 month"
  ExpiresByType video/webm                "access plus 1 month"

# HTC files  (css3pie)
  ExpiresByType text/x-component          "access plus 1 month"

# Webfonts
  ExpiresByType font/truetype             "access plus 1 month"
  ExpiresByType font/opentype             "access plus 1 month"
  ExpiresByType application/x-font-woff   "access plus 1 month"
  ExpiresByType image/svg+xml             "access plus 1 month"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 month"

# CSS and JavaScript
  ExpiresByType text/css                  "access plus 1 year"
  ExpiresByType application/javascript    "access plus 1 year"
  ExpiresByType text/javascript           "access plus 1 year"

  </ifmodule><ifmodule mod_headers.c>
    Header append Cache-Control "public"
    Header unset ETag
    FileETag None
  </ifmodule>
Czytaj dalej
23 sty 2015

Tabele w RWD

Powiedzmy że posiadamy tabelę z rezerwacjami hotelowymi.
Jeżeli zmniejszymy rozdzielczość na wielkość znaczka pocztowego - powiedzmy 320px to nic nie będzie widać i tutaj z pomocą przychodzi CSS.
Poniższe rozwiązanie działa od IE8 no i oczywiście w nowych przeglądarkach 😉

Przykładowa a tak wygląda tabela.

<section class="reservation-box">
    <table class="table-reservation">
        <thead>
        <tr>
            <th>Nazwisko i imię</th>
            <th>Telefon</th>
            <th>Adres e-mail</th>
            <th>Liczba wizyt</th>
            <th>Data ostatniej rezerwacji</th>
        </tr>
        </thead>
        <tbody>
        <tr class="reservation-row-item">
            <td data-title="Nazwisko i imię">Pałczyński stefan</td>
            <td data-title="Telefon">14725836</td>
            <td data-title="Adres e-mail">palczynski.stefan@gmail.com</td>
            <td data-title="Liczba wizyt">0</td>
            <td data-title="Data ostatniej rezerwacji">nie odbyła się</td>
        </tr>
        <tr class="reservation-row-item">
            <td data-title="Nazwisko i imię">Miałczyński Cezary</td>
            <td data-title="Telefon">69522999</td>
            <td data-title="Adres e-mail">mcezik@tet.pl</td>
            <td data-title="Liczba wizyt">1</td>
            <td data-title="Data ostatniej rezerwacji">28 stycznia 2014</td>
        </tr>
        <tr class="reservation-row-item">
            <td data-title="Nazwisko i imię">Tomaczek Andrzej</td>
            <td data-title="Telefon">32999222</td>
            <td data-title="Adres e-mail">tomaczekandrzej@jawa.pl</td>
            <td data-title="Liczba wizyt">1</td>
            <td data-title="Data ostatniej rezerwacji">20 stycznia 2015</td>
        </tr>
        </tbody>
    </table>
</section>

Jak widać tabela jak tabela, wygląda normalnie ale pojawiło się coś w komórkach "data-title" - atrybuty, te same nazwy co w sekcji thead > th.

<tr class="reservation-row-item">
    <td data-title="Nazwisko i imię">Pałczyński stefan</td>
    <td data-title="Telefon">14725836</td>
    <td data-title="Adres e-mail">palczynski.stefan@gmail.com</td>
    <td data-title="Liczba wizyt">0</td>
    <td data-title="Data ostatniej rezerwacji">nie odbyła się</td>
</tr>
Czytaj dalej
2 mar 2014

Skrócenie zbyt długiego tekstu za pomocą CSS

Aby skrócić element do pewnej wielkości musi być on elementem blokowym, można nadać mu oczywiście właściwość block - display:block lub display: inline-block;
Powiedzmy że mamy div o wymiarach 200px szerokości, w którym znajduje się zbyt długi tekst który nie chcemy aby się załamywał do następnej linii a jedynie ucinał i na końcu tekstu pojawiły się trzy kropki "..."

.cut-string {
   width: 200px;
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
<div class="cut-string">Jakiś sobie tekst który jest za dług</div>

Po użyciu tego stylu otrzymujemy "Jakiś sobie tekst który jest z..."

Polecam również lekką bibliotekę do skracania tekstów w wielu liniach, ale i nie tylko. Za jej pomocą można skracać również tabele, elementy list li itd. zerknij może Ci się przyda show-more

Copyright © | kodyWiG Theme