We Keep Coding

How to inline only the CSS that a page uses instead of loading the whole framework?

I have a page that uses Materialize CSS. It uses almost nothing from the framework other than a container, the basic font styling and the following:
<div id="benefits">
<div class="row">
<div class="col s12 m12 l6">
<h2>Neat colors</h2>
<div>...</div>
</div>
</div>
</div>
Is there anything I can do with Sass (unfamiar with it) or Webpack (semi familiar with it) or anything else that would allow me to extract only the CSS that the page uses and inline it? If I was good at CSS I probably would hand-roll it but that is not the case.
Ultimately, I'd like to make the page AMP compliant—maybe there is a better way to achieve this altogether...

Atomized CSS is a good technique for inlining CSS.
If you're looking to use only what you absolutely need, this is worth checking out.
ACSS relies on Atomizer to dynamically generate an Atomic stylesheet
from the ACSS classes you're actually using in your project (no unused
styles!), or predeclare styles in configuration - it's up to you. ACSS
is not opinionated, brings no CSS of its own, and integrates nicely
with your favorite task runner.
Atomic CSS

I think you need purgeCSS. It is a webpack plugin that purges css based on html files

Implement different layouts for a (part of a) web page

I want to implement a coding playground. At the moment, I use flex-box to define the position of different panels. Here is a JSBin, and its html part:
<div class="flex-box">
<div class="col" id="html-panel">
<p>html</p>
</div>
<div class="handle">
<div class="handle-inner"></div>
</div>
<div class="col" id="css-panel">
<p>css</p>
</div>
<div class="handle">
<div class="handle-inner"></div>
</div>
<div class="col" id="js-panel">
<p>javascript</p>
</div>
</div>
(to make it a playground, I add textarea inside each panel (e.g., html-textarea in html-panel), and combine the content of the 3 textareas to return an output. The playground reacts to every change to the content in textareas: I choose to use an AngularJS controller to do so, rather than JQuery event handlers.)
Now, I am wondering how to realise different layouts without repeating too much code. Like Liveweave proposing 4 layouts (see right bottom corner) to users, I want to propose displaying for example
horizontally the 3 panels as what looks like at the moment
vertically the 3 panels
1 on the left and 2 on the right
2 on the left and 1 on the right
So what's the best approach/structure/tool to implement this?
To share maximum, should we realise this with 1 common .html, 1 common .js and 4 .css files? Then, we just need to choose different .css file for different layouts?

Based on some research, this certainly can be done by nested views / UI-Router / AngularUI / Angular JS. And we will be able to define one html file per layout.
But I will first go for what #DCR suggested: by only JS and CSS. Because it is simpler, also because JS allows us to inject html, e.g., by innerHTML. Therefore, I could inject 4 html strings for 4 layouts. Inside the 4 html strings, there could be same class names, which enable some sharing of styling in CSS and functions (eg, splitter-dragging) in JS.

Bootstrap Responsive Tabs with Ajax loaded content

I am having a lot of tabs in my website designed with Bootstrap which I tried to make responsive using https://github.com/flatlogic/bootstrap-tabcollapse (Demo here:http://tabcollapse.okendoken.com/example/example.html)
I was able to make the tabs responsive but the problem is I am loading content into the tabs using AJAX (like https://coderwall.com/p/1lnxba/load-bootstrap-tabs-dynamically) and the problem is that the entire markup of the tab changes to panel when resized to small size and id of the element is also changed.
So, how will I load the elements inside those tabs using ajax since markup is changed. I dont want to write separate code for loading for both cases.
Or is there any other better alternative to this? Or some solution which does not change markup of tabs but still is responsive?
Thanks in advance.

Try using Bootstrap's Containers to hold the AJAX-loaded content.
I'm assuming your code is something like this (just the tab-pane bit), but you should update your question with at least a layout to get better responses.
<div class="tab-pane fade in active" id="home">
<!-- ... Other Content ... -->
<div id="ajaxContent" class="container">
<!-- Where Tab 1 Content would go because it's active -->
</div>
<!-- ... Other Content ... -->
</div>
See Bootstrap's Components page for a full list of classes that you can use.

menu on only a single page

I am not really into all those coding terms, so I am having some difficulties to find answer to my problem. I want to create a single site menu. So if i press on a list item the browser should open an other content but on the same page. I tried using css with targets but everytime i click a new target the tagets will overlap and the old content will not disappear. I tried using Javascript with innerHTML but in javascript i need to write the whole page in a single line (.innerHTML ='websitecode') this will create a horrible overview.
Is there any other possibility to create something like this? Maybe with the require() / involve() function in php?
Thank you

From your question, what I understood is you want menu navigation without loading the content again.
`http://codepen.io/ArslanRafique/pen/raZybL`
Above is the snippet, I recently developed, simple menu navigation by using simple CSS and HTML. You can achieve simple menu navigation by using HTML label and can swap your views accordingly.
Please have a look at shared snippet, hope it will help you.

Sounds like you would like to create a single page web application:
There are many great javascript frameworks for this, try angular.
https://www.airpair.com/angularjs/building-angularjs-app-tutorial
Put your menu in the header file, and the content you want to replace in to views.
Or use angular UI-router https://github.com/angular-ui/ui-router/wiki

There are few possibilities to achieve your goal.
The simple and not so elegant one would be to generate the complete content and set anchors on the page. From the menu the user can call the anchors and will be brought to a desired part of the page. Example:
<!-- Menu -->
<ul>
<li>About us</li>
<li>Products</li>
</ul>
<!-- Page contents -->
<div id="aboutus">This is about us.</div>
<div id="products">Our products.</div>
More elegant, sophisticated and professional approach would be creating a SPA (single page application). It would include some techniques like AJAX, where you can load (or remove) contents on the page without refreshing.
There are many modern JS frameworks that can help you, for example AngularJS, ReactJS, etc.
Wikipedia offers also more information on SPA:
https://en.wikipedia.org/wiki/Single-page_application

So Arlan's version looks a lot prettier, but you can also use javaScript with divs that you can hide or display with functions. You can format the divs in your css with whatever you want. May get a little clunky if you have a long menu...
<div id="divOne">This will show some text</div>
<div id="divTwo"><p>This will show even more text</p><p>I may even format it differently</p>
</div>
<div id="divThree">This shows text that is different from the other two</div>
var formatOne = document.getElementById("button1"); //create handle for first button
formatOne.onclick = function() { //add functionality
document.getElementById("divOne").style.display = "block";
document.getElementById("divTwo").style.display = "none";
document.getElementById("divThree").style.display = "none";
}
Jsfiddle to show the functionality.
https://jsfiddle.net/lattivalidus/s7a9dLe7/

twitter bootstrap popover displaying but looks weird - rails

Hi I'm using twitter bootstrap popover functionality with seyhunak / twitter-bootstrap-rails gem.
I have the following code in my view:
<ul class="nav nav-pills subnav">
<li>
<a class="label-with-popover" data-content="popover content" data-title="popover title">Home Valuations:</a>
</li>
</ul>
The following in my page.js.coffe
jQuery ->
$('.label-with-popover').popover()
The popover appears but looks like so:
Bootstrap popover displays weird with extra vertical line through it: does anyone know how I can fix this?
Let me know if you need more info.

You've got a bunch of collisions between Bootstrap CSS and the CSS you wrote for your project. In the future, you should consider using a namespace for your own general-purpose classes like .arrow, or your CSS will interfere with third-party libraries (like Bootstrap) which use such common class names.
Here's an edit to your fiddle: http://jsfiddle.net/5rT9t/1/
I removed the margin declaration on .content, the padding values on .arrow, and, strictly for demo, added a container div to offset the popover so you could see the whole thing.