2017-11-14 23:24:52 +02:00
var version = require ( '../vinf' ) . version ;
2017-11-14 17:20:04 +02:00
module . exports = {
id : 'getting-started' ,
title : 'Getting started' ,
2017-11-14 23:24:52 +02:00
keywords : [ 'html' , 'viewport' , 'head' , 'meta' , 'getting started' , 'introduction' , 'browser support' , 'installation' , 'usage' , 'setup' , 'cdn' , 'npm' , 'yarn' ] ,
description : ` <p>You can get started using <strong>mini.css</strong> in one of many ways. It is published on <strong>npm</strong> and <strong>yarn</strong>, so you can easily download it, using your preferred package manager:</p>
< div class = "row" > < div class = "col-sm-12 col-md" > < pre > npm install mini . css < / p r e > < / d i v > < d i v c l a s s = " c o l - s m - 1 2 c o l - m d " > < p r e > y a r n a d d m i n i . c s s < / p r e > < / d i v > < / d i v >
< br / > < p > Alternatively , you can use either < strong > rawgit < / s t r o n g > o r < s t r o n g > c d n j s < / s t r o n g > t o i m p o r t < s t r o n g > m i n i . c s s < / s t r o n g > i n t o y o u r H T M L p a g e ' s < c o d e > & l t ; h e a d & g t ; < / c o d e > t a g : < / p >
< pre > & lt ; link rel = & quot ; stylesheet & quot ; href = & quot ; https : //cdn.rawgit.com/Chalarangelo/mini.css/${version}/dist/mini-default.min.css"></pre>
< pre > & lt ; link rel = & quot ; stylesheet & quot ; href = & quot ; https : //cdnjs.cloudflare.com/ajax/libs/mini.css/${version}/mini-default.min.css"></pre>
< br / > < p > After adding < strong > mini . css < / s t r o n g > t o y o u r p r o j e c t , r e m e m b e r t o a l s o a d d t h e f o l l o w i n g l i n e i n s i d e y o u r H T M L p a g e ' s < c o d e > & l t ; h e a d & g t ; < / c o d e > t a g t o u t i l i z e t h e v i e w p o r t m e t a t a g : < / p >
< pre > & lt ; meta name = & quot ; viewport & quot ; content = & quot ; width = device - width , initial - scale = 1 & quot ; & gt ; < / p r e >
< br / > < p > < strong > mini . css < / s t r o n g > i s c r a f t e d w i t h l o n g - t e r m s u p p o r t i n m i n d , s o e x p e c t i t t o b e c o m p a t i b l e w i t h a l l m o d e r n b r o w s e r s , a s w e l l a s t h e i r f u t u r e v e r s i o n s . H o w e v e r , m o s t l e g a c y a n d p r o x y b r o w s e r s , s u c h a s I n t e r n e t E x p l o r e r , O p e r a M i n i , I E M o b i l e a n d U C B r o w s e r a r e n o t o f f i c i a l l y s u p p o r t e d , m e a n i n g c e r t a i n f e a t u r e s m a y n o t b e d i s p l a y e d p r o p e r l y o r b e h a v e e x a c t l y a s e x p e c t e d . < / p > < b r / >
< figure class = "container" > < div class = "row" >
< div class = "col-sm" style = "text-align:center; background: #35BCE6; padding: 1rem;" > < img src = "browser-logos/edge_128x128.png" alt = "edge" > < br / > < h3 > < small > & nbsp ; & nbsp ; Edge < sup style = "-0.675em" > < i class = "fa fa-lg fa-exclamation" aria - hidden = "true" style = "font-size: 80%;" > < / i > < / s u p > < / s m a l l > 1 5 < / h 3 > < / d i v >
< div class = "col-sm" style = "text-align:center; background: #FF742E; padding: 1rem;" > < img src = "browser-logos/firefox_128x128.png" alt = "firefox" > < br / > < h3 > < small > & nbsp ; Firefox < / s m a l l > 3 1 < / h 3 > < / d i v >
< div class = "col-sm" style = "text-align:center; background: #FFE270; padding: 1rem;" > < img src = "browser-logos/chrome_128x128.png" alt = "chrome" > < br / > < h3 > < small > & nbsp ; Chrome < / s m a l l > 4 9 < / h 3 > < / d i v >
< div class = "col-sm" style = "text-align:center; background: #00D0FF; padding: 1rem;" > < img src = "browser-logos/safari_128x128.png" alt = "safari" > < br / > < h3 > < small > & nbsp ; Safari < / s m a l l > 9 . 1 < / h 3 > < / d i v >
< div class = "col-sm" style = "text-align:center; background: #FF6E6E; padding: 1rem;" > < img src = "browser-logos/opera_128x128.png" alt = "opera" > < br / > < h3 > < small > & nbsp ; Opera < / s m a l l > 3 6 < / h 3 > < / d i v >
< div class = "col-sm" style = "text-align:center; background: #0F98E0; padding: 1rem;" > < img src = "browser-logos/android_128x128.png" alt = "android" > < br / > < h3 > < small > & nbsp ; Android < / s m a l l > 5 6 < / h 3 > < / d i v >
< / d i v > < f i g c a p t i o n > B r o w s e r v e r s i o n s o f f i c i a l l y s u p p o r t e d < / f i g c a p t i o n > < / f i g u r e > < b r / > ` ,
2017-11-14 17:20:04 +02:00
example : '' ,
samples : [ ] ,
notes : [ ] ,
customization : [ ] ,
modifiers : [ ] ,
dos : [ ] ,
2017-11-14 23:24:52 +02:00
donts : [ ]
2017-11-14 17:20:04 +02:00
}
