dbroqua/KNACSS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Reorganized a bunch of things; normalized comments across all files; added a message system (_message.scss)

Browse source
This commit is contained in:
Hugo Giraudel 2013-07-10 22:14:31 +02:00
parent b0993aecee
commit 25cc20892d
16 changed files with 157 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
0.1'
View file

9
sass/_forms.scss
View file

@ -1,6 +1,6 @@
/* ----------------------------- */
/* ==forms */
/* ----------------------------- */
/*----------------------------*\
* Forms *
\*----------------------------*/
/**
* Thanks to HTML5boilerplate
@ -38,6 +38,9 @@ textarea {
@include inline-block();
}
/**
* Alternative classes
*/
.btn.alternate {}
.btn.highlight {}
.login {}

6
sass/_grids.scss
View file

@ -1,6 +1,6 @@
/* ----------------------------- */
/* ==grids */
/* ----------------------------- */
/*----------------------------*\
* Grids *
\*----------------------------*/
/**
* Equal grids with 2% gutter

25
sass/_helpers.scss
View file

@ -1,6 +1,6 @@
/* ----------------------------- */
/* ==helpers */
/* ----------------------------- */
/*----------------------------*\
* Helpers *
\*----------------------------*/
/**
* .{SIZE}-hidden and .{SIZE}-visible helpers
@ -65,3 +65,22 @@ $breakpoints: large, small, tiny;
hyphens: auto;
}
/**
* Skip links
*/
.skip-links {
position: absolute;
a {
position: absolute;
left: -7000px;
padding: 0.5em;
background: #000;
color:#fff;
text-decoration: none;
&:focus {
position: static;
}
}
}

6
sass/_icons.scss
View file

@ -1,6 +1,6 @@
/* ----------------------------- */
/* ==icons */
/* ----------------------------- */
/*----------------------------*\
* Icons *
\*----------------------------*/
.icon {
@include inline-block();

12
sass/_iefix.scss
View file

@ -1,10 +1,18 @@
/* HasLayout for IE6/IE7 */
/*----------------------------*\
* IE Fix *
\*----------------------------*/
/**
* HasLayout for IE6/IE7
*/
@if $legacy-support-for-ie {
.row, .col {
*zoom: 1;
}
/* Warning: .col needs a width on IE6/IE7 */
/**
* Warning: .col needs a width on IE6/IE7
*/
.col {
*display: inline;
*zoom: 1;

14
sass/_layout.scss
View file

@ -1,6 +1,6 @@
/* ----------------------------- */
/* ==layouts */
/* ----------------------------- */
/*----------------------------*\
* Layout *
\*----------------------------*/
/**
* Switching box-model for all elements
@ -176,10 +176,10 @@ img.right { margin-bottom: 5px; }
.w300p { width: 300px; }
.w400p { width: 400px; }
.w500p { width: 500px; }
.w600p { width: 600px; @extend %width-helper; }
.w700p { width: 700px; @extend %width-helper; }
.w800p { width: 800px; @extend %width-helper; }
.w960p { width: 960px; @extend %width-helper; }
.w600p { width: 600px; @extend %width-helper; }
.w700p { width: 700px; @extend %width-helper; }
.w800p { width: 800px; @extend %width-helper; }
.w960p { width: 960px; @extend %width-helper; }
.mw960p { max-width: 960px; }
/**

45
sass/_messages.scss Normal file
View file

@ -0,0 +1,45 @@
/*----------------------------*\
* Messages *
\*----------------------------*/
/**
* Shared classes between all types of messages
*/
%message {
padding: .5em;
border-radius: .1em;
border: 1px solid;
text-shadow: 0 1px 0 rgba(white, .2);
}
/**
* Color scheming based on a single color
*/
@mixin message-scheme($color) {
color: $color;
background: lighten($color, 38%);
border-color: lighten(adjust-hue($color, -10), 20%);
}
/**
* Message types
*/
.message-error {
@extend %message;
@include message-scheme(#b94a48);
}
.message-ok {
@extend %message;
@include message-scheme(#468847);
}
.message-warning {
@extend %message;
@include message-scheme(#c09853);
}
.message-info {
@extend %message;
@include message-scheme(#3a87ad);
}

11
sass/_mixins.scss
View file

@ -1,9 +1,9 @@
/* ----------------------------- */
/* ==mixins */
/* ----------------------------- */
/*----------------------------*\
* Mixins *
\*----------------------------*/
/**
* Mixin to handle media queries breakpoints
* Mixin to handle media queries and retina
*/
@mixin mq($keyword) {
@if $keyword == large {
@ -59,6 +59,9 @@
}
}
/**
* Mixin to prefix properties
*/
@mixin prefix($property, $value) {
$vendors: "-webkit-", "-moz-", "-ms-", "-o-", "";
@each $v in $vendors {

6
sass/_print.scss
View file

@ -1,6 +1,6 @@
/* ----------------------------- */
/* ==print */
/* ----------------------------- */
/*----------------------------*\
* Print stylesheet *
\*----------------------------*/
@media print {
* {

57
sass/_reset.scss
View file

@ -1,10 +1,7 @@
/* ----------------------------- */
/* ==reset */
/* ----------------------------- */
/*----------------------------*\
* Soft reset *
\*----------------------------*/
/**
* Soft reset
*/
html, body,
textarea,
figure, label {
@ -20,8 +17,7 @@ ul, ol {
}
}
code, pre,
samp, kbd {
code, pre, samp, kbd {
white-space: pre-wrap;
font-family: consolas, 'DejaVu Sans Mono', courier, monospace;
line-height: 1em;
@ -55,8 +51,7 @@ mark {
background: #ff0;
}
sup,
sub {
sup, sub {
vertical-align: 0;
position: relative;
}
@ -69,10 +64,6 @@ sub {
top: .5ex;
}
table {
margin-bottom: 1.5em;
}
/**
* Avoid top margins on first content element
*/
@ -124,6 +115,17 @@ img {
}
}
/**
* Hide script and style tags in case of table mode
*/
body > script,
body > style {
display: none !important;
}
/**
* Force word wrapping on small screens
*/
@include mq(small) {
div, textarea,
table, td, th,
@ -135,31 +137,4 @@ img {
-moz-hyphens: auto;
hyphens: auto;
}
}
/**
* Hide script and style tags in case of table mode
*/
body > script,
body > style {
display: none !important;
}
/* skip-links */
.skip-links {
position: absolute;
a {
position: absolute;
left: -7000px;
padding: 0.5em;
background: #000;
color:#fff;
text-decoration: none;
&:focus {
position: static;
}
}
}

8
sass/_rwd.scss
View file

@ -26,14 +26,6 @@
zoom: 1.0;
}
@include mq(medium) {
/* Big resources like background-images, font-faces, etc. */
}
@include mq(retina) {
/* Retina-specific stuff here */
}
/* ---------------------------------- */
/* ==Responsive large / small / tiny */
/* ---------------------------------- */

14
sass/_tables.scss
View file

@ -1,8 +1,8 @@
/* ----------------------------- */
/* ==tables */
/* ----------------------------- */
/*----------------------------*\
* Tables *
\*----------------------------*/
$border: 1px solid #ccc;
$border: 1px solid #ccc; // Default border style for all tables
table,
.table {
@ -19,6 +19,7 @@ table,
table {
width: 100%;
border: $border;
margin-bottom: 1.5em;
&#recaptcha_table {
table-layout: auto; /* 1 */
@ -35,9 +36,12 @@ caption {
font-style: italic;
}
/**
* Remove thead on tiny screens
*/
thead {
@include mq(tiny) {
display: none;
display: none; /* 1 */
}
}

12
sass/_typography.scss
View file

@ -7,17 +7,19 @@
* 2. Orientation iOS font-size fix
*/
html {
font-size: 62.5%; /* 1 */
font: 62.5%/1.5 "Century Gothic", helvetica, arial, sans-serif; /* 1 */
color: #000;
@media (orientation: landscape) and (max-device-width: 768px) {
-webkit-text-size-adjust: 100%; /* 2 */
}
}
/**
* 1. Put the base font-size at 14px (1.4rem)
*/
body {
color: #000;
font-family: "Century Gothic", helvetica, arial, sans-serif;
@include rem(14);
line-height: 1.5;
@include rem(14); /* 1 */
}
/**

34
sass/knacss.scss
View file

@ -1,7 +1,10 @@
/*
* www.KNACSS.com V2.6d @author: Raphael Goetter, Alsacreations
* Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/
*/
/**
* www.KNACSS.com V2.6d @author: Raphael Goetter, Alsacreations
* Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/
*
* Sass version maintained by @HugoGiraudel
* Please report any bug or suggestion
*/
/**
* Enable support for old browsers
@ -14,14 +17,15 @@ $legacy-support-for-mozilla: true; /* 2 */
/**
* Import modules of your choice
*/
@import "mixins";
@import "helpers";
@import "forms";
@import "icons";
@import "print";
@import "tables";
@import "grids";
@import "layout";
@import "typography";
@import "iefix";
@import "reset";
@import "mixins"; // Sass only
@import "reset"; // Home made reset
@import "helpers"; // A couple of helper classes and Sass placeholders
@import "layout"; // Everything to layout your pages
@import "grids"; // Small grid system
@import "typography"; // Typography baseline and vertical rythm
@import "tables"; // Tables
@import "forms"; // Forms
@import "icons"; // Icons (unicode based) and bullets
@import "messages"; // Message system
@import "iefix"; // Some IE fixes
@import "print"; // Print stylesheet

1
stylesheets/knacss.css
View file

File diff suppressed because one or more lines are too long