basscss | level CSS Toolkit – the original Functional | Theme library

I am using React with Webpack 4. I am trying to import the BassCSS classes in my index.css:

I am trying to render a Context Provider in React with TypeScript.

Following code represents what I am trying to achieve in a very simple manner.

Will amp-story work fully with Normalize.css and Basscss? I ask because AMP Start is built on top of these two existing open-source projects:

https://www.ampstart.com/howitworks

Normalize.css

Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing. This provides a clean slate to define clear and consistent styles for AMP Start across devices.

Basscss

AMP start is built using Basscss, a low level CSS toolkit. Basscss is a very light weight toolkit, that provides lots of CSS utility classes help us do things like layouts, responsive Grids etc, without having to write any custom css.

Basscss was out-of-the-box lean and responsive, which was important for AMP Start. We used Basscss as the base (sans addons) but we removed any instances of “!important” from CSS rules because "!important" is incompatible with AMP. By using the existing Basscss classes, we were able to write a lot less CSS and still make great looking pages, even with AMP’s 50Kb CSS limitation.

On top of the foundation provided by these two projects, we added a set of more opinionated styles to the CSS, so that the components and templates would inherit a consistent look for AMP Start.

All told, the CSS takes up less than half of the 50kB quota in AMP, so you should have plenty of room to customize your pages with Basscss and AMP Start classes.

I am working on a VueJS application and its not working out in IE11. I get blank pages and an error that states "Unable to get property 'call' of undefined or null reference" on this line:

// Return the exports of the module return module.exports;

My webpack.base.config.js file:

I'm playing with a portfolio section in a page that looks like this:

I have started using a technique for handling vertical spacing in front-end design that uses transparent

1. is a self-closing tag, so it is kind on the markup
2. Its very semantic purpose (according to MDN) is to represent a thematic break or a shift of topic with a section. MDN also precises that it is now defined in semantic terms, rather than presentational terms, which mean that an invisible that only takes space does not oppose the semantic meaning of the element.
3. It is easy to consistently style across browsers
4. We can build responsive behaviour right into it

I am very much aware of the needed separation between markup and style. However, vertical spacing between elements in responsive design is sometimes tedious to do, and often comes with a higher price than semantic markup in my opinion.

A common approach is to handle special cases with manual styling: when component-based classes such as .my-special-recurring-element is not precise enough (let's say this particular one is too close to the element below it), well add an id #special-element-that-requires-spacing and style it manually, which becomes very hard to maintain: