Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
LESS: My reset file
/*Reset file*/
/* ===== Colors ===== */
/*Design, layout*/
@green: #18bc9c;
@green-darker: darken(#11866f, 2%);
@orange: #ffa800;
@orange-light: #ffb629;
@orange-medium: darken(@orange, 5%);
@orange-dark: darken(@orange, 10%);
/*Text*/
@grey: #626161;
@grey-light: lighten(@grey, -10%);
/* ===== Typography ===== */
@font-sans: 'Lato', Helvetica, Arial, sans-serif;
@font-serif: 'Merriweather', 'Times New Roman', serif;
@fz-base: 16;
.lowercase{ text-transform: lowercase; }
.uppercase{ text-transform: uppercase; }
.font-size(@size: 16){
font-size: unit(@size, px);
font-size: unit(@size/10, rem);
}
.light{ font-weight: 300; }
.regular{ font-weight: 400; }
.semibold{ font-weight: 600; }
.semibold-italic{ font-weight: 600; font-style: italic; }
.bold{ font-weight: 700; }
/*For label in comments*/
label{ .semibold; }
/* ===== Spacing ===== */
@spacing-m: 38px;
@spacing-l: 52px;
/* ===== Animations ===== */
/*transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]*/
.transition(@trans: all, @sec: 0.1s, @timing: linear, @delay: 0s){
-webkit-transition: @arguments;
-moz-transition: @arguments;
-o-transition: @arguments;
transition: @arguments;
}
.translateY(@height: -4px){
-webkit-transform: translateY(@height);
-moz-transform: translateY(@height);
-ms-transform: translateY(@height);
-o-transform: translateY(@height);
transform: translateY(@height);
}
/* ===== RESETS & BASIC PAGE SETUP =====*/
* { margin: 0; padding: 0; vertical-align: baseline; }
html { overflow-y: scroll; font-size: 62.5%; /* set font-size to 62,5% in html to use rem */ }
body {
color: @grey;
font-family: @font-sans;
.font-size(22);
font-weight: 400;
line-height: 140%;
}
article, aside, figure, footer, header, hgroup, menu, nav, section, button{ display: block; }
ol, ul{ list-style: none; }
/* ===== SELECTION & HIGHLIGHTS COLORS ===== */
::selection{ background: darken(@orange, 2%); color: white;}
::-moz-selection{ background: darken(@orange, 2%); color: white; }
/* ===== USEFUL CLASSES ===== */
.float-left{ float: left; }
.float-right{ float: right; }
.text-align-left{ text-align: left; }
.text-align-center{ text-align: center; }
.text-align-right{ text-align: right; }
.clear{ clear: both; }
.outline{ border: 1px solid black;}
.nothing{ padding: 0; margin: 0;}
.left-clear{ margin-left: 0; padding-left: 0;}
.right-clear{ margin-right: 0; }
.border-radius(@radius: 4px){
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
/* ===== LINKS ===== */
a{ text-decoration: none; }
a:link, a:visited{ color: @orange; }
a:hover, a:active{ color: @orange-dark; }
a img { border: 0; } /*border: 0 is better then border: none, less character*/
/* ===== HEADINGS =====*/
h1, h2, h3, h4, h5, h6 {
font-family: @font-sans;
font-style: normal;
line-height: 150%;
}
h1 { .font-size(26); font-weight: 700; }
h2 { .font-size(32); font-weight: 700; .uppercase; }
h3 { .font-size(22); font-weight: 600; }
h4 { .font-size(20); font-weight: 400; }
h5 { .font-size(18); font-weight: 400; }
h6 { .font-size(16); font-weight: 400; }
hr{
border-top: 4px solid #ebeaea;
margin: 0;
}
/* ===== MEDIA QUERIES BREAKPOINTS =====*/
@screen-xs: 480px;
@screen-sm: 768px;
@screen-md: 992px;
@screen-lg: 1200px;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.