@lucca-front/scss NPM

lucca-front

A modular framework for developing web application by lucca. Uses sub-packages architecture with unified versioning, a la angular.

Contains

a set of icons
a scss framework
a library of usefull angular components

How to install

Add Lucca Front to your npm package

npm install @lucca-front/icons --save
npm install @lucca-front/scss --save
npm install @lucca-front/ng --save

Import scss and NG style

Import Lucca Front in src/style.scss (or your main scss file):

@import "~@lucca-front/scss/src/main.overridable.scss";

In angular-cli.json, add this to your stylePreprocessorOptions includePaths:

"apps": [
	...
	"styles": [
		"styles.scss"		
	],
	"stylePreprocessorOptions": {
		"includePaths": [
			"path_to_node_modules/@lucca-front/scss/src/overrides",
			"path_to_node_modules/@lucca-front/ng/src/style/overrides" // if you use the ng package
		]
	},
	...
],

Import fonts

If you are using our default font (Source Sans Pro), don't forget to add your fonts in your <header>:

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,600,700" rel="stylesheet">

Theming

Setup

You can override many variables to tailor Lucca-Front style to your needs. To do so, you must create a folder and reference it in your angular-cli.json as a stylePreprocessorOptions includePaths

"apps": [
	...
	"stylePreprocessorOptions": {
		"includePaths": [
			"path to your override folder" // must be first
			"path_to_node_modules/@lucca-front/scss/src/overrides",
		]
	},
	...
],

In your override folder, you can create different files for different needs :

breakpoints.override.scss
Contains a map of breakpoints values.
commons.override.scss
Contains a map of the most common values such as border-radius, font-family, and so on.
components.override.scss
Can either have directly components maps such as the button map. Or it can just be a file importing every component theme override you have
icons.override.scss
Contains a map of with the prefix (class) used for the icons and the path to the icon file (without its extension).
palettes.override.scss
Contains a map of the color themes (palette) used in the framework. Palette must have a color key but can be extended to as many keys as you need.
sizes.override.scss
Contains a map of font sizes and spacings (padding & margin).

You only have to write down the variables you wish to modify or add. More details on each variable are available in the SCSS demo.

Palettes

You can set a custom palette in palettes.override.scss. Your palette will be accessible in some components with palette-* classes.

$palettes: (
	"primary": (
		"color": #FFCC00,
		"text": #666666,
	),
	"secondary": (
		"color": #FF6600,
		"text": #FFFFFF,
	),
	"success": (
		"color": #9ACD32,
		"text": #FFFFFF,
	),
	"warning": (
		"color": #FF9900,
		"text": #FFFFFF,
	),
	"error": (
		"color": #FF3300,
		"text": #FFFFFF,
	),
);

$colors: (
	text: (
		"default": #666666,
		"light": #999999,
		"placeholder": #CCCCCC,
	),
);
$theme: _set($theme, "palettes", $palettes);
$theme: _set($theme, "colors", $colors);

You can also call your palette colors in your own components:

@import "~@lucca-front/scss/src/theming.overridable";
_color("primary")
_color("primary", "text")
_color("text.default")

Breakpoints

You can set up custom breakpoints values in breakpoints.override.scss

$breakpoints: (
	"xs": (
		"breakAt": 0,
		"spacing": 0,
	),
	"sm": (
		"breakAt": 576px,
		"spacing": 20px,
	),
	"md": (
		"breakAt": 768px,
		"spacing": 30px,
	),
	"lg": (
		"breakAt": 992px,
		"spacing": 40px,
	),
	"xl": (
		"breakAt": 1200px,
		"spacing": 60px,
	),
	"xxl": (
		"breakAt": 1350px,
		"spacing": 60px,
	),
	"xxxl": (
		"breakAt": 1500px,
		"spacing": 60px,
	)
);
$theme: _set($theme, "breakpoints", $breakpoints);

lucca scss

normalize.css

cleemy-front @everything-registry/sub-chunk-563 @zalastax/nolb-_luc

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

1 year ago

1 year ago

1 year ago

11 months ago

11 months ago

1 year ago

1 year ago

1 year ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago