What is Weking
Weking is a brand-new modern, responsive and flexible front-end framework. It's designed with Google's Material Design guidelines and . All functionality created with CSS and built with Less.
Flexible BEM
Weking uses modified BEM-naming to make markup more elegant. BEM is technology for creating web applications by Yandex. BEM means Block, Element, Modifier.
Weking selectors are shorter than original BEM because its use camel case and one class for modifiers. With CSS3 Selectors we can easily parse class. So if classname contains modifier name, browser apply modifier styles for block/element. How to create modifier. In HTML its may looks like that:
<!-- Block -->
<tag class="blockName">Block</tag>
<!-- Element -->
<tag class="blockName_elementName">Element</tag>
<!-- Modifiers -->
<tag class="blockName blockName-modifier1-modifier2">Block with Modifiers</tag>
<tag class="blockName_elementName blockName_elementName-modifier1-modifier2">Element with Modifiers</tag>
<!-- Or so -->
<tag class="blockName -modifier1 -modifier2">Block with Modifiers</tag>
<tag class="blockName_elementName -modifier1 -modifier2">Element with Modifiers</tag>License
Weking front-end framework, LESS Hat and HINT.css are licensed under MIT License. Material Design Icons licensed by CC Attribution-ShareAlike 4.0 International.
Quick Start
Get default precompiled Weking files (dist folder) from repository. After unzip archive you have next directory structure:
weking/ ├── dist/ │ ├── css/ │ │ ├── weking.css │ │ ├── weking.css.map │ │ ├── weking.min.css │ │ ├── weking-theme.css │ │ ├── weking-theme.css.map │ │ └── weking-theme.min.css │ └── fonts/ │ ├── Material-Design-Iconic-Font.eot │ ├── Material-Design-Iconic-Font.svg │ ├── Material-Design-Iconic-Font.ttf │ ├── Material-Design-Iconic-Font.woff │ └── Material-Design-Iconic-Font.woff2 └── index.html
Open index.html, change code for your project.
See code examples and write code
Start with Less
Weking uses Grunt for its build system. Firstly you must install Node.js (includes npm). After that install Grunt CLI:
$ npm install -g grunt-cli
Dowload source files from GitHub
$ git clone https://github.com/weking/weking-frontend.git
Next install develop dependencies via npm:
$ npm install
Source structure
weking/
│ .gitignore
│ index.html
│ Gruntfile.js
│ LICENSE.md
│ package.json
│ README.md
│
├───dist
│ └───...
│
└───src
├───fonts
│ Material-Design-Iconic-Font.eot
│ Material-Design-Iconic-Font.svg
│ Material-Design-Iconic-Font.ttf
│ Material-Design-Iconic-Font.woff
│
└───less
│ weking-theme.less
│ weking.less
│
└───weking
├───addons
│ │ accordion.less
│ │ card.less
│ │ form-advanced.less
│ │ group.less
│ │ icons.less
│ │ label.less
│ │ modal.less
│ │ navdrawer.less
│ │ progress.less
│ │ tabs.less
│ │ tooltip.less
│ │
│ └───icons
│ actions.less
│ alert.less
│ audio-video.less
│ communication.less
│ content.less
│ device.less
│ editor.less
│ file.less
│ hardware.less
│ image.less
│ maps.less
│ navigation.less
│ notification.less
│ social.less
│ toggle.less
│
├───core
│ base.less
│ form.less
│ grid.less
│ menu.less
│ print.less
│ table.less
│
├───layout
│ index.less
│ pricing.less
│
└───utilities
card.less
form.less
grid.less
index.less
lesshat.less
menu.less
mixins.less
progress.less
table.less
variables.less
Grunt tasks
compile-weking compiles from source only framework stylesheet (weking.css).
compile-theme compiles from source only theme stylesheet (weking-theme.css).
compile-weking-newer watch changes in framework source files and recomple framework stylesheet.
compile-theme-newer watch changes in theme source files and recomple theme stylesheet.
compile compiles from source both framework and theme stylesheets.
compile-newer watch changes in both framework and theme source files and recomple them. Also used as default task.
production-weking compiles and minify framework stylesheet.
production-theme compiles and minify theme stylesheet.
production compiles and minify both framework and theme stylesheets.
Weking variables
You can find all these Weking variables in src/less/weking/utilities/variables.less
Color swatches
...
Media queries
@screen-xs define media query breakpont for mobiles (default: 480px)
@screen-sm define media query breakpont for tablets (default: 768px)
@screen-md define media query breakpont for small desktops (default: 992px)
@screen-lg define media query breakpont for generic desktops (default: 1200px)
@screen-xl define media query breakpont for wide desktops (default: 1600px)
See how to use these variables in your media queries in best practices section.
Base variables
@body-bg `body` background color ( default: @white )
@text-color `body` text color ( default: @grey900 )
@link-color link element color ( default: @secondary )
@link-hover-color link element color on hover ( default: darken(@link-color, 10%) )
@basic-radius default `border-radius` value ( default: 3px )
Grid system variables
@grid-columns number of columns in grid (default: 12)
@grid-baseline grid baseline used for vertical rythm (default: 8px)
@container-size number of columns covered by container (default: 8)
@container-max-width max-width value of container (default: 1200px)
Typography variables
@font-size default font-size (default: 14px)
@font-line-height default text line-height used for vertical rythm (default: @grid-baseline*3)
@font-family defaul font-family (default: Roboto, sans-serif)
@font-family-mono monospaced font-family for `pre`, `code`, `kbd` (default: Monaco, Menlo, Consolas, "Courier New", monospace)
@font-family-headings font-family for headings (default: @font-family)
Form elements variables
`<input>`, `<select>`, `<textarea>` are inputs
@input-color border color for inputs (default: @grey)
@input-text-color text color for inputs (default: @text-color)
@input-focus-color border color for inputs on focus (default: @secondary)
@input-error-color border color for inputs on error (default: @red)
@input-radius border radius for inputs and buttons (default: @basic-radius)
Menus variables
@menu-bg default menu background color (default: 'grey')
@menu-color default menu text color (default: @grey90)
@sub-menu-bg default dropdown menu background color (default: @white)
@sub-menu-color default dropdown menu text color (default: @grey900)
Modals variables
@modal-bg modal overlay background color ( default: fade(@grey900, 50%) )
@modal-dialog-bg modal dialog background color ( default: @white )
@modal-dialog-color modal dialog text color ( default: @text-color )
@modal-radius modal dialog `border-radius` value ( default: @basic-radius )
Weking mixins
Main mixins
Main mixins are in src/less/weking/utilities/mixins.less.
Font mixin
Weking has good vertical rythm system. Vertical rythm is important part of UX design. And you can use .font-mixin to not break vertical rythm.
.font(@font-size)This code returns font-size, line-height properties. line-height calculates depending on @font-size.
Animation mixin
.animate(@props, @time, @function)This mixin adds transition to your element. Arguments are:
@props- transition properties@time- transition duration@function- transtion timing function
Z-Depth mixin
In Material Design styleguides "objects cast shadows" to show their position on z-axis. In Weking you can easily add this effect to objects. For this purpose use next mixins:
.z-depth-0() // Remove shadow
.z-depth-1(@position) // First level shadow
.z-depth-2(@position) // Second level shadow
.z-depth-3(@position) // Third level shadow
.z-depth-4(@position) // Fourth level shadow
.z-depth-5(@position) // Fifth level shadowQuick tip: read more about Material Design before start design interface
Module's mixins
This mixins used for colorising elements.
// Card coloriser
// @bg - card background color (type: HEX color)
// @color - card text color (type: HEX color)
.card-gen(@bg, @color)
// Button Generator
// @bg - name of background color swatch (type: string, ex. 'primary')
// @color - button text color (type: HEX color)
// @bg-level - level of background color swatch (type: number, default: 500)
.btn-gen(@bg, @color, @bg-level)
// Menu generator
// @bg - name of background color swatch (type: string, ex. 'primary')
// @color - menu text color (type: HEX color)
// @indicator - indicator color of active tab (type: HEX color, default: @color)
// @bg-level - level of background color swatch (type: number, default: 500)
.menu-gen(@bg, @color, @indicator, @bg-level)
// Progress generator
// @color - progress bar color (type: HEX color)
.progress-gen(@color)
// Table generator
// @bg - name of background color swatch (type: string, ex. 'primary')
// @color - button text color (type: HEX color)
// @bg-level - level of background color swatch (type: number, default: 500)
.table-gen(@bg, @color, @bg-level)Grid mixins
Sometimes you need use some properties from grid elements without using grid. Next mixins created for this purpose.
.make-column(@size) - return width property of @size-column
.make-offsetL(@size) - return margin-left for @size-columns
.make-offsetR(@size) - return margin-right for @size-columns
Best practices to write code with Weking
Create modifier
// Element styles
.blockName_elementName {
...
}
// Element with modifier styles
.blockName_elementName[class*=modifierName] {
...
}Create media queries
Weking is mobile-first.
// Styles for all devices
...
// Styles for more than mobiles
@media (min-width: @screen-sm) {
...
}
// Styles for more than tablets
@media (min-width: @screen-md) {
...
}
// Styles for desktops
@media (min-width: @screen-lg) {
...
}
// Styles for wide desktops
@media (min-width: @screen-xl) {
...
}
Custom color swatch
...
// Create a custom color swatch
@custom: @custom500;
@custom50: #E8F5E9;
@custom100: #C8E6C9;
@custom200: #A5D6A7;
@custom300: #81C784;
@custom400: #66BB6A;
@custom500: #4CAF50;
@custom600: #43A047;
@custom700: #388E3C;
@custom800: #2E7D32;
@custom900: #1B5E20;
@customA100: #B9F6CA;
@customA200: #69F0AE;
@customA400: #00E676;
@customA700: #00C853;Colorizing modules
.menu {
// Rounded corners for menu
.lh-border-radius(@basic-radius;);
// Create new color for menu
&[class*=red] {
.menu-gen('red', @white, 300);
}
// Redefine Z position for fixed menus
&-fixedTop {
.z-depth-3;
}
&-fixedBottom {
.z-depth-3('top');
}
}
.table {
// Add shadow to table header
&_header {
.z-depth-1;
}
// Create new color for table
&[class*=red] {
.table-gen('red', @white);
}
}Read more about that in module page.