morganfeeney / interior Goto Github PK

Due to the font-size being increased using percentages the distance between the lines created using a gradient sometimes displays incorrectly.

For example on large screens I'm seeing the small screen baseline grid, when I resize the browser window the correct spacing is applied.

There is no info to explain what the page is for.

I've been experimenting, and making a mess! Time to work out what the actual base theme is, what is included with Interior for it to work without a theme (if relevant), and generally a good tidy up of any excess.

This is a list of example layouts I want to create but don't have time for right now.

• Gallery
• Column count layout - refer to deleted file, styles will still be available.

Improve the consistency of code and make it more readable by doing the following:

• Use @media blocks to wrap columns in media queries, as opposed to the $breakpoint mixin argument. This will make the code easier to understand as it is already familiar.
• Expand all mixin arguments onto separate lines so they reads more like CSS.

Each page should utilise a grid, therefore add the appropriate grid to each section of the site to demonstrate the use of the grid — kinda the point of the site.

Try switching the layout so that the bleed runs off the right, and the text is offset from the left.

No sitemap submitted to Webmaster Tools. Generate, push and reference.

While the document is being painted there is a FOUC and the SVG log is mahoosive. Coincidentally there is an article about this via CS Tricks: http://www.otsukare.info/2017/11/02/fatwigoo

This is essentially a to do list

• How the default setup has been customised into the interior theme.

To display the font styles accurately in more than a single place, and to save duplication, some new variables should be created e.g.

$fs-canon: bs(3)
$font-size-h1: $fs-canon;

The grid-overlay mixin has a flag to set the grid to the center. The CSS output was actually invalid and not doing what I thought it did.

left: calc(50% - $max-width/2);

The variable needs to be interpolated if used in calc().

Tidy up the original (un-re-ordered) version of modular man. Add images.

See example:

When I use a %large (p) in a #main-header and the parent has a bottom margin greater than the child, the vertical rhythm is not correct.

See screenshots.

Some SVG images sizes are huge. God know how when I'm using artboards to isolate each image.

Due to the nature of rem/em units and typography, AND the measure, it seems more logical to look at using rem units over px for media queries. It could improve the readability of each layout.

I should also use media queries for viewport height due to the use of negative space and heading alignment, such as the heading-whopper() mixin.

There seems to be some unwanted spacing occurring when stacking multiple .grid containers. This interferes with the baseline. If you inspect and then uncheck the display flex rule you can see the alignment issue goes away.

It's a bit of creep.

Make the grid CSS into a mixin.

Look at this example layout and implement it.

The documentation is out of date for the next release. This needs to be updated, pages like

• method
• grid
• code samples

Designed this in the browser to go back to later.

The markup and the alignment with the grid don't match up in the new grid.html page layout. The gutters and the grid should be as it is in the modular man re-ordered layout.