How to get 15% discount for first payment on Avocode? Very easy!
After downloading program, registration and BEFORE FIRST PAYMENT, on page where you need to input your bank card data, you'll see caption: "Do you have promo code?".
And after clicking on this link, enter promo-code "nikita" and you will see price to already with discount. Then push "PAY" and enjoy!
If you misunderstood, use these instructions:
Now it's time to talk about CSS-Generate feature and about the support of CSS-preprocessors.
All of the code is generated at the right bar. This section updates every time you select a layer or a group of layers.
Avocode can't generate absolutely all CSS-styles, but the most common are available. I mean font-size, font-family, font-weight, height, width, color, background-color and so on..
You can copy all of the generated code to your clipboard in one click or even select one or more strings that you need.
Right now native CSS mode is active. It means that there is no preprocessor's code. There are some preferences you can adjust by clicking on this icon on the right.
Lets see what have we got there..
Top checkbox switches on and off copying the string with property to a clipboard in one click.
Below you see a dropdown menu. It allows you to select between pure CSS and some of the most used preprocessor languages. We will dive in it a bit later.
Show Comments is responsible for generating comments based on a layer name. This is with comments enabled. And this is without.
Show Absolute Positions option enforces Avocode to insert absolute positions of all elements in the result style code.
Use color name option replaces HEX-codes of the most common colors with keywords. For example, #fff will be replaced with word "white", #000 with "black" and so on..
Vendor Prefixes allows you to generate code with vendor prefixes for different browsers.
Dropdown menu Unit defines preferenced units for setting width, height and any other sizes in output generated code: px, em or rem.
Autoprefixer field can be used to set up which versions of which browsers you want to have prefixed in code. Format of the string is available on caniuse.com.
Selector checkbox tells Avocode to create selectors based on layer name.
And just below you can select what it will be - identifier, class or tag name.
Next you can change the writing style of selectors: either with hyphen, or with underscore and also with camelCase. camelCase means that there are no spaces between words and each word, besides the first one, starts with capital letter.
Next you can choose color model for setting colors: HEX, RGB or HSL.
And finally quotes type: double or single.
Now lets check preprocessors options.
like CSS, but it has 2 new options:
first - using Less Hat's library mixins,
and the second - escapes parameters of mixins if there is any problem with compiling.
you can choose newer syntax of Sass called SCSS
There are also several popular mixins libraries for Sass available, which will have impact on the output style code.
And the last is Stylus:
here is the option that allows Avocode to make generated Stylus code more like native CSS. Stylus by default has no colons, semicolons or brackets – it is all based on spaces, tabs and linebrakes.
And it’s also possible to activate Nib mixins library for Stylus code.
That's all for preferences. Many features wait for implementing in the future, but you can already customize very much nowadays!
Well, now we have to clarify how to use variables and string replacements in Avocode.
Generally, variables are the prerogative of CSS-preprocessors, so lets switch to pure Sass without any mixins library and create some color variables in our project with the picker tool.
We can now place all of these colors with named variables. All variables appear on the right panel in the VARIABLES section.
Any of them can be changed or deleted. There is also Get Code button with full list of variables for inserting available.
Now when you select a layer with color code you’ve already placed in variables list, it will be replaced with the named value. This feature is very cool if you are using preprocessors. Just think of how much Avocode actually does for you!
The last function we will have a look at in this lesson is string replacement.
To create replacement rule you need to press Add Variable button and choose Replace tab.
Here in the top field you need to type which string to replace and in the bottom field what it should be replaced with.
For example, line font-weight: 400 can be automatically replaced with font-weight: bold.
Or you can replace font-family: SourceSansPro with font-family: OpenSans, if you want to use only one font-family through all of your web page.