Custom Code

The above item was written in a code editor. It has a two column grid layout and a CSS hover animation.
The little page in column one was created using CSS and the pushpin is an SVG icon which is about a quarter of the size of an equivalent PNG.
The code was inserted using the ThemeKit RWD-X Code widget.
For those interested in creating their own website items a code code editor makes life a lot easier along with apps for opening and modifying SVGs and for minifying CSS and Javascript Files.
The links below show examples - two of which are free …

Responsive Code Insert

EverWeb doesn't have a feasible method of inserting code for responsive items. The HTML Snippet and the Head/Footer code box are really difficult to use and, combined with the Responsive Row, are a nightmare in the making.
CSS Reset
The first consideration is to provide reset styles which EverWeb - for no apparent reason - doesn't provide.
Each browser has its own default user agent stylesheet which was meant to impart some uniformity to basic items before CSS3 came into use.
The reset stylesheet inserted by the code widget is very basic and resets margins on details list, heading, blockquote, figure and paragraphs and heading font weight.
Box-sizing is reset to border-box and sans-serif is set for the font family fallback.
Other reset items are for basic styling of the blockquote, hr, mark, link, image and list.
Headings
Browsers still apply a bold font weight and a margin to HTML headings. This is a throwback to the days before CSS was invented.
Bold, italic and letter spacing should not be used since they present problems for the 20% of website visitors who have reading difficulties such as dyslexia.
Mark
Although links in text are no longer used if any text is underlined for emphasis it may be confused as a link. The best alternative is to use the <mark> tag. The browser default styling is ugly hence the overwrite styles in the reset.
Blockquote
The browser default for blockquote is also pretty wild so it is included in the reset since the <blockquote> tag is essential for inserting info from other sources.

Beware

I would say that about 90% of the code available on the internet is out of date, badly written and basically obsolete.
Quite often code is plagiarised by others. The same code appears several times in a search. It may be popular but in most cases it sure ain't right.
When considering code to copy and paste take note …
HTML
Make sure the code is using HTML 5 containers. If it doesn't it's sure sign it is way out of date.
At the time of writing EverWeb doesn't use HTML5 except to enclose items in a <section> element. This means that users can't enclose items in a sectionso it makes sense to use a <div> with an ID for a wrapper.
EverWeb uses the following to set up a basic page.
<div class="container">
<div class="content" data-minheight="4000"></div>
<footer data-top='4000' data-height='0'></footer>
</div>
This means that you can't have any item in your code with a class name of "container" or "content".
Realistically the container should use the HTML 5 <main> and the footer should be an option as its use prevents any fixed position items from being inserted below it.

Stylesheets

Stylesheets are inserted in the head of the HTML doc and should be minified before inserting. It is important to add the .min suffix so that Google gives you credit for it! Example …
projectStyles.min.css

Javascript

Javascript can be inserted in the head or the body.
Some scripts must be inserted (or defered) after the HTML and should be inserted in the footer code box - enslosed in <script></script> tags of course.