Package Exports
- snug-css
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (snug-css) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
SNUG
A simple grid system for Adobe XD.
SNUG is CSS framework.
Build the 'layout grid' on HTML.
Features
Light weight.
SNUG is vary light weight.Responsive.
Grid component made by flexbox.Simple and easy.
Quick start
- Import with your html file.
<link rel="stylesheet" href="dist/css/snug.min.css">or
<link rel="stylesheet" href="//unpkg.com/snug-css@latest/dist/css/snug.min.css">or
$ npm install snug-css
<link rel="stylesheet" href=".node_modules/snugcss/dist/css/snug.min.css">- Markups
<div class="sng-container">
<div class="grid-row">
<div class="column-3 md-4 sm-6>
// Contents
</div>
<div class="column-3 md-4 sm-6>
// Contents
</div>
<div class="column-3 md-4 sm-6>
// Contents
</div>
<div class="column-3 md-4 sm-6>
// Contents
</div>
</div>
</div>How to fix your Adobe XD's comp.
Open your Adobe XD file.
Use artboard grid.
Select layout grid mode.
Open the setting file.
src > _scss > _config > _adobexd.scss
or
node_modules > snug-css > src > _scss > _config > _adobexd.scss- Customize CSS variables.
/* ------------------------
Grid Settings.
------------------------ */
/* Max Column ------- */
$maxcolumn: 12;
/* Grid Gutter Size ------- */
$gutter: 28px;
/* ------------------------
Margin of container outside.
------------------------ */
/* For Extra Large Display ------- */
$retina: 468px;
/* For Full HD Display ------- */
$desktop: 146px;
/* For 1440 px x 800px ------- */
$laptoplarge: 146px;
/* For 1366px x 768px ------- */
$laptop: 139px;
/* For iPad Pro 12.9inch ------- */
$ipadpro129-port: 118px;
$ipadpro129-land: 121px;
/* For iPad Pro 10.5inch ------- */
$ipadpro105-port: 84px;
$ipadpro105-land: 83px;
/* For iPad / iPad mini & Android Tablet ------- */
$ipad-port: 82px;
$ipad-land: 80px;