INTRODUCTION TO KSS


INTRODUCTION TO KSS:

                 KSS is the abbreviated form of Knyle Style Sheet. It can be simply described as CSS documentation. Documentation for any flavor of CSS that you’ll love to write. It is in the form of human readable, machine parsable and easy to remember. KSS is a documentation specification and styleguide format. It is not a preprocessor, CSS framework, naming convention, or specificity guideline.It is hierarchical in nature.

Why KSS?


If we have added a new member to the medieval of our project, he/she would have coped up to our styles. He/she can’t start anything from scratch. This may increase the time to develop our project. Suppose, we have already documented our CSS, a new member can just refer to the styles and start doing their works. This will increase the efficiency of our project. 


If you’ve ever been a new developer on a team with weak documentation, you know how confusing it can be to try to familiarize yourself with a dozen projects without documentation.


In deciding on a style guide method, we must satisfy two main requirements:

 

Low Friction: The style guide should be easy to find, easy to read, and easy to maintain. 


Platform Agnostic: If  we wanted the things to be worked in the same way across all the platforms,  the style guide should  be easily maintainable, and for us that meant keeping the documentation alongside the CSS.


How to use KSS?


The basic principle is that our style guide is prepared from the comments only.


It consists of 3 parts:

    - [Description Section](#description-section)

    - [Modifiers Section](#modifiers-section)

    - [Reference or Styleguide section](#styleguide-section)



BASIC SYNTAX:


// Title

//

// Description(Not compulsory)

// 

// Markup (It’s like keyword which defines that markup to be used in our style guide)

// <h1 class=”spottersky”>SPOTTERSKY</h1> (Example)

//

// Styleguide Components.post (Example)

// (ꜛ this controls the organization of our style guide. This will have the organization structure like Components/post) 


⇒ Title - Title of our component

⇒ Description - Description of our component

⇒ Markup - It can be used for specifying the styles of buttons.

⇒ Styleguide - Should specify the path. This will arrange our components based on the path that we have given. Path can be specified in terms of words or using the number(most likely the id of any folder)


It can be used to document the added classes or pseudo classes. This modifier classes are specified in the markup itself by adding “{{modifier_class}}” in the class.


// :hover             - Subtle hover highlight.

// .stars-given       - A highlight indicating you've already given a star.

// .stars-given:hover - Subtle hover highlight on top of stars-given styling.

// .disabled          - Dims the button to indicate it cannot be used.


EXAMPLE KSS:

// Spotter Sky 

//

// Large, **in charge**, and centered. (this is the description of your component. you can use markdown in here.)

//

// Markup (define the markup to be used in your styleguide):

// <h1 class="spottersky">SPOTTERSKY</h1>

//

// Styleguide Components.article.spotter-sky 


.spottersky { 

    font-size: 3em; 

    text-align: center;

    font-family: fantasy; 

}


        How to implement KSS?


1. Initialize npm


```command line

$ npm init

```


2. Install node-sass


```command line

$ npm install node-sass

```


3. Write Node-sass command


    Open the **package.json** file.In the scripts section add an **scss** command.


```json

"scripts": {

  "test": "echo \"Error: no test specified\" && exit 1",

  "scss": "node-sass --watch scss -o css"

}

```


> `node-sass`: Refers to the node-sass package

> `--watch`: Watch all .scss files in the sass/ or scss/ folder and recompile them every time there's a change

> `scss`: *The folder name* where we put all our .scss

> `-o css`: The output folder for our compiled CSS.


4. Run the script


```Command Line

$ npm run scss

```


5. Initial setup of KSS


```Command Line

$ npm install --save-dev kss michelangelo

```


6. To verify that it was installed


```Command Line

$ ./node_modules/.bin/kss --version

```


7. Create a file named `kss.config.json` to configure our KSS settings.


```json

{

    "title": "Title of the Style Guide",

  

    "source": "scss/",

  

    "destination": "styleguide/",

  

    "builder": "node_modules/michelangelo/kss_styleguide/custom-template/",

  

     "css": [

      "css/main.css"

    ]


  }

```


8. To compile the styleguide


```Command Line

$ npm run kss

$ ./node_modules/.bin/kss --config kss-config.json

```


9. To view the static styleguide html


`/styleguide` in the url



Thanks for reading… Get to know more about frontend …!!!? I strongly recommend you to get along with our posts. Our posts will make your future shine bright.

Comments

Post a Comment

Popular posts from this blog

MULTIMEDIA

Image
  These days, most of us carry a fully functional multimedia studio around in our smartphones says Austin Kleon . We people  really wanted to engage with our own generation, one that is increasingly speaking in an audio/video multimedia language.  Multimedia is an effective way to communicate and share the ideas with users. W hat is multimedia??.... In what ways are they used ??.. Well, The proper definition of multimedi a is a computerized method of presenting information combining text, audio, video, graphics and animation . As the name suggests it is the combination of multi and media that different types of hardware and software tools  are used for communication of information. Let us see some examples related to multimedia from the bricks to the brains; ·         The text we see in books, newspapers or any means of media ·         The sound we hear when we listen to music ·         The graphics we see in science fiction movies ·         Ads placed in newspapers by busi
Read more

Exploring The Hidden Internet

Image
What is the internet to us? Facebook, Instagram, Twitter, Youtube, Amazon, Flipkart, and many more websites, That's it? Well, no! The most fascinating and shocking fact is that the internet we use each day is just 4%. In this article, we are going to learn about the mysterious side of the internet.  Curious? Let's head on to our topic. Introduction The Internet is a vast network that connects all the computers across the globe which enables people to share information as well. The internet pieces of information are broadly classified into three types : Surface Web Deep Web Dark Web Surface VS Deep VS Dark Web Let's imagine the internet like a glacier. As we know the visible part of the glacier is small but the non-visible parts of the glacier under it are too deep. SURFACE WEB: The surface Web is often compared to the top of the glacier which is small, visible, and can be accessed easily. In other words, the Surface Web is simply the internet we use in our daily life. The s
Read more

SKINPUT TECHNOLOGY

Image
Touch screens may be popular both in science fiction and real life as the symbol of next-gen technology, but an innovation called Skinput suggests the true interface of the future might be us “Skinput” turns body into touch screen interface. The founders of this great technology  is Microsoft and Carnegie Mellon University. By the way, what do skinput technology mean?....           Skinput is a technology that appropriates human body for acoustic transmission, enabling the skin to be utilized as an input surface.           This technology allows human hand and arm as touch screens, by sensing various low-frequency vibrations and sounds that are generated by touching different part of the hand or arm.           These signals are sensed using various sensors worn on the arm in the form of arm band. "The arm band is a crude prototype, the next generation could be made considerably smaller – likely easily fitting into a wristwatch." From there it's fairly simple to
Read more