-
- GitHub
- GitLab
- Bitbucket
-
By logging in you accept
our terms of service
and privacy policy
Import `base.scss`.
Homepage Repository npm Sass Download
npm install @wearedupl/base@2.1.1
Import base.scss.
If necessary, customize the default settings overriding the exposed variables.
| Variable | Accepts | Default | Description |
|---|---|---|---|
$__semantic |
boolean |
false |
Set to true to use the placeholder selector in place of the class selector. |
$__ns |
string |
"dpl-" |
Prefix all the generated rules with a namespace. |
$__ctxPrefix |
string |
\@ |
Prefix all the generated contexts. |
$__e |
string |
"-" |
Prefix an element semantically tied to its block. |
$__m |
string |
"--" |
Prefix an element modifier. |
$__fontSize |
length |
16px |
Set the base font size for the entire project. |
$__base |
length |
16px |
Set the base length used for generating modular scales. |
$__ratio |
number |
1.5 |
Set the ratio used for generating modular scales. |
$__fraction |
(...number) |
2 3 4 5 |
Generate fractional sizes. |
$__steps |
number |
7 |
Max steps count used for stepping rules. |
$__breakpoints |
(...(string: length)) |
See (1) | Used for media queries and contextual rules. |
$__tweakpoints |
(...(string: length)) |
() |
Used for media queries. |
You can customize settings by initializing a variable with the same name before bootstraping the framework.
Ex.
$__ns: "";
$__fractions: 12;
$__tweakpoints: (
"broken_navigation": 947px
);
@import "@wearedupl/base/base.scss";
| Context | Length |
|---|---|
xxs |
320px |
xs |
480px |
s |
768px |
m |
992px |
l |
1200px |
You can import only the modules you need for your project.
Importing base.scss will import them all.
To customize the build, import the core.scss and any modules you may need.
Ex.
@import
"@wearedupl/base/core",
"@wearedupl/base/add/reset",
"@wearedupl/base/add/layout",
"@wearedupl/base/add/utils/spacing",
"@wearedupl/base/add/utils/wrap/responsive";
| Imports | Description |
|---|---|
@wearedupl/base/base |
Bootstrap the framework and imports all modules. |
@wearedupl/base/core |
Bootstrap the framework. |
@wearedupl/base/add/reset |
Import the reset module. |
@wearedupl/base/add/layout |
Row, Row--center, Row--right, Row--middle, Row--bottom, Row--gap$i, Row-col |
@wearedupl/base/add/utils |
Manifest for utils. |
@wearedupl/base/add/utils/helpers |
Manifest for helpers. Helpers are generic rules that does not fall into a specific category. |
@wearedupl/base/add/utils/helpers/clearfix |
cf |
@wearedupl/base/add/utils/helpers/debug |
debug |
@wearedupl/base/add/utils/offset |
Manifest for offset. |
@wearedupl/base/add/utils/offset/base |
push, pull, push-$n-$m, pull-$n-$m |
@wearedupl/base/add/utils/offset/responsive |
push, pull, push-$n-$m@$ctx, pull-$n-$m@$ctx |
@wearedupl/base/add/utils/size |
Manifest for size. |
@wearedupl/base/add/utils/size/base |
size-$n-$m |
@wearedupl/base/add/utils/size/responsive |
size-$n-$m@$ctx |
@wearedupl/base/add/utils/spacing |
Manifest for spacing. |
@wearedupl/base/add/utils/spacing/base |
m$i, mh$i, mv$i, mt$i, mb$i, ml$i, mr$i, nmt$i, nmb$i, nml$i, nmr$i, ml-$n-$m, mr-$n-$m, nml-$n-$m, nmr-$n-$m, p$i, ph$i, pv$i, pt$i, pb$i, pl$i, pr$i |
@wearedupl/base/add/utils/spacing/responsive |
m$i@$ctx, mh$i@$ctx, mv$i@$ctx, mt$i@$ctx, mb$i@$ctx, ml$i@$ctx, mr$i@$ctx, nmt$i@$ctx, nmb$i@$ctx, nml$i@$ctx, nmr-$i@$ctx, ml-$n-$m@$ctx, mr-$n-$m@$ctx, nml-$n-$m@$ctx, nmr-$n-$m@$ctx, p$i@$ctx, ph$i@$ctx, pv$i@$ctx, pt$i@$ctx, pb$i@$ctx, pl$i@$ctx, pr$i@$ctx |
@wearedupl/base/add/utils/wrap |
Manifest for wrap. |
@wearedupl/base/add/utils/wrap/base |
wrap, wrap--$ctx |
@wearedupl/base/add/utils/wrap/responsive |
wrap, wrap--$ctx@$ctx |
Where
$n-$m is a fraction as 3 of 5 (from $__fractions)
$ctx is the context (from $__breakpoints)
$i is a step (from $__steps)
<div class="dpl-wrap dpl-wrap--l@l dpl-wrap--m@m dpl-wrap--s@s dpl-wrap--xs@xs dpl-debug">
<div class="dpl-Row dpl-Row--gap3 dpl-mb3 dpl-mb4@xs">
<div class="dpl-Row-col dpl-size-1-2@s dpl-size-3-5@m dpl-size-4-5@l">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis repudiandae, illum. Corrupti iusto consectetur reprehenderit modi, deserunt? Dolor, voluptatibus nostrum tempore perspiciatis exercitationem atque esse adipisci amet, non, quasi laborum.</div>
<div class="dpl-Row-col dpl-size-1-2@s dpl-size-2-5@m dpl-size-1-5@l">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur similique officia numquam quibusdam, vero beatae. Rem in odio asperiores illum incidunt distinctio quasi, repellat illo perferendis quam eaque, vel voluptate.</div>
</div>
<div class="dpl-Row dpl-Row--gap3">
<div class="dpl-Row-col dpl-size-1-3@xs dpl-push-2-3@xs dpl-mb3 dpl-mb0@xs">1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque placeat vero voluptas consequatur debitis, similique beatae laborum! Tenetur, quibusdam, ullam? Ea, eum, laudantium. Quis enim adipisci voluptatem, dolore a deleniti!</div>
<div class="dpl-Row-col dpl-size-1-3@xs dpl-pull-1-3@xs">2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse eligendi, facere eveniet mollitia. Deserunt, unde, illo. Beatae porro officia, eos. Modi sit adipisci asperiores nihil cum accusantium necessitatibus! Iste, officiis.</div>
<div class="dpl-Row-col dpl-size-1-3@xs dpl-pull-1-3@xs">3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error veritatis voluptas inventore magnam. Amet blanditiis eius, aspernatur dolorem magnam, a neque, molestiae cum quae porro unde est inventore recusandae architecto.</div>
</div>
</div>
The Tidelift Subscription provides access to a continuously curated stream of human-researched and maintainer-verified data on open source packages and their licenses, releases, vulnerabilities, and development practices.
Learn more →Something wrong with this page? Make a suggestion
Export .ABOUT file for this package
Last synced: 2022-06-13 03:10:50 UTC
Login to resync this project