lewismcarey / nakedsass Goto Github PK
View Code? Open in Web Editor NEWunopinionated SASS Framework
unopinionated SASS Framework
Scaffold ( subject to change over the course of the build out )
Build Out ( base, patterns, components etc )
Review
Compile ( collate into framework)
Review
Finesse ( config and tools )
Review
Test
Document ( collate documentation and normalise )
The aim is to change this to a _config.scss partial - hopefully we can achieve this
_ _
| | | |
_ __ __ _| | _____ __| |___ __ _ ___ ___
| '_ \ / _` | |/ / _ \/ _` / __|/ _` / __/ __|
| | | | (_| | < __/ (_| \__ \ (_| \__ \__ \
|_| |_|\__,_|_|\_\___|\__,_|___/\__,_|___/___/
Using the BEM methodology for naming conventions and SMACSS methodology combined to form an easy to read and understand class naming system.
.block__element--modifier
Or we could be using BEVM
block__element--variation -modifier
Chainable modifiers are denoted by a leading hyphen -, a namespace and a descriptor for the modification.
JS Hooks are prefixed with js- and do not have any styles. Their whole purpose is to be used in JavaScript to target elements in the DOM.
Layouts use the prefix l- these classes should never have visual styling to applied at root.
class names:
.l-flip
.l-stacked
.l-split
.l-bleed
.l-grid
.l-hero
.l-panel
.l-reverse
.l-order
States use the prefix is- these classes are used to change a state of an element.
class names:
.is-active
.is-hidden
.is-disabled
State direction use the same prefix is- and have a set of key names for chaining to the Layout helper e.g. l-hero is-center.
class names:
.is-top
.is-right
.is-left // default
.is-bottom
.is-centered
.is-top-right
.is-top-left
.is-centered-right // default
.is-centered-left // default
.is-bottom-right
.is-bottom-left
Size use the prefix -size- followed by the size name e.g -size-medium
class names:
.-size-tiny
.-size-xsmall
.-size-small
.-size-medium
.-size-large
.-size-xlarge
.-size-hero
Alerts use the prefix alert these classes are used to style a state of an element.
class names:
.alert
.-type-success
.-type-info
.-type-warning
.-type-danger
// SCSS
.alert {
&.-type-success {
// add styles here
}
}
Food for thought as in naming locations on a page?
Gantry
.js-gatm-calltoaction
Module colour schemes are defined via maps, located in _variables.scss
$themes: (
mist: (
header: #DCFAC0,
text: #00968B,
border: #85C79C
),
spring: (
header: #F4FAC7,
text: #C2454E,
border: #FFB158
),
// ...
);
Module elements are defined and located in _theme_module.scss
@mixin themed-header($theme-name) {
h1 {
color: map-get(map-get($themes, $theme-name), header);
}
}
Maybe over the top but could look into: https://github.com/corysimmons/lost
The base of the framework should work of a config file for main variables and styles.
Such as:
Colors
Color Themes/Schemes
Fonts
Typography
Links
This then be powered by mixins/functions for output.
It may be too opinionated but it may be plausible to config objects in a similar manner. e.g. buttons.
We need a naked component template to follow.
E.g. html, sass, readme with stucture to follow, and perhaps examples/demo?
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.