azanebrain / smacss-sass-template Goto Github PK
View Code? Open in Web Editor NEWA SASS template following SMACCS guidelines
A SASS template following SMACCS guidelines
Visited link color should be same as normal link color:
$linkVisitedColor: $linkColor
$site-colors: (
primary: blue,
secondary: red,
tertiary: green
);
Use with:
map-get($site-colors, primary)
Review the other kinds of maps:
http://blog.sass-lang.com/posts/184094-sass-33-is-released
This will let developers easily define site-wide variables (such as font families, sizes, colors, etc), while simultaneously offering an extendable infrastructure that aggregate overlapping pieces either as a full set (@extend %font-normal), or pieces (@extend %font-normal-size)
_typography.sass:
$font-normal-family: "Arial"
$font-normal-size: 12px
$font-heavy-family: "Times New Roman"
$font-heavy-size: 14px
%font-normal-family
font-family: $font-normal-family
%font-normal-size
font-size: $font-normal-size
%font-normal
@extend %font-normal-family
@extend %font-normal-size
%font-heavy-family
font-family: $font-heavy-family
%font-heavy-size
font-size: $font-heavy-size
%font-heavy
@extend %font-heavy-family
@extend %font-heavy-size
modular partials:
P, H1, and .heading use all of the attributes of the font set (normal / heavy).
Tagline only uses the font family attribute of the heavy set. Its size is 1px less than the heavy size
p
@extend %font-normal
h1
@extend %font-heavy
.headline
@extend %font-heavy
border-bottom: solid 1px black
.tagline
@extend %font-heavy-family
font-size: $font-heavy-size - 1
compiles to:
p {
font-family: "Arial";
font-size: 12px;
}
h1, .headline, .tagline {
font-family: "Times New Roman";
}
h1, .headline {
font-size: 14px;
}
.headline {
border-bottom: solid 1px black;
}
.tagline {
font-size: 13px;
}
The heavy font-family is efficiently defined once for h1, .headline, and .tagline, using only 3 lines.
The old method of using only variables would mean an extra line on each element defining its own font-family.
base/_sprites.sass
This file imports the sprite images
images/sprites folder
and in config.rb
gitignore:
images/sprites/*
Either one or two files for all extends and variables
Import order:
Vendors
Variables
Extends
Typography
Base
Modules
States
Mixins
Modules
States
Layout
Add font family and size variables
Add import of Google fonts at top of file
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.