🐍Kamil Naja: kwietnia 2016

poniedziałek, 25 kwietnia 2016

Zaznaczanie wszystkich elementów listy z wyjątkiem ostatniego

wtorek, 19 kwietnia 2016

Przycisk ukrywający i pokazujący treść strony

Font awesome - efekt hover - kółko z borderem

Font awesome - idealny background w kształcie koła

niedziela, 17 kwietnia 2016

Narzędzie do sprawdzania jakości CSS

Narzędzie do sprawdzania jakości CSS - http://csslint.net/

Centrowanie kolumny w Bootstrapie

<div class="container">
    <div class="row row-centered">
        <div class="col-xs-6 col-centered"></div>
        <div class="col-xs-6 col-centered"></div>
        <div class="col-xs-3 col-centered"></div>
        <div class="col-xs-3 col-centered"></div>
        <div class="col-xs-3 col-centered"></div>
    </div>
</div>

.row {
text-align: center;
.col-centered //tutaj dodać wszystkie klasy col-*-*
{
display: inline-block;
float: none;
text-align: none;
margin-right: -4px;

}
}
źródło - http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-centered-columns

sobota, 16 kwietnia 2016

Oczyszczony szablon bootstrap

Oczyszczony szablon bootstrap - biały navbar
<!DOCTYPE html>
<html>
<head>

<link href='https://fonts.googleapis.com/css?family=Inconsolata:400,700|Playfair+Display' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Ubuntu:400,300' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="stylesheets/screen.css">
<title>Minimo</title>
<style></style>
</head>
<body>
<nav class="navbar navbar-default navbar-fluid navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Minimo</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Lifestyle</a></li>
<li><a href="#">Photodiary</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Travel</a></li>
</ul>

</div>
</div>
</nav>
</body>
</html>

//css

html {
font-size: 62.5%;
}

.navbar-default {
background-image: none;
background-color: #FFF;
border: 0px;
-webkit-box-shadow: none;
box-shadow: none;
}

środa, 13 kwietnia 2016

Zmiana wysokości navbara w Boostrap

.navbar-header {

height: 90px

}

sobota, 9 kwietnia 2016

Responsywna stopka na dole strony

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html, body {
margin: 0;
display: table;
height: 100%;
width: 100%;
}
.wrapper {
padding: 20px;
height: auto;

}
footer {
background-color: slategrey;
display: table-row;
height: 1px;
}

</style>
</head>
<body>
<div class="wrapper">
This is the content
</div>
<footer>
<div class="wrapper">
To jest treść stopki
</div>
</footer>
</body>
</html>

Strony