- Atomic CSS is a set of classes representing single-purpose styling units.It is developed by Yahoo Inc.
- You can find more information on atomic CSS in the following link:-
http://acss.io/thinking-in-atomic.html
- In this demo,”We will learn to use atomizer to produce atomic CSS”.
- The atomizer module can be installed globally using npm install atomizer –g command.The following screenshot shows the terminal with atomizer installation.
- There is also a Gulp module for atomizer called gulp-atomizer for creating Gulp task to compile Atomic CSS.The gulp-atomizer can be installed using npm install –save-dev gulp-atomizer command.
- To demonstrate atomic CSS we have create a project named AtomicCSSDemo.The following screen shows the initial structure of project:-
- The content of example1.html is as follows:-
<!doctype html>
<html lang="en-US">
<head>
<link rel="stylesheet" href="dist/atomic.css">
</head>
<body>
<h1 class="Fw(b) Fz(30px) C(red)">
Sandeep, Hello Developers.
</h1>
</body>
</html>
- The gulpfile.js contains the code for defining a Gulp task named atomize using gulp.task() method.The atomize task reads all the HTML file and transpile code to generate atomic.css file in dist directory.The content of gulpfile.js are as follows:-
var gulp = require('gulp');
var acss = require('gulp-atomizer');
gulp.task('atomize', function() {
return gulp.src('./*.html')
.pipe(acss())
.pipe(gulp.dest('dist'));
});
gulp.task('default',['atomize']);
- We can run the gulp task using Gulp command in terminal.The following screenshot shows the terminal with Gulp command in execution.
- The update structure for AtomicCSSDemo project looks like following screenshot with atomic.css inside dist directory.The following screenshot shows the updated directory structure:-
- The content of dist/atomic.css are as follows:-
.C\(red\) {
color: red;
}
.Fw\(b\) {
font-weight: bold;
}
.Fz\(30px\) {
font-size: 30px;
}
- The output of this demo can be seen by opening example1.html in a browser.The following screenshot shows the output of this example:-
- The demo code can be downloaded from the following link:-
https://github.com/saan1984/AtomicCSSDemo
